Completed Day2, learned about React, JSX, VDOM, babel, completed exercises and code for the index.html and index.jsx files, will start on day 3 next

3 years ago · a78a29f3f5
parent a782f1efba
commit a78a29f3f5
5 changed files with 327 additions and 0 deletions
--- a/solutions/day-02/exercise_questions.js
+++ b/solutions/day-02/exercise_questions.js
@ -0,0 +1,41 @@
+// Exercises: What is React?
+    // 1. What is React?
+            // React a popular JavaScript library used for building resuable user interfaces
+    // 2. What is a library?
+            // collection of prewritten code that users can use to optimize a task
+    // 3. What is a single page application?
+            // is an application that has only 1 index.html file
+    // 4. What is a component ?
+            // conceptually they are like JS functions
+    // 5. What is the latest version of React?
+            // latest version is 18.2.0
+    // 6. What is DOM?
+            // DOM is Document Object Model for HTML 
+    // 7. What is React Virtual DOM?
+            // React Virtual DOM makes changes and updates to only elements that need changing
+    // 8. What does a web application or a website(composed of) have?
+            // Composes of buttons, links, forms, headers, footers, sections, articles, text, images, audios, videos, and boxes of different shapes. 
+
+
+// Exercises: Why React?
+    // 1. Why did you chose to use react?
+            // I chose to use it because I've only partially learned it and need more training with it.
+    // 2. What measures do you use to know popularity ?
+            // statistics, social media, personal research
+    // 3. What is more popular, React or Vue ?
+            // Probably React, since I see more job postings requiring knowledge of it
+
+
+// Exercises: JSX
+    // 1. What is an HTML element?
+            // an element that has an opening tag and closing tag, content, and attributes
+    // 2. How to write a self closing HTML element?
+            // <img/> is an example 
+    // 3. What is an HTML attribute? Write some of them?
+            // <img src = ""> ,  or <input value = "">
+    // 4. What is JSX?
+             // JavaScript XML,allows for writting HTML elements with JS code.
+    // 5. What is babel?
+            // a transpiler used in part with react
+    // 6. What is a transpiler?
+            // it transpiles JSX in to pure JS
--- a/solutions/day-02/index.html
+++ b/solutions/day-02/index.html
@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- add react and react-dom CDN -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> 
+    <link
+        href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
+        rel="stylesheet"
+    />
+    <title>30 Days Of React Challenge</title>
+    <!-- Creating internal styling instead of object styling in the index.jsx file -->
+    <style>
+    /* == General style === */
+    * {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    }
+
+    html,
+    body {
+    height: 100%;
+    line-height: 1.5;
+    font-family: 'Montserrat';
+    font-weight: 300;
+    color: black;
+    }
+
+    .root {
+    min-height: 100%;
+    position: relative;
+    }
+
+    .header-wrapper,
+    .main-wrapper,
+    .footer-wrapper {
+    width: 85%;
+    margin: auto;
+    }
+
+    .header-wrapper,
+    .main-wrapper {
+    padding: 10px;
+    margin: 2px auto;
+    }
+
+    h1 {
+    font-size: 70px;
+    font-weight: 300;
+    }
+
+    h2,
+    h3 {
+    font-weight: 300;
+    }
+
+    header {
+    background-color: #61dbfb;
+    padding: 10px;
+    }
+
+    main {
+    padding: 10px;
+    padding-bottom: 60px;
+    /* Height of the footer */
+    }
+
+    ul {
+    margin-left: 15px;
+    }
+
+    ul li {
+    list-style: none;
+    }
+
+    footer {
+    position: absolute;
+    bottom: 0;
+    left: 7.5%; /*added myself to offset footer to the right to match the header*/
+    width: 100%;
+    height: 60px;
+    /* Height of the footer */
+    background: #6cf;
+    }
+
+    .footer-wrapper {
+    font-weight: 400;
+    text-align: center;
+    line-height: 60px;
+    }
+
+    .app{
+        background-color: grey;
+    }
+
+
+    </style>
+</head>
+<body>
+    <div class="root"></div>
+
+    <!-- add babel CDN -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- give script type of babel for transpiling react JSX to pure JS in browser -->
+    <script type="text/babel" src="index.jsx"></script>
+    <!-- <script type="text/babel" src="exercise.jsx"></script> -->
+</body>
+</html>
--- a/solutions/day-02/index.jsx
+++ b/solutions/day-02/index.jsx
@ -0,0 +1,151 @@
+//testing if CDN are working correctly
+console.log(React); // print React object to console
+
+// get root element from index.html
+const rootElement = document.querySelector('.root');
+
+// Create JSX element for the browser
+// const jsxElement = <h1>I am a JSX element</h1>
+
+// ALL STYLING BELOW NOT USED ANYMORE 
+// Add styling for the header JSX element
+// const headerStyles = {
+//     backgroundColor: '#61DBFB',
+//     fontFamily: 'Helvetica Neue',
+//     padding: 25,
+//     lineHeight: 1.5,
+// }
+
+// Add styling for the main JSX element
+// const mainStyles = {
+//     backgroundColor: '#F3F0F5',
+// }
+
+// Add styling for the footer JSX element
+// const footerStyles = {
+//     backgroundColor: '#61DBFB',
+// }
+
+
+// Instead of using static data we can use dynamic data and inject it into JSX elements;
+const welcome = 'Welcome to 30 Days Of React';
+const title = 'Getting Started React';
+const subtitle = 'JavaScript Library';
+const author = {
+    firstName: 'Adam',
+    lastName: 'West'
+}
+const date = 'Jan 8, 2023';
+
+// Create a header JSX element that contains title, subtitles, author or date
+const header = (
+    <header className="header-wrapper">
+        <h1>{welcome}</h1>
+        <h2>{title}</h2>
+        <h3>{subtitle}</h3>
+        <p>Student: {author.firstName} {author.lastName} </p>
+        <small>Date: {date}</small>
+    </header>
+)
+
+
+// Inject array into main 
+const techs = ['HTML','CSS','JavaScript'];
+// tech not displayed correctly, need to fix that how?
+// need to also give each list item a unique key identifier
+const techsFormatted = techs.map(element =>{return <li key={element}>{element}</li>});
+
+// Create a main JSX element that contains a title and ul tag with list items
+const main = (
+    <main className="main-wrapper">
+        <p>Prerequisite to get started with{' '}
+        <strong>
+            <em>react.js:</em>
+        </strong>
+        </p>
+        <ul>{techsFormatted}</ul>
+    </main>
+    
+)
+
+// Create a footer that contains a p tag 
+const footer = (
+    <footer className="footer-wrapper">
+        <p>Copyright 2023</p>
+    </footer>
+)
+
+
+//EXERCISE CODE.........................................
+
+// Create a style object for the main JSX
+const myStyles = {
+    backgroundColor: 'lightcoral',
+    fontWeight: 'bold'
+}
+
+const footerStyles ={
+    backgroundColor: 'lightgrey',
+    fontSize: '20px'
+}
+
+// Write your name in a JSX element and store it in a name variable
+const myName = {
+    firstName:'Tom',
+    lastName: 'Hanks'
+}
+const exercise = (
+    <h1>Name: {myName.firstName} {myName.lastName}</h1>
+)
+
+// Write a JSX element which displays your full name, country, title, gender, 
+// email, phone number. Use h1 for the name and p for the rest of the information and store it in a user variable
+const person = {
+    fName: 'Jason',
+    lName: 'Gideon',
+    country: 'U.S.A',
+    title: 'Doctor',
+    gender: 'Male',
+    email: '123@cola.com',
+    number: '123-456-7890'
+}
+const personInfo = (
+    <div style={myStyles}>
+        <h1>Name: {person.fName} {person.lName}</h1>
+        <p>Country of origin: {person.country}</p>
+        <p>Profession: {person.title}</p>
+        <p>Gender: {person.gender}</p>
+        <p>Email: {person.email}</p>
+        <p>Phone Number: {person.number}</p>
+    </div>
+)
+
+// Write a footer JSX element
+const myFooter = (
+    <div style={footerStyles}>
+        <p>This is the exercise footer</p>
+    </div>
+)
+
+
+
+
+
+// Create parent JSX element to house all other elements
+const app = (
+    // use className instead of class with React
+    <div className="app"> 
+        {header}
+        {main}
+        {exercise}
+        {personInfo}
+        {myFooter}
+        {footer}
+    </div>
+)
+
+// Render JSX element using ReactDOM package
+// ReactDOM render method takes 2 args
+//  - React element 
+//  - Root element from HTML
+ReactDOM.render(app, rootElement);
--- a/solutions/day-02/studyNotes.md
+++ b/solutions/day-02/studyNotes.md
@ -0,0 +1,23 @@
+React is a JavaScript library for building a reusable user interface(UI).
+React is used to build single page applications - An application which has only one HTML page.
+
+
+1. Why React?
+- One of the most popular JavaScript libraries
+- It has the following:
+    - Fast
+    - modular
+    - scalable
+    - flexible
+    - big community/popular
+    - open source
+    - high job opportunity
+
+2. JSX
+- Stand for JavaScriptXML
+- Allows for writing HTML elements with JS code
+- JSX is converted to JS on browser using babel.js
+    - Babel is a library which transpiles JSX to pure JS,
+    - and latest JS to older JS
+- when using multiple HTML inside of a JSX element you need to wrap them in an outer HTML element
+    - meaning a div, or header or etc. 
--- a/solutions/studyNotes.md
+++ b/solutions/studyNotes.md