From a3e8c24088e31499abba1970e37000767cb3490a Mon Sep 17 00:00:00 2001 From: Pierre Date: Wed, 7 Dec 2022 15:49:38 +0100 Subject: [PATCH] Update information --- .../02_introduction_to_react.md | 360 +++++++++--------- 1 file changed, 180 insertions(+), 180 deletions(-) diff --git a/02_Day_Introduction_to_React/02_introduction_to_react.md b/02_Day_Introduction_to_React/02_introduction_to_react.md index f94fdb2..bc05d62 100644 --- a/02_Day_Introduction_to_React/02_introduction_to_react.md +++ b/02_Day_Introduction_to_React/02_introduction_to_react.md @@ -111,9 +111,9 @@ JSX stands for JavaScript XML. JSX allows us to write HTML elements with JavaScr // JSX syntax // we don't need to use quotes with JSX -const jsxElement =

I am a JSX element

-const welcome =

Welcome to 30 Days of React Challenge

-const data = Oct 2, 2020 +const jsxElement =

I am a JSX element

; +const welcome =

Welcome to 30 Days of React Challenge

; +const data = Oct 2, 2020; ``` The above strange looking code seems like JavaScript and it seems like , but it is not JavaScript and it seems like HTML but not completely an HTML element. It is a mix of JavaScript and an HTML elements. JSX can allow us to use HTML in JavaScript. The HTML element in the JSX above is _h1_ and _small_. @@ -125,13 +125,13 @@ As you have seen in the example above, JSX has a JavaScript and HTML like syntax This JSX element has only one HTML element which is _h1_. ```js -const jsxElement =

I am a JSX element

// JS with HTML +const jsxElement =

I am a JSX element

; // JS with HTML ``` Let's make more JSX elements by declaring a new variable named title and content inside _h2_. ```js -const title =

Getting Started React

+const title =

Getting Started React

; ``` Let us add a subtitles and other contents to this JSX element by adding additional HTML elements. Every HTML element should be wrapped by an outer HTML element to create a valid JSX element. The name title variable also should be changed to header because our JSX element is containing almost all of the header of the application. @@ -143,7 +143,7 @@ const header = (

Getting Started React

JavaScript Library

-) +); ``` Let us keep adding more elements. Additional HTML elements to display the author name and year. @@ -157,7 +157,7 @@ const header = (

Asabeneh Yetayeh

Oct 2, 2020 -) +); ``` As you can see the _header_ element is a parent element for all the inner HTML elements and JSX must be wrapped by an outer parent element. Without the _header_ HTML element or other parent HTML element the above JSX is invalid. @@ -247,13 +247,13 @@ The babel library is linked to our document and now we can make use of it. The n > ``` -Now the index.html has everything we need to write React code. Let us get the root element using document.querySelect('.root') and assign it to a variable name rootElement. The is the only place we directly interact with DOM. +Now the index.html has everything we need to write React code. Let us get the root element using document.querySelect('.root') and assign it to a variable name rootElement. This is the only place we directly interact with DOM. Now, you knew JSX and JSX element. Let us render the JSX element on the browser, in order to do so we need the React and ReactDOM library. In addition to the React and ReactDOM we need babel to transpile the JSX to JavaScript code. The ReactDOM package has a method render. The render method takes two arguments:a JSX element or a component and the root document. See the code below. [Live on code pen](https://codepen.io/Asabeneh/full/JjdbjqK). @@ -280,14 +280,14 @@ Now, you knew JSX and JSX element. Let us render the JSX element on the browser, @@ -321,7 +321,7 @@ Let us render more content. To render more content, the JSX element should have @@ -359,7 +359,7 @@ const main = (
  • JavaScript
    • -) +); ``` JSX element for the footer part of the website. @@ -370,7 +370,7 @@ const footer = ( -) +); ``` Now, we have three JSX elements: the header, main and footer. The best way to render all of the three JSX elements is by wrapping them all in a parent JSX element or putting them in an array. To include JSX element inside another JSX element we use the curly bracket, {} and call the name of the JSX inside the curly bracket. @@ -385,7 +385,7 @@ const header = (

    Asabeneh Yetayeh

    Oct 2, 2020 -) +); // JSX element for the main part of the website const main = ( @@ -397,14 +397,14 @@ const main = (
  • JavaScript
    • -) +); // JSX element for the footer part of the website const footer = ( -) +); // JSX element which contain all, it is a container or parent const app = ( @@ -413,7 +413,7 @@ const app = ( {main} {footer} -) +); ``` Now, let us put everything together and render it to the browser. [Live on code pen](https://codepen.io/Asabeneh/full/MWwbYWg). @@ -441,7 +441,7 @@ Now, let us put everything together and render it to the browser. [Live on code @@ -509,7 +509,7 @@ To add style to a JSX element we use inline style or className. We inject the st ```js const header = (

    Welcome to 30 Days Of React

    Getting Started React

    @@ -517,11 +517,11 @@ const header = (

    Asabeneh Yetayeh

    Oct 2, 2020
    -) +); // or we can write it this way -const style = { border: '2px solid orange', color: 'black', fontSize: '18px' } +const style = { border: "2px solid orange", color: "black", fontSize: "18px" }; const header = (
    @@ -531,7 +531,7 @@ const header = (

    Asabeneh Yetayeh

    Oct 2, 2020
    -) +); ``` It is good practice to open the browser console while you are developing your application to know, if everything goes well. @@ -541,13 +541,13 @@ Let us keep styling all the JSX elements we have created: the header, main and t In JSX element we write className instead of class because class is a reserved word in JavaScript. Similar to className, htmlFor instead of for in label tag. See the example below. ```js -const title =

    Getting Started React

    +const title =

    Getting Started React

    ; const inputField = (
    - - + +
    -) +); ``` The id used in the input element is not for styling purpose, instead to refer the label to the input field. @@ -581,20 +581,20 @@ Now, you know how to use the inline style and how to use className. Let us style @@ -673,7 +673,7 @@ Instead of style object using regular styling method is more easy than the one a body { height: 100%; line-height: 1.5; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 300; color: black; } @@ -756,12 +756,12 @@ Instead of style object using regular styling method is more easy than the one a @@ -823,17 +823,17 @@ Instead of style object using regular styling method is more easy than the one a So far, we used static data on the JSX elements, but we can also pass different data types as a dynamic data. The dynamic data could be string, number, boolean, array or object. Let us see each of the data types step by step. To inject data to a JSX we use the {} bracket. ```js -const welcome = 'Welcome to 30 Days Of React' -const title = 'Getting Started React' -const subtitle = 'JavaScript Library' -const authorFirstName = 'Asabeneh' -const authorLastName = 'Yetayeh' -const date = 'Oct 1, 2020' +const welcome = "Welcome to 30 Days Of React"; +const title = "Getting Started React"; +const subtitle = "JavaScript Library"; +const authorFirstName = "Asabeneh"; +const authorLastName = "Yetayeh"; +const date = "Oct 1, 2020"; // JSX element, header const header = (
    -
    +

    {welcome}

    {title}

    {subtitle}

    @@ -843,7 +843,7 @@ const header = ( Date: {date}
    -) +); ``` Similar to the header JSX element, we can implement data injection to main and footer JSX elements. @@ -853,19 +853,19 @@ Similar to the header JSX element, we can implement data injection to main and f In this section we inject only strings ```js -const welcome = 'Welcome to 30 Days Of React' -const title = 'Getting Started React' -const subtitle = 'JavaScript Library' -const firstName = 'Asabeneh' -const lastName = 'Yetayeh' -const date = 'Oct 2, 2020' +const welcome = "Welcome to 30 Days Of React"; +const title = "Getting Started React"; +const subtitle = "JavaScript Library"; +const firstName = "Asabeneh"; +const lastName = "Yetayeh"; +const date = "Oct 2, 2020"; // JSX element, header // JSX element, header const header = (
    -
    +

    {welcome}

    {title}

    {subtitle}

    @@ -875,25 +875,25 @@ const header = ( Date: {date}
    -) +); ``` ##### Injecting a number to a JSX Element ```js -const numOne = 3 -const numTwo = 2 +const numOne = 3; +const numTwo = 2; const result = (

    {numOne} + {numTwo} = {numOne + numTwo}

    -) +); -const yearBorn = 1820 -const currentYear = new Date().getFullYear() -const age = currentYear - yearBorn -const personAge =

    {age}

    +const yearBorn = 1820; +const currentYear = new Date().getFullYear(); +const age = currentYear - yearBorn; +const personAge =

    {age}

    ; ``` As you can see in the example above, it is possible to do some arithmetic calculations and ternary operations. @@ -903,14 +903,14 @@ As you can see in the example above, it is possible to do some arithmetic calcul To give an example for an array, let us change the HTML, CSS, JavaScript to an array and inject it to the main JSX element below. We will cover more in much detail later, in rendering lists section. ```js -const techs = ['HTML', 'CSS', 'JavaScript'] +const techs = ["HTML", "CSS", "JavaScript"]; // JSX element, main const main = (
    -
    +

    - Prerequisite to get started{' '} + Prerequisite to get started{" "} react.js @@ -919,7 +919,7 @@ const main = (

      {techs}
    -) +); ``` ##### Injecting an object to a JSX Element @@ -952,7 +952,7 @@ Now, let us put everything together. Here, in the example below, the data is inj body { height: 100%; line-height: 1.5; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 300; color: black; } @@ -1034,21 +1034,21 @@ Now, let us put everything together. Here, in the example below, the data is inj @@ -1132,8 +1132,8 @@ Now, let us put everything together. Here, in the example below, the data is inj As you can see the lists are all in one line. Therefore, we should format the list the way we want, before we inject it to JSX. In order to format the list, we should modify the array before we will inject it to JSX. We can modify the array using _map_. As a react developer you should have a very good understanding of functional programming(map, filter, reduce, find, some, every). If you don't have good understanding of functional programming, check out day 1. ```js -const techs = ['HTML', 'CSS', 'JavaScript'] -const techsFormatted = techs.map((tech) =>
  • {tech}
    • ) +const techs = ["HTML", "CSS", "JavaScript"]; +const techsFormatted = techs.map((tech) =>
  • {tech}
    • ); ``` In the following code example, the list is now containing list elements and it is formatted properly. @@ -1162,7 +1162,7 @@ In the following code example, the list is now containing list elements and it i body { height: 100%; line-height: 1.5; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 300; color: black; } @@ -1244,21 +1244,21 @@ In the following code example, the list is now containing list elements and it i @@ -1367,7 +1367,7 @@ As you can see above, now the lists are formatted properly, but there is a warni body { height: 100%; line-height: 1.5; - font-family: 'Montserrat'; + font-family: "Montserrat"; font-weight: 300; color: black; } @@ -1450,21 +1450,21 @@ As you can see above, now the lists are formatted properly, but there is a warni