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