From 6d717dad65579612aa1cf2817328ba0d6115fce8 Mon Sep 17 00:00:00 2001 From: chaitanya Date: Sat, 8 Jul 2023 23:23:01 +0530 Subject: [PATCH] updated the version --- .../02_introduction_to_react.md | 362 +++++++++--------- 1 file changed, 181 insertions(+), 181 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..350fe6e 100644 --- a/02_Day_Introduction_to_React/02_introduction_to_react.md +++ b/02_Day_Introduction_to_React/02_introduction_to_react.md @@ -56,7 +56,7 @@ Once in a while you may need different dummy data to work with React. You can us ### 1. What is React? -React is a JavaScript library for building a reusable user interface(UI). It was initially released on May 29, 2013. The current version is 16.13.1 and somehow it is stable. React was created by Facebook. React makes creating UI components very easy. The official React documentation can be found [here](https://reactjs.org/docs/getting-started.html). When we work with React we do not interact directly with the DOM. React has its own way to handle the DOM(Document Object Model) manipulation. React uses its virtual DOM to make new changes and it updates only the element, that needs changing. Do not directly interact with DOM when you build a React Application and leave the DOM manipulation job for the React virtual DOM. In this challenge, we will develop 10-15 web applications using React. A web application, or a website, is made of buttons, links, forms with different input fields, header, footer, sections, articles, texts, images, audios, videos and boxes with different shapes. We use react to make a reusable UI components of a website. +React is a JavaScript library for building a reusable user interface(UI). It was initially released on May 29, 2013. The current version is 18.2.0 and somehow it is stable. React was created by Facebook. React makes creating UI components very easy. The official React documentation can be found [here](https://reactjs.org/docs/getting-started.html). When we work with React we do not interact directly with the DOM. React has its own way to handle the DOM(Document Object Model) manipulation. React uses its virtual DOM to make new changes and it updates only the element, that needs changing. Do not directly interact with DOM when you build a React Application and leave the DOM manipulation job for the React virtual DOM. In this challenge, we will develop 10-15 web applications using React. A web application, or a website, is made of buttons, links, forms with different input fields, header, footer, sections, articles, texts, images, audios, videos and boxes with different shapes. We use react to make a reusable UI components of a website. To summarize: @@ -65,7 +65,7 @@ To summarize: - React is a JavaScript library for building user interfaces - React is used to build single page applications - An application which has only one HTML page. - React allows us to create reusable UI components -- React latest release is 16.13.1 +- React latest release is 18.2.0 - [React versions](https://reactjs.org/versions/) - React official documentation can be found [here](https://reactjs.org/docs/getting-started.html) @@ -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,7 +247,7 @@ The babel library is linked to our document and now we can make use of it. The n > @@ -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