From a78a29f3f503ada66d810f8e1796092c3a8ba996 Mon Sep 17 00:00:00 2001 From: Jaspreet Date: Sun, 8 Jan 2023 02:36:57 -0600 Subject: [PATCH] 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 --- solutions/day-02/exercise_questions.js | 41 +++++++ solutions/day-02/index.html | 112 ++++++++++++++++++ solutions/day-02/index.jsx | 151 +++++++++++++++++++++++++ solutions/day-02/studyNotes.md | 23 ++++ solutions/studyNotes.md | 0 5 files changed, 327 insertions(+) create mode 100644 solutions/day-02/exercise_questions.js create mode 100644 solutions/day-02/index.html create mode 100644 solutions/day-02/index.jsx create mode 100644 solutions/day-02/studyNotes.md delete mode 100644 solutions/studyNotes.md diff --git a/solutions/day-02/exercise_questions.js b/solutions/day-02/exercise_questions.js new file mode 100644 index 0000000..621d6d2 --- /dev/null +++ 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? + // is an example + // 3. What is an HTML attribute? Write some of them? + // , or + // 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 diff --git a/solutions/day-02/index.html b/solutions/day-02/index.html new file mode 100644 index 0000000..95e5c1a --- /dev/null +++ b/solutions/day-02/index.html @@ -0,0 +1,112 @@ + + + + + + + + + + + 30 Days Of React Challenge + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/solutions/day-02/index.jsx b/solutions/day-02/index.jsx new file mode 100644 index 0000000..b4b477a --- /dev/null +++ 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 =

I am a JSX element

+ +// 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 = ( +
+

{welcome}

+

{title}

+

{subtitle}

+

Student: {author.firstName} {author.lastName}

+ Date: {date} +
+) + + +// 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
  • {element}
    • }); + +// Create a main JSX element that contains a title and ul tag with list items +const main = ( +
    +

    Prerequisite to get started with{' '} + + react.js: + +

    + +
    + +) + +// Create a footer that contains a p tag +const 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 = ( +

    Name: {myName.firstName} {myName.lastName}

    +) + +// 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 = ( +
    +

    Name: {person.fName} {person.lName}

    +

    Country of origin: {person.country}

    +

    Profession: {person.title}

    +

    Gender: {person.gender}

    +

    Email: {person.email}

    +

    Phone Number: {person.number}

    +
    +) + +// Write a footer JSX element +const myFooter = ( +
    +

    This is the exercise footer

    +
    +) + + + + + +// Create parent JSX element to house all other elements +const app = ( + // use className instead of class with React +
    + {header} + {main} + {exercise} + {personInfo} + {myFooter} + {footer} +
    +) + +// Render JSX element using ReactDOM package +// ReactDOM render method takes 2 args +// - React element +// - Root element from HTML +ReactDOM.render(app, rootElement); diff --git a/solutions/day-02/studyNotes.md b/solutions/day-02/studyNotes.md new file mode 100644 index 0000000..906dbcb --- /dev/null +++ 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. diff --git a/solutions/studyNotes.md b/solutions/studyNotes.md deleted file mode 100644 index e69de29..0000000