From 3b0292a38d27ff744d2612d42274f4fad9c00a63 Mon Sep 17 00:00:00 2001 From: Asabeneh Date: Fri, 2 Oct 2020 17:20:06 +0300 Subject: [PATCH] content added to day 2 --- .../02_introduction_to_react.md | 747 +++++++++++++++++- readMe.md | 4 +- 2 files changed, 748 insertions(+), 3 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 91187c5..960bbf5 100644 --- a/02_Day_Introduction_to_React/02_introduction_to_react.md +++ b/02_Day_Introduction_to_React/02_introduction_to_react.md @@ -29,6 +29,11 @@ - [Commenting JSX element](#commenting-jsx-element) - [Rendering JSX Element](#rendering-jsx-element) - [Style and className in JSX](#style-and-classname-in-jsx) + - [Injecting data to JSX Element](#injecting-data-to-jsx-element) + - [Injecting a string to JSX Element](#injecting-a-string-to-jsx-element) + - [Injecting a number to JSX Element](#injecting-a-number-to-jsx-element) + - [Injecting an array to JSX Element](#injecting-an-array-to-jsx-element) + - [Injecting an object to JSX Element](#injecting-an-object-to-jsx-element) - [Exercises](#exercises) - [Exercises: What is React?](#exercises-what-is-react) - [Exercises: Why React?](#exercises-why-react) @@ -36,6 +41,7 @@ - [Exercises: JSX Elements](#exercises-jsx-elements) - [Exercises: Inline Style](#exercises-inline-style) - [Exercises: Internal Styles](#exercises-internal-styles) + - [Exercise: Inject data to JSX](#exercise-inject-data-to-jsx) ## Getting Started React @@ -45,7 +51,7 @@ Prerequisite to get started with React. You should have a good understanding of - CSS - JavaScript -If you have the above skills you will enjoy doing React. React for Everyone contains anything you need to know about react. In every section, it has some exercises and mini-projects and it is recommended to work on them. This 30 Days Of React challenge will help you learn the latest version of React and the old version step by step. The topics are broken down into 30 days, where each day contains several topics with easy-to-understand explanations, real-world examples and many hands on exercises. +If you have the above skills you will enjoy doing React. The 30 Days Of React challenge contains anything you need to know about react. In every section, it has some exercises and mini-projects and it is recommended to work on them. This 30 Days Of React challenge will help you learn the latest version of React and the old version step by step. The topics are broken down into 30 days, where each day contains several topics with easy-to-understand explanations, real-world examples and many hands on exercises. This challenge is designed for beginners and professionals who want to build a web application using React and JavaScript. ### 1. What is React? @@ -813,6 +819,741 @@ Instead of style object using regular styling method is more easier than the abo ![Internal Style](../images/internal_style.png) +#### Injecting data to JSX Element + +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' + +// JSX element, header +const header = ( +
+
+

{welcome}

+

{title}

+

{subtitle}

+

+ Instructor: {authorFirstName} {authorLastName} +

+ Date: {date} +
+
+) +``` + +Similar to the header JSX element we can implement to main and footer JSX element. + +##### Injecting a string to JSX Element + +In this section we only inject only strings + +```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 2, 2020' + +// JSX element, header + +// JSX element, header +const header = ( +
+
+

{welcome}

+

{title}

+

{subtitle}

+

+ Instructor: {authorFirstName} {authorLastName} +

+ Date: {date} +
+
+) +``` + +#### Injecting a number to JSX Element + +```js +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}

+``` + +As you can see in the above example, it is possible to do some arithmetic calculation and ternary operations. + +##### Injecting an array to JSX Element + +To give example for an array, let us change the HTML, CSS, JavaScript an array and inject it to the main JSX element below. We will cover in much detail in rendering lists section. + +```js +const techs = ['HTML', 'CSS', 'JavaScript'] + +// JSX element, main +const main = ( +
+
+

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

+
    {techs}
+
+
+) +``` + +##### Injecting an object to JSX Element + +We can inject string, number, boolean, array data to JSX but we can not directly inject object. We should extract object values first or destructure the content of the object before we inject to the JSX element. For instance, let us write firstName and lastName inside an object and extract them out to use them inside JSX. + +Now, let us put everything together. Here in the example below, the data is injected dynamically to the JSX. [Live on code pen](https://codepen.io/Asabeneh/full/YzXWgpZ) + +```html + + + + + + + + React For Everyone + + + + +
+ + + + + + + +``` + +![Dynamic Data](images/dynamic_data.png) + +As you can see the lists are all in one line. Therefore, we should format the list the way we want before we inject to JSX. In order to format the list we should modify the array before we will inject 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}
    • ) +``` + +In the following code example, the list is now containing list elements and formatted properly. + +```html + + + + + + + + React For Everyone + + + + +
    + + + + + + + +``` + +Rendering list + +![List Id](images/map_list_id.png) +As you can see above, now the lists are formatted properly but there is warning on the console which says each list child should have a unique key. In the array, we do not have id but it is common to pass id as a unique value when you have id in your data. Now, let us just pass each items as a unique key and remove the warning. + +```html + + + + + + + + React For Everyone + + + + +
    + + + + + + + +``` + +![Removing warning ](images/removing_unique_id_warning.png) + +Now, you have a very good understanding of how to create JSX element and also how to inject data to JSX. In the next section, we will talk about component which are more powerful and useful than JSX. + ๐ŸŒ• You are awesome. You have just completed day 2 challenges and you are two steps ahead on your way to greatness. Now do some exercises for your brain and for your muscle. ### Exercises @@ -860,6 +1601,10 @@ Instead of style object using regular styling method is more easier than the abo 1. Apply different styles to your JSX elements +#### Exercise: Inject data to JSX + +1. Practice how to make JSX element and injecting dynamic data(string, number, boolean, array, object) + ๐ŸŽ‰ CONGRATULATIONS ! ๐ŸŽ‰ [<< Day 1](../readMe.md) | [Day 3 >>](../03_Day_Setting_Up/03_day_setting_up.md) diff --git a/readMe.md b/readMe.md index 2e15f67..0a7a3e6 100644 --- a/readMe.md +++ b/readMe.md @@ -6,7 +6,7 @@ | ----- | :-----------------------------------------------------------------------------------------------------------------------------------: | | 01 | [Introduction](#introduction)
    [Requirements](#requirements)
    [Setup](#setup)
    [JavaScript Refresher](#javascript-refresher) | | 02 | [Getting Started React](./02_Day_Introduction_to_React/02_introduction_to_react.md) | -| 02 | [Setting Up](./03_Setting_Up/03_Setting_Up.md) | +| 02 | [Setting Up](./03_Setting_Up/03_setting_up.md) | ๐Ÿงก๐Ÿงก๐Ÿงก HAPPY CODING ๐Ÿงก๐Ÿงก๐Ÿงก @@ -294,7 +294,7 @@ console.log('Hello, World!') ##### Console.log with Multiple Arguments -The **conole.log()** function can take multiple parameters separated by comma. The syntax looks like as follows:**console.log(param1, param2, param3)** +The **console.log()** function can take multiple parameters separated by comma. The syntax looks like as follows:**console.log(param1, param2, param3)** ![console log multiple arguments](./images/console_log_multipl_arguments.png)