├── .gitignore
├── first-react-app
    ├── .gitignore
    ├── README.md
    ├── package.json
    ├── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │   │   ├── Footer.js
    │   │   ├── Header.js
    │   │   └── Main.js
    │   ├── index.js
    │   └── react-logo.png
    └── yarn.lock
├── images
    ├── become_patreon.png
    ├── className_warning.png
    ├── cleaned_launched.png
    ├── components.png
    ├── create_react_app_file_cleaned.png
    ├── create_react_app_files.png
    ├── dynamic_data.png
    ├── first_react_app.png
    ├── internal_style.png
    ├── map_list_id.png
    ├── react_for_everyone.png
    ├── react_logo.gif
    ├── react_popularity.png
    ├── removing_unique_id_warning.png
    ├── rendering_componnets.png
    ├── rendering_jsx.png
    ├── rendering_list.png
    ├── rendering_more_content.png
    ├── rendering_multiple_js_elements.png
    ├── styling_all_jsx_elements.png
    ├── styling_jsx_element.png
    └── vue_popularity.png
├── react-starter
    ├── .gitignore
    ├── README.md
    ├── package.json
    ├── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │   │   └── Header.js
    │   ├── index.css
    │   └── index.js
    └── yarn.lock
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .index.html
 3 | index.html
 4 | res.html
 5 | .res.html
 6 | component.html
 7 | props.html
 8 | prop-types.html
 9 | destructuring.html
10 | class-component.html
11 | container.html
12 | rendering-list.html
13 | container-component.html
14 | props-in-class-components.html
15 | first-react-app/node_modules
16 | playground
17 | /playground
18 | 


--------------------------------------------------------------------------------
/first-react-app/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/first-react-app/README.md:
--------------------------------------------------------------------------------
 1 | # First React App
 2 | 
 3 | ## To star the application
 4 | 
 5 | `yarn start`
 6 | 
 7 | Runs the app in the development mode.<br />
 8 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 9 | 
10 | The page will reload if you make edits.<br />
11 | You will also see any lint errors in the console.
12 | 


--------------------------------------------------------------------------------
/first-react-app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "first-react-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "react": "^16.12.0",
10 |     "react-dom": "^16.12.0",
11 |     "react-scripts": "3.4.0"
12 |   },
13 |   "scripts": {
14 |     "start": "react-scripts start",
15 |     "build": "react-scripts build",
16 |     "test": "react-scripts test",
17 |     "eject": "react-scripts eject"
18 |   },
19 |   "eslintConfig": {
20 |     "extends": "react-app"
21 |   },
22 |   "browserslist": {
23 |     "production": [
24 |       ">0.2%",
25 |       "not dead",
26 |       "not op_mini all"
27 |     ],
28 |     "development": [
29 |       "last 1 chrome version",
30 |       "last 1 firefox version",
31 |       "last 1 safari version"
32 |     ]
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/first-react-app/src/App.css:
--------------------------------------------------------------------------------
 1 |  /* == General style === */
 2 |  * {
 3 |    box-sizing: border-box;
 4 |    padding: 0;
 5 |    margin: 0;
 6 |  }
 7 | 
 8 |  html,
 9 |  body {
10 |    height: 100%;
11 |    line-height: 1.5;
12 |    font-family: 'Montserrat';
13 |    font-weight: 300;
14 |    color: black;
15 |  }
16 | 
17 |  .root {
18 |    min-height: 100%;
19 |    position: relative;
20 |  }
21 | 
22 |  .header-wrapper,
23 |  .main-wrapper,
24 |  .footer-wrapper {
25 |    width: 85%;
26 |    margin: auto;
27 |  }
28 | 
29 |  .header-wrapper,
30 |  .main-wrapper {
31 |    padding: 10px;
32 |    margin: 2px auto;
33 |  }
34 | 
35 |  h1 {
36 |    font-size: 70px;
37 |    font-weight: 300;
38 |  }
39 | 
40 |  h2,
41 |  h3 {
42 |    font-weight: 300;
43 |  }
44 | 
45 |  header {
46 |    background-color: #61dbfb;
47 |    padding: 25;
48 |    padding: 10px;
49 |  }
50 | 
51 |  main {
52 |    padding: 10px;
53 |    padding-bottom: 60px;
54 |    /* Height of the footer */
55 |  }
56 | 
57 |  ul {
58 |    margin-left: 15px;
59 |  }
60 | 
61 |  ul li {
62 |    list-style: none;
63 |  }
64 | 
65 |  footer {
66 |    position: absolute;
67 |    bottom: 0;
68 |    width: 100%;
69 |    height: 60px;
70 |    /* Height of the footer */
71 |    background: #6cf;
72 |  }
73 | 
74 |  .footer-wrapper {
75 |    font-weight: 400;
76 |    text-align: center;
77 |    line-height: 60px;
78 |  }


--------------------------------------------------------------------------------
/first-react-app/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Header from './components/Header'
 3 | import Main from './components/Main'
 4 | import Footer from './components/Footer'
 5 | import './App.css'
 6 | 
 7 | class App extends Component {
 8 |   render() {
 9 |     const title = 'Getting Started React'
10 |     const subtitle = 'JavaScript library'
11 |     const author = {
12 |       firstName: 'Asabeneh',
13 |       lastName: 'Yetayeh'
14 |     }
15 |     const date = 'Date: Feb 20, 2020'
16 |     const techs = ['HTML', 'CSS', 'JavaScript']
17 |     const copyRight = new Date().getFullYear()
18 | 
19 |     return (
20 |       <div className='app'>
21 |         <Header title={title} subtitle={subtitle} author={author} date={date} />
22 |         <Main techs={techs} />
23 |         <Footer copyRight={copyRight} />
24 |       </div>
25 |     )
26 |   }
27 | }
28 | 
29 | export default App
30 | 


--------------------------------------------------------------------------------
/first-react-app/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | const Footer = ({ copyRight }) => (
 4 |   <footer>
 5 |     <div className='footer-wrapper'>
 6 |       <p>Copyright {copyRight}</p>
 7 |     </div>
 8 |   </footer>
 9 | )
10 | 
11 | export default Footer
12 | 


--------------------------------------------------------------------------------
/first-react-app/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | 
 4 | const Header = ({ title, subtitle, author, date }) => {
 5 |   return (
 6 |     <header>
 7 |       <div className='header-wrapper'>
 8 |         <h1>{title}</h1>
 9 |         <h2>{subtitle}</h2>
10 |         <p>
11 |           Instructor:{author.firstName} {author.lastName}
12 |         </p>
13 |         <p>{date}</p>
14 |       </div>
15 |     </header>
16 |   )
17 | }
18 | 
19 | export default Header
20 | 


--------------------------------------------------------------------------------
/first-react-app/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import reactLogo from '../react-logo.png'
 3 | 
 4 | const Main = ({ techs }) => {
 5 |   const techsList = techs.map(tech => <li key={'key-' + tech}>{tech}</li>)
 6 |   return (
 7 |     <main>
 8 |       <div className='main-wrapper'>
 9 |         <img src={reactLogo} alt='React Logo' />
10 |         <p>Prerequisite to get started React</p>
11 |         <ul>{techsList}</ul>
12 |       </div>
13 |     </main>
14 |   )
15 | }
16 | 
17 | export default Main
18 | 


--------------------------------------------------------------------------------
/first-react-app/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 | 
5 | ReactDOM.render(<App />, document.querySelector('.root'))
6 | 


--------------------------------------------------------------------------------
/first-react-app/src/react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/first-react-app/src/react-logo.png


--------------------------------------------------------------------------------
/images/become_patreon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/become_patreon.png


--------------------------------------------------------------------------------
/images/className_warning.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/className_warning.png


--------------------------------------------------------------------------------
/images/cleaned_launched.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/cleaned_launched.png


--------------------------------------------------------------------------------
/images/components.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/components.png


--------------------------------------------------------------------------------
/images/create_react_app_file_cleaned.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/create_react_app_file_cleaned.png


--------------------------------------------------------------------------------
/images/create_react_app_files.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/create_react_app_files.png


--------------------------------------------------------------------------------
/images/dynamic_data.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/dynamic_data.png


--------------------------------------------------------------------------------
/images/first_react_app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/first_react_app.png


--------------------------------------------------------------------------------
/images/internal_style.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/internal_style.png


--------------------------------------------------------------------------------
/images/map_list_id.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/map_list_id.png


--------------------------------------------------------------------------------
/images/react_for_everyone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/react_for_everyone.png


--------------------------------------------------------------------------------
/images/react_logo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/react_logo.gif


--------------------------------------------------------------------------------
/images/react_popularity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/react_popularity.png


--------------------------------------------------------------------------------
/images/removing_unique_id_warning.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/removing_unique_id_warning.png


--------------------------------------------------------------------------------
/images/rendering_componnets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/rendering_componnets.png


--------------------------------------------------------------------------------
/images/rendering_jsx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/rendering_jsx.png


--------------------------------------------------------------------------------
/images/rendering_list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/rendering_list.png


--------------------------------------------------------------------------------
/images/rendering_more_content.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/rendering_more_content.png


--------------------------------------------------------------------------------
/images/rendering_multiple_js_elements.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/rendering_multiple_js_elements.png


--------------------------------------------------------------------------------
/images/styling_all_jsx_elements.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/styling_all_jsx_elements.png


--------------------------------------------------------------------------------
/images/styling_jsx_element.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/styling_jsx_element.png


--------------------------------------------------------------------------------
/images/vue_popularity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Asabeneh/React-For-Everyone/ba6bb4cfb39167527f177913ab6ec58c74b4a594/images/vue_popularity.png


--------------------------------------------------------------------------------
/react-starter/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/react-starter/README.md:
--------------------------------------------------------------------------------
 1 | # React Starter
 2 | 
 3 | ## To star the application
 4 | 
 5 | `yarn start`
 6 | 
 7 | Runs the app in the development mode.<br />
 8 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 9 | 
10 | The page will reload if you make edits.<br />
11 | You will also see any lint errors in the console.
12 | 


--------------------------------------------------------------------------------
/react-starter/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "first-react-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "node-sass": "^4.13.1",
10 |     "react": "^16.12.0",
11 |     "react-dom": "^16.12.0",
12 |     "react-scripts": "3.4.0"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/react-starter/src/App.css:
--------------------------------------------------------------------------------
 1 |  .App {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   justify-content: center;
 5 |   align-items: center;
 6 |   text-align: center;
 7 |   height: 100vh;
 8 |   font-size: 5vw;
 9 |   color: #61DBFB;
10 |   background: #323330;
11 | 
12 | } 


--------------------------------------------------------------------------------
/react-starter/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './App.css'
 3 | import Header from './components/Header'
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div className='App'>
 8 |       <Header />
 9 |     </div>
10 |   )
11 | }
12 | 
13 | export default App
14 | 


--------------------------------------------------------------------------------
/react-starter/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | const Header = ({ title, subtitle, author, date }) => {
 4 |   return (
 5 |     <header>
 6 |       <div className='header-wrapper'>
 7 |         <h1>React for Everyone</h1>
 8 |       </div>
 9 |     </header>
10 |   )
11 | }
12 | 
13 | export default Header
14 | 


--------------------------------------------------------------------------------
/react-starter/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/react-starter/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | 
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'));
8 | 
9 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
   1 | 
   2 | ![React banner](images/react_for_everyone.png)
   3 | <div>
   4 | 
   5 | <small>Support [**Asabeneh**](https://www.patreon.com/asabeneh?fan_landing=true) to create more educational materials</small>  
   6 | [<img src = './images/become_patreon.png' alt='become-asabeneh-patreon' title='click' />](https://www.patreon.com/asabeneh?fan_landing=true) 
   7 | </div>
   8 | 
   9 | - [Introduction](#introduction)
  10 | - [1. What is React ?](#1-what-is-react-)
  11 |   - [Exercises](#exercises)
  12 | - [2. Why React ?](#2-why-react-)
  13 |   - [Exercises: React](#exercises-react)
  14 | - [3. JSX](#3-jsx)
  15 |   - [Exercises](#exercises-1)
  16 | - [JSX Element](#jsx-element)
  17 |   - [Exercises:JSX](#exercisesjsx)
  18 | - [Rendering JSX Element](#rendering-jsx-element)
  19 | - [Style and className](#style-and-classname)
  20 |   - [Exercises - Inline Style](#exercises---inline-style)
  21 |   - [Exercises - Internal Styles](#exercises---internal-styles)
  22 | - [Injecting data to JSX Element](#injecting-data-to-jsx-element)
  23 |   - [Injecting a string to JSX Element](#injecting-a-string-to-jsx-element)
  24 |   - [Injecting a number to JSX Element](#injecting-a-number-to-jsx-element)
  25 |   - [Injecting an array to JSX Element](#injecting-an-array-to-jsx-element)
  26 |   - [Injecting an object to JSX Element](#injecting-an-object-to-jsx-element)
  27 |   - [Exercise: Inject data to JSX](#exercise-inject-data-to-jsx)
  28 | - [Component](#component)
  29 | - [Rendering components](#rendering-components)
  30 |   - [Class Components](#class-components)
  31 | - [Props](#props)
  32 |   - [Props in Functional Component](#props-in-functional-component)
  33 |     - [propTypes](#proptypes)
  34 |     - [defaultProps](#defaultprops)
  35 |     - [Destructuring props](#destructuring-props)
  36 |   - [Props in Class Components](#props-in-class-components)
  37 |   - [Rendering lists](#rendering-lists)
  38 | - [Creating a react project](#creating-a-react-project)
  39 | - [Events](#events)
  40 | - [State](#state)
  41 | - [Controlled input](#controlled-input)
  42 | - [Forms](#forms)
  43 | - [Container and Presentation component](#container-and-presentation-component)
  44 | - [Controlled and uncontrolled inputs](#controlled-and-uncontrolled-inputs)
  45 | - [Conditional Rendering](#conditional-rendering)
  46 |   - [Using if condition](#using-if-condition)
  47 |   - [Using ternary operators](#using-ternary-operators)
  48 |   - [Using and operator](#using-and-operator)
  49 | - [Component Life cycles](#component-life-cycles)
  50 | - [React Router](#react-router)
  51 | - [React Hooks](#react-hooks)
  52 | 
  53 | ## Introduction
  54 | 
  55 | Prerequisite to get started with React. You should have a good understanding of the following technologies:
  56 | 
  57 | - HTML
  58 | - CSS
  59 | - JavaScript
  60 | 
  61 | If you have the above skills you will enjoy doing react.
  62 | React for Everyone contains anything you need to know about react. In every section, it has some exercise and mini-projects and it is recommended to work them.
  63 | 
  64 | ## 1. What is React ?
  65 | 
  66 | React is a JavaScript library for building user interfaces. It was initially released on May 29, 2013. The current version is 16.12.0 and somehow it is stable. React was created by Facebook. It is a tool for building UI components. 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 which is the virtual DOM. Do not directly interact with DOM when you build react application leave that job for the virtual DOM.
  67 | 
  68 | To summarize:
  69 | 
  70 | - React was released in May 2013
  71 | - React was created by Facebook
  72 | - React is a JavaScript library for building user interfaces
  73 | - React is used to build single page applications- An application which has only one HTML page.
  74 | - React allows us to create reusable UI components
  75 | - React latest release is 16.12.0
  76 | 
  77 | ### Exercises
  78 | 
  79 | 1. What is React?
  80 | 2. What is a library ?
  81 | 3. What is single page application ?
  82 | 4. What is component ?
  83 | 5. What is the latest version of react ?
  84 | 6. What is DOM ?
  85 | 
  86 | ## 2. Why React ?
  87 | 
  88 | React is one of the most popular JavaScript library. Many developers and companies have been using it for the last couple of years. Its popularity has been growing fast and it has a huge community. How do we measure popularity? One measure of could be github, let us compare the popularity of [react](https://github.com/facebook/react) and [vue](https://github.com/vuejs/vue). As of today, the popularity between the two most popular JavaScript looks like as follows. From the diagram you can tell yourself which is more popular, I will leave this for you.
  89 | 
  90 | React Official Github Repository
  91 | 
  92 | ![React Populary](images/react_popularity.png) 
  93 | 
  94 | Vue Official Github Repository
  95 | 
  96 | ![Vue Popularity](images/vue_popularity.png)
  97 | 
  98 | Why we choose to use react ? We use react because of the following reasons:
  99 | 
 100 | - fast
 101 | - modular
 102 | - scalable
 103 | - flexible
 104 | - big community and popular
 105 | - open source
 106 | 
 107 | ### Exercises: React
 108 | 
 109 | 1. Why you chose to use react?
 110 | 2. How measures do you use to know popularity ?
 111 | 3. What is more popular, react or vue ?
 112 | 
 113 | ## 3. JSX
 114 | 
 115 | JSX stands for JavaScript XML. JSX allows us to write HTML elements with JavaScript code. An HTML element has an opening and closing tag, content, and attribute in the opening tag. However, some HTML tag may not have a content and a closing tag, they are self closing elements. To create HTML elements in React we do not use the _createElement()_ instead we just use JSX elements. Therefore, JSX makes it easier to write and add HTML elements in React. JSX will be converted to JavaScript on browser using transpiler which [babel.js](https://babeljs.io/). Babeb is a library which transpile JSX to pure JavaScript and latest JavaScript to older version.  See the JSX code below.
 116 | 
 117 | ```js
 118 | const jsxElement = <h1>I am a JSX element</h1>
 119 | ```
 120 | 
 121 | The above strange looking code seems a JavaScrip but it is not JavaScript and it seems an HTML but not completely an HTML element. It is a mix of JavaScript and and an HTML element. JSX can allow us to use HTML in JavaScript. The HTML element in the above JSX is h1.
 122 | 
 123 | ### Exercises
 124 | 
 125 | 1. What is an HTML element ?
 126 | 2. Write a self closing elements ?
 127 | 3. What is HTML attribute, write some HTML attributes
 128 | 4. What is JSX ?
 129 | 5. What is babel ?
 130 | 6. What is a transpiler?
 131 |   
 132 | ## JSX Element
 133 | 
 134 | As you have seen in the above example, JSX has a JavaScript and HTML like syntax. JSX element could be a single HTML element or many HTML elements wrapped in a parent HTML element.
 135 | 
 136 | This JSX element has only on HTML element which is h1.
 137 | 
 138 | ```js
 139 | const jsxElement = <h1>I am a JSX element</h1>
 140 | ```
 141 | 
 142 | Let's make more JSX elements by declaring a new variable name title and content inside h1.
 143 | 
 144 | ```js
 145 | const title = <h1>Getting Started React</h1>
 146 | ```
 147 | 
 148 | Let us add a subtitle to the above JSX element by adding additional HTML element. 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 the header of the application.
 149 | 
 150 | ```js
 151 | const header = (
 152 |   <header>
 153 |     <h1>Getting Started React</h1>
 154 |     <h2>JavaScript Library</h2>
 155 |   </header>
 156 | )
 157 | ```
 158 | 
 159 | Let us keep adding more elements. Additional HTML element to display the author name and year.
 160 | 
 161 | ```js
 162 | const header = (
 163 |   <header>
 164 |     <h1>Getting Started React</h1>
 165 |     <h2>JavaScript Library</h2>
 166 |     <h3>Asabeneh Yetayeh</h3>
 167 |     <p>Feb 10, 2020</p>
 168 |   </header>
 169 | )
 170 | ```
 171 | 
 172 | 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.
 173 | 
 174 | ### Exercises:JSX
 175 | 
 176 | 1. What is JSX element
 177 | 2. Write you name in JSX element and store it in a name variable
 178 | 3. 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.
 179 | 4. Write a footer JSX element
 180 |   
 181 | ## Rendering JSX Element
 182 | 
 183 | To render a JSX element to HTML document. We should create on index HTML. The index.html is the only HTML file you will have in any react application. That is why every react application is a single page application. Let us create an index.html file.
 184 | 
 185 | ```html
 186 | <!DOCTYPE html>
 187 | <html lang="en">
 188 |   <head>
 189 |     <meta charset="UTF-8" />
 190 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 191 |     <title>React For Everyone</title>
 192 |   </head>
 193 | 
 194 |   <body>
 195 |     <div class="root"></div>
 196 | 
 197 |     <script>
 198 |   
 199 |     </script>
 200 |   </body>
 201 | </html>
 202 | ```
 203 | 
 204 | As you can see from the above index.html, we have one div with a class root and script. The root div is the get way to connect all react component to the index.html. In the script tag, we will write our JavaScript but the script type will be babel. Babel will transpile the react JSX to pure JavaScript on the browser. Let us add babel to the script. Inside the babel, we can write any pure JavaScript, JSX and in general react code.
 205 | 
 206 | ```html
 207 | <!DOCTYPE html>
 208 | <html lang="en">
 209 |   <head>
 210 |     <meta charset="UTF-8" />
 211 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 212 |     <title>React For Everyone</title>
 213 |   </head>
 214 | 
 215 |   <body>
 216 |     <div class="root"></div>
 217 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 218 |     <script type="text/babel">
 219 |    // our code goes here
 220 |     </script>
 221 |   </body>
 222 | </html>
 223 | ```
 224 | 
 225 | The babel library is linked to our document and now we can make use of it. The next step is importing React and ReactDOM using CDN or link.  Attach the react and react-dom to your file. To test if react is connected to the index.html try to check by doing console.log(React). If you see an object containing react methods then you are connected to react.
 226 | 
 227 | ```html
 228 | <!DOCTYPE html>
 229 | <html lang="en">
 230 |   <head>
 231 |     <meta charset="UTF-8" />
 232 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 233 |     <title>React For Everyone</title>
 234 |   </head>
 235 | 
 236 |   <body>
 237 |     <div class="root"></div>
 238 | 
 239 |     <script
 240 |       crossorigin
 241 |       src="https://unpkg.com/react@16/umd/react.development.js"
 242 |     ></script>
 243 |     <script
 244 |       crossorigin
 245 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
 246 |     ></script>
 247 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 248 |     <script type="text/babel">
 249 |       console.log(React)
 250 |     </script>
 251 |   </body>
 252 | </html>
 253 | ```
 254 | 
 255 | 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 variable name rootElement. The is the only place we directly interact with DOM.
 256 | 
 257 | 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).
 258 | 
 259 | ```html
 260 | <!DOCTYPE html>
 261 | <html lang="en">
 262 |   <head>
 263 |     <meta charset="UTF-8" />
 264 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 265 |     <title>React For Everyone</title>
 266 |   </head>
 267 | 
 268 |   <body>
 269 |     <div class="root"></div>
 270 | 
 271 |     <script
 272 |       crossorigin
 273 |       src="https://unpkg.com/react@16/umd/react.development.js"
 274 |     ></script>
 275 |     <script
 276 |       crossorigin
 277 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
 278 |     ></script>
 279 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 280 |     <script type="text/babel">
 281 |       // To get the root element from the HTML document
 282 |       const rootElement = document.querySelector('.root')
 283 | 
 284 |       // JSX element
 285 |       const jsxElement = <h1>I am a JSX element</h1>
 286 | 
 287 |       // we render the JSX element using the ReactDOM package
 288 |       // ReactDOM has the render method and the render method takes two argument
 289 |       ReactDOM.render(jsxElement, rootElement)
 290 |     </script>
 291 |   </body>
 292 | </html>
 293 | ```
 294 | 
 295 | ![Rendering JSX](images/rendering_jsx.png)
 296 | 
 297 | Let us render more content. To render more content the JSX element should have more HTML elements. For instance, we can create a header of a website and header may have a title, subtitle, author or date etc.
 298 | [Live on code pen](https://codepen.io/Asabeneh/full/QWbGWeY).
 299 | 
 300 | ```html
 301 | <!DOCTYPE html>
 302 | <html lang="en">
 303 |   <head>
 304 |     <meta charset="UTF-8" />
 305 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 306 |     <title>React For Everyone</title>
 307 |   </head>
 308 | 
 309 |   <body>
 310 |     <div class="root"></div>
 311 | 
 312 |     <script
 313 |       crossorigin
 314 |       src="https://unpkg.com/react@16/umd/react.development.js"
 315 |     ></script>
 316 |     <script
 317 |       crossorigin
 318 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
 319 |     ></script>
 320 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 321 |     <script type="text/babel">
 322 |       // To get the root element from the HTML document
 323 |       const rootElement = document.querySelector('.root')
 324 | 
 325 |       // JSX element
 326 |       const header = (
 327 |         <header>
 328 |           <h1>Getting Started React</h1>
 329 |           <h2>JavaScript Library</h2>
 330 |           <p>Asabeneh Yetayeh</p>
 331 |           <p>Feb 10, 2020</p>
 332 |         </header>
 333 |       )
 334 | 
 335 |       // we render the JSX element using the ReactDOM package
 336 |       // ReactDOM has the render method and the render method takes two argument
 337 |       ReactDOM.render(header, rootElement)
 338 |     </script>
 339 |   </body>
 340 | </html>
 341 | ```
 342 | 
 343 | ![Rendering more content](images/rendering_more_content.png)
 344 | 
 345 | We have created a JSX element for the header of the website. How about the main and the footer for the website? Similar to the header, let us create a JSX element for the main and the footer.
 346 | 
 347 | JSX element for the main part of the website.
 348 | 
 349 | ```js
 350 | // JSX element
 351 | const main = (
 352 |   <main>
 353 |     <p>Prerequisite to get started react.js:</p>
 354 |     <ul>
 355 |       <li>HTML</li>
 356 |       <li>CSS</li>
 357 |       <li>JavaScript</li>
 358 |     </ul>
 359 |   </main>
 360 | )
 361 | ```
 362 | 
 363 | JSX element for the footer part of the website.
 364 | 
 365 | ```js
 366 | // JSX element
 367 | const footer = (
 368 |   <footer>
 369 |     <p>Copyright 2020</p>
 370 |   </footer>
 371 | )
 372 | ```
 373 | 
 374 | Now, we have three JSX elements:the header, main and footer. The best way to render all the three JSX elements is by wrapping them all in a parent JSX element. To include JSX element inside another JSX element we use the curly bracket, {} and call the name of the JSX inside the curly bracket.
 375 | 
 376 | ```js
 377 | // JSX element for the header part of the website
 378 | const header = (
 379 |   <header>
 380 |     <h1>Getting Started React</h1>
 381 |     <h2>JavaScript Library</h2>
 382 |     <p>Asabeneh Yetayeh</p>
 383 |     <p>Feb 10, 2020</p>
 384 |   </header>
 385 | )
 386 | 
 387 | // JSX element for the main part of the website
 388 | const main = (
 389 |   <main>
 390 |     <p>Prerequisite to get started react.js:</p>
 391 |     <ul>
 392 |       <li>HTML</li>
 393 |       <li>CSS</li>
 394 |       <li>JavaScript</li>
 395 |     </ul>
 396 |   </main>
 397 | )
 398 | 
 399 | // JSX element for the footer part of the website
 400 | const footer = (
 401 |   <footer>
 402 |     <p>Copyright 2020</p>
 403 |   </footer>
 404 | )
 405 | 
 406 | // JSX element which contain all, it is a container or parent 
 407 | const app = (
 408 |   <div>
 409 |     {header}
 410 |     {main}
 411 |     {footer}
 412 |   </div>
 413 | )
 414 | ```
 415 | 
 416 | Now, let us put everything together and render it to the browser. [Live on code pen](https://codepen.io/Asabeneh/full/MWwbYWg).
 417 | 
 418 | ```html
 419 | <!DOCTYPE html>
 420 | <html lang="en">
 421 |   <head>
 422 |     <meta charset="UTF-8" />
 423 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 424 |     <title>React For Everyone</title>
 425 |   </head>
 426 | 
 427 |   <body>
 428 |     <div class="root"></div>
 429 | 
 430 |     <script
 431 |       crossorigin
 432 |       src="https://unpkg.com/react@16/umd/react.development.js"
 433 |     ></script>
 434 |     <script
 435 |       crossorigin
 436 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
 437 |     ></script>
 438 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 439 |     <script type="text/babel">
 440 |       // To get the root element from the HTML document
 441 |       const rootElement = document.querySelector('.root')
 442 | 
 443 |       // JSX element, header
 444 |       const header = (
 445 |         <header>
 446 |           <h1>Getting Started React</h1>
 447 |           <h2>JavaScript Library</h2>
 448 |           <p>Asabeneh Yetayeh</p>
 449 |           <p>Feb 10, 2020</p>
 450 |         </header>
 451 |       )
 452 | 
 453 |       // JSX element, main
 454 |       const main = (
 455 |         <main>
 456 |           <p>Prerequisite to get started react.js:</p>
 457 |           <ul>
 458 |             <li>HTML</li>
 459 |             <li>CSS</li>
 460 |             <li> JavaScript</li>
 461 |           </ul>
 462 |         </main>
 463 |       )
 464 | 
 465 |       // JSX element, footer
 466 |       const footer = (
 467 |         <footer>
 468 |           <p>Copyright 2020</p>
 469 |         </footer>
 470 |       )
 471 | 
 472 |       // JSX element, app, a container or a parent
 473 |       const app = (
 474 |         <div>
 475 |           {header}
 476 |           {main}
 477 |           {footer}
 478 |         </div>
 479 |       )
 480 | 
 481 |       // we render the JSX element using the ReactDOM package
 482 |       // ReactDOM has the render method and the render method takes two argument
 483 |       ReactDOM.render(app, rootElement)
 484 |     </script>
 485 |   </body>
 486 | </html>
 487 | ```
 488 | 
 489 | ![Rendering Multiple JSX Elements](./images/rendering_multiple_js_elements.png)
 490 | 
 491 | ## Style and className
 492 | 
 493 | So far, we did apply any style. Now, let us add style to our JSX elements. Inline style became very popular after the emergence of react. Let us add border to the header JSX element.
 494 | 
 495 | To add style to a JSX element we use inline style or className. We inject the style object using {}. Every CSS properties become a key and every CSS properties value become value for the  the object. For instance, in the example below,  border is a key and '2px solid orange' is a value, color is a key and 'black' is a value, fontSize is a key and '18px' is a value. All two word CSS properties will change to camelCase when we use them as key in the CSS object in react or JavaScript.[Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYbY).
 496 | 
 497 | ```js
 498 | const header = (
 499 |   <header style={{ border: '2px solid orange', color:'black', fontSize:'18px' }}>
 500 |     <h1>Getting Started React</h1>
 501 |     <h2>JavaScript Library</h2>
 502 |     <p>Asabeneh Yetayeh</p>
 503 |     <p>Feb 10, 2020</p>
 504 |   </header>
 505 | )
 506 | 
 507 | // or we can write it
 508 | 
 509 | const style = { border: '2px solid orange', color:'black', fontSize:'18px' }
 510 | 
 511 | const header = (
 512 |   <header style={style}>
 513 |     <h1>Getting Started React</h1>
 514 |     <h2>JavaScript Library</h2>
 515 |     <h3>Asabeneh Yetayeh</h3>
 516 |     <p>Feb 10, 2020</p>
 517 |   </header>
 518 | )
 519 | ```
 520 | 
 521 | Let us apply some style to our JSX elements and see the result.
 522 | 
 523 | ![Styling JSX Element](images/styling_jsx_element.png).
 524 | 
 525 | Now, lets us apply style the header part only [Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYBG).
 526 | 
 527 | It is good practice to open the browser console while you are developing your application to know if everything goes well.
 528 | 
 529 | Let us keep styling all the JSX elements we have created: the header, main and footer. We can also use regular internal styling to style our application. Using regular style, to target an HTML element we use tag name, id, class, an attribute and other methods. It is very common in the react developer community people use quite a lot classes instead of id. In this material, I will use only class instead of id.
 530 | 
 531 | 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.
 532 | 
 533 | ```js
 534 | const title = <h1 className='title'>Getting Started React</h1>
 535 | const inputField = (
 536 |   <div>
 537 |     <label htmlFor='firstname'>First Name</label>
 538 |     <input type='text' id='firstname' placeholder='First Name' />
 539 |   </div>
 540 | )
 541 | ```
 542 | 
 543 | The id used in the input element is not for styling purpose instead to refer the label to the input field.
 544 | 
 545 | If class is used instead of className or for instead of htmlFor you will see such kind of warning.
 546 | 
 547 | ![Class Name warning](./images/className_warning.png)
 548 | 
 549 | Now, you know how to use the inline style and how to use className and let us style all the JSX elements.
 550 | 
 551 | ```html
 552 | <!DOCTYPE html>
 553 | <html lang="en">
 554 |   <head>
 555 |     <meta charset="UTF-8" />
 556 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 557 |     <title>React For Everyone</title>
 558 |   </head>
 559 | 
 560 |   <body>
 561 |     <div class="root"></div>
 562 | 
 563 |     <script
 564 |       crossorigin
 565 |       src="https://unpkg.com/react@16/umd/react.development.js"
 566 |     ></script>
 567 |     <script
 568 |       crossorigin
 569 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
 570 |     ></script>
 571 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 572 |     <script type="text/babel">
 573 |       // To get the root element from the HTML document
 574 |       const rootElement = document.querySelector('.root')
 575 | 
 576 |       // style
 577 |       const headerStyles = {
 578 |         backgroundColor: '#61DBFB',
 579 |         fontFamily: 'Helvetica Neue',
 580 |         padding: 25,
 581 |         lineHeight: 1.5
 582 |       }
 583 | 
 584 |       // JSX element, header
 585 |       const header = (
 586 |         <header style={headerStyles}>
 587 |           <div className='header-wrapper'>
 588 |             <h1>Getting Started React</h1>
 589 |             <h2>JavaScript Library</h2>
 590 |             <p>Asabeneh Yetayeh</p>
 591 |             <p>Feb 10, 2020</p>
 592 |           </div>
 593 |         </header>
 594 |       )
 595 | 
 596 |       // JSX element, main
 597 |       const mainStyles = {
 598 |         backgroundColor: '#F3F0F5'
 599 |       }
 600 |       const main = (
 601 |         <main style={mainStyles}>
 602 |           <p>Prerequisite to get started react.js:</p>
 603 |           <ul>
 604 |             <li>HTML</li>
 605 |             <li>CSS</li>
 606 |             <li> JavaScript</li>
 607 |           </ul>
 608 |         </main>
 609 |       )
 610 | 
 611 |       const footerStyles = {
 612 |         backgroundColor: '#61DBFB'
 613 |       }
 614 |       // JSX element, footer
 615 |       const footer = (
 616 |         <footer style={footerStyles}>
 617 |           <p>Copyright 2020</p>
 618 |         </footer>
 619 |       )
 620 | 
 621 |       // JSX element, app
 622 |       const app = (
 623 |         <div className='app'>
 624 |           {header}
 625 |           {main}
 626 |           {footer}
 627 |         </div>
 628 |       )
 629 | 
 630 |       // we render the JSX element using the ReactDOM package
 631 |       ReactDOM.render(app, rootElement)
 632 |     </script>
 633 |   </body>
 634 | </html>
 635 | ```
 636 | 
 637 | ![Styling all jsx elements](images/styling_all_jsx_elements.png)
 638 | 
 639 | ### Exercises - Inline Style
 640 | 
 641 | 1. Create a style object for the main JSX
 642 | 2. Create a style object for the footer and app JSX
 643 | 3. Add more styles to the JSX elements
 644 | 
 645 | Instead of style object using regular styling method is more easier than the above. Now, let us use internal style to style all the JSX. It is also possible to use external style method.[Live on code pen](https://codepen.io/Asabeneh/full/QWbGwge)
 646 | 
 647 | ```html
 648 | <!DOCTYPE html>
 649 | <html lang="en">
 650 |   <head>
 651 |     <meta charset="UTF-8" />
 652 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 653 |     <link
 654 |       href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
 655 |       rel="stylesheet"
 656 |     />
 657 | 
 658 |     <title>React For Everyone</title>
 659 |     <style>
 660 |       /* == General style === */
 661 |       * {
 662 |         box-sizing: border-box;
 663 |         padding: 0;
 664 |         margin: 0;
 665 |       }
 666 | 
 667 |       html,
 668 |       body {
 669 |         height: 100%;
 670 |         line-height: 1.5;
 671 |         font-family: 'Montserrat';
 672 |         font-weight: 300;
 673 |         color: black;
 674 |       }
 675 | 
 676 |       .root {
 677 |         min-height: 100%;
 678 |         position: relative;
 679 |       }
 680 | 
 681 |       .header-wrapper,
 682 |       .main-wrapper,
 683 |       .footer-wrapper {
 684 |         width: 85%;
 685 |         margin: auto;
 686 |       }
 687 | 
 688 |       .header-wrapper,
 689 |       .main-wrapper {
 690 |         padding: 10px;
 691 |         margin: 2px auto;
 692 |       }
 693 | 
 694 |       h1 {
 695 |         font-size: 70px;
 696 |         font-weight: 300;
 697 |       }
 698 | 
 699 |       h2,
 700 |       h3 {
 701 |         font-weight: 300;
 702 |       }
 703 | 
 704 |       header {
 705 |         background-color: #61dbfb;
 706 |         padding: 25;
 707 |         padding: 10px;
 708 |       }
 709 | 
 710 |       main {
 711 |         padding: 10px;
 712 |         padding-bottom: 60px;
 713 |         /* Height of the footer */
 714 |       }
 715 | 
 716 |       ul {
 717 |         margin-left: 15px;
 718 |       }
 719 | 
 720 |       ul li {
 721 |         list-style: none;
 722 |       }
 723 | 
 724 |       footer {
 725 |         position: absolute;
 726 |         bottom: 0;
 727 |         width: 100%;
 728 |         height: 60px;
 729 |         /* Height of the footer */
 730 |         background: #6cf;
 731 |       }
 732 | 
 733 |       .footer-wrapper {
 734 |         font-weight: 400;
 735 |         text-align: center;
 736 |         line-height: 60px;
 737 |       }
 738 |     </style>
 739 |   </head>
 740 | 
 741 |   <body>
 742 |     <div class="root"></div>
 743 | 
 744 |     <script
 745 |       crossorigin
 746 |       src="https://unpkg.com/react@16/umd/react.development.js"
 747 |     ></script>
 748 |     <script
 749 |       crossorigin
 750 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
 751 |     ></script>
 752 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 753 |     <script type="text/babel">
 754 |       // To get the root element from the HTML document
 755 |       const rootElement = document.querySelector('.root')
 756 | 
 757 |       // JSX element, header
 758 |       const header = (
 759 |         <header>
 760 |           <div className='header-wrapper'>
 761 |             <h1>Getting Started React</h1>
 762 |             <h2>JavaScript Library</h2>
 763 |             <p>Instructor: Asabeneh Yetayeh</p>
 764 |             <p>Date: Feb 10, 2020</p>
 765 |           </div>
 766 |         </header>
 767 |       )
 768 | 
 769 |       // JSX element, main
 770 |       const main = (
 771 |         <main>
 772 |           <div className='main-wrapper'>
 773 |             <p>
 774 |               Prerequisite to get started{' '}
 775 |               <strong>
 776 |                 <em>react.js</em>
 777 |               </strong>
 778 |               :
 779 |             </p>
 780 |             <ul>
 781 |               <li>HTML</li>
 782 |               <li>CSS</li>
 783 |               <li> JavaScript</li>
 784 |             </ul>
 785 |           </div>
 786 |         </main>
 787 |       )
 788 | 
 789 |       // JSX element, footer
 790 |       const footer = (
 791 |         <footer>
 792 |           <div className='footer-wrapper'>
 793 |             <p>Copyright 2020</p>
 794 |           </div>
 795 |         </footer>
 796 |       )
 797 | 
 798 |       // JSX element, app
 799 |       const app = (
 800 |         <div className='app'>
 801 |           {header}
 802 |           {main}
 803 |           {footer}
 804 |         </div>
 805 |       )
 806 | 
 807 |       // we render the JSX element using the ReactDOM package
 808 |       ReactDOM.render(app, rootElement)
 809 |     </script>
 810 |   </body>
 811 | </html>
 812 | ```
 813 | 
 814 | ![Internal Style](./images/internal_style.png)
 815 | 
 816 | ### Exercises - Internal Styles
 817 | 
 818 | 1. Apply different styles to you JSX elements
 819 | 
 820 | ## Injecting data to JSX Element
 821 | 
 822 | So far, we used static data on the JSX elements but we 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.
 823 | 
 824 | ```js
 825 | const title = 'Getting Started React'
 826 | const subtitle = 'JavaScript Library'
 827 | const authorFirstName = 'Asabeneh'
 828 | const authorLastName = 'Yetayeh'
 829 | const date = 'Feb 10, 2020'
 830 | 
 831 | // JSX element, header
 832 | const header = (
 833 |   <header>
 834 |     <div className='header-wrapper'>
 835 |       <h1>{title}</h1>
 836 |       <h2>{subtitle}</h2>
 837 |       <h3>
 838 |         Instructor: {authorFirstName} {authorLastName}
 839 |       </h3>
 840 |       <p>Date: {date}</p>
 841 |     </div>
 842 |   </header>
 843 | )
 844 | ```
 845 | 
 846 | Similar to the header JSX element we can implement to main and footer JSX element.
 847 | 
 848 | ### Injecting a string to JSX Element
 849 | 
 850 | In this section we only inject only strings
 851 | 
 852 | ```js
 853 | const title = 'Getting Started React'
 854 | const subtitle = 'JavaScript Library'
 855 | const authorFirstName = 'Asabeneh'
 856 | const authorLastName = 'Yetayeh'
 857 | const date = 'Feb 10, 2020'
 858 | 
 859 | // JSX element, header
 860 | const header = (
 861 |   <header>
 862 |     <div className='header-wrapper'>
 863 |       <h1>{title}</h1>
 864 |       <h2>{subtitle}</h2>
 865 |       <p>
 866 |         Instructor: {authorFirstName} {authorLastName}
 867 |       </p>
 868 |       <p>Date: {date}</p>
 869 |     </div>
 870 |   </header>
 871 | )
 872 | ```
 873 | 
 874 | ### Injecting a number to JSX Element
 875 | 
 876 | ```js
 877 | const numOne = 3
 878 | const numTwo = 2
 879 | 
 880 | const result = (
 881 |   <p>
 882 |     {numOne} + {numTwo} = {numOne + numTwo}
 883 |   </p>
 884 | )
 885 | 
 886 | const yearBorn = 1820;
 887 | const currentYear = 2020
 888 | const age = currentYear - yearBorn
 889 | const persnonAge = <p> {age}</p>
 890 | ```
 891 | 
 892 | As you can see in the above example, it is possible to do some arithmetic calculation and ternary operations.
 893 | 
 894 | ### Injecting an array to JSX Element
 895 | 
 896 | 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.
 897 | 
 898 | ```js
 899 | const techs = ['HTML', 'CSS', 'JavaScript']
 900 | 
 901 | // JSX element, main
 902 | const main = (
 903 |   <main>
 904 |     <div className='main-wrapper'>
 905 |       <p>
 906 |         Prerequisite to get started{' '}
 907 |         <strong>
 908 |           <em>react.js</em>
 909 |         </strong>
 910 |         :
 911 |       </p>
 912 |       <ul>{techs}</ul>
 913 |     </div>
 914 |   </main>
 915 | )
 916 | ```
 917 | 
 918 | ### Injecting an object to JSX Element
 919 | 
 920 | 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.
 921 | 
 922 | 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)
 923 | 
 924 | ```html
 925 | <!DOCTYPE html>
 926 | <html lang="en">
 927 |   <head>
 928 |     <meta charset="UTF-8" />
 929 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 930 |     <link
 931 |       href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
 932 |       rel="stylesheet"
 933 |     />
 934 | 
 935 |     <title>React For Everyone</title>
 936 |     <style>
 937 |       /* == General style === */
 938 |       * {
 939 |         box-sizing: border-box;
 940 |         padding: 0;
 941 |         margin: 0;
 942 |       }
 943 | 
 944 |       html,
 945 |       body {
 946 |         height: 100%;
 947 |         line-height: 1.5;
 948 |         font-family: 'Montserrat';
 949 |         font-weight: 300;
 950 |         color: black;
 951 |       }
 952 | 
 953 |       .root {
 954 |         min-height: 100%;
 955 |         position: relative;
 956 |       }
 957 | 
 958 |       .header-wrapper,
 959 |       .main-wrapper,
 960 |       .footer-wrapper {
 961 |         width: 85%;
 962 |         margin: auto;
 963 |       }
 964 | 
 965 |       .header-wrapper,
 966 |       .main-wrapper {
 967 |         padding: 10px;
 968 |         margin: 2px auto;
 969 |       }
 970 | 
 971 |       h1 {
 972 |         font-size: 70px;
 973 |         font-weight: 300;
 974 |       }
 975 | 
 976 |       h2,
 977 |       h3 {
 978 |         font-weight: 300;
 979 |       }
 980 | 
 981 |       header {
 982 |         background-color: #61dbfb;
 983 |         padding: 25;
 984 |         padding: 10px;
 985 |       }
 986 | 
 987 |       main {
 988 |         padding: 10px;
 989 |         padding-bottom: 60px;
 990 |         /* Height of the footer */
 991 |       }
 992 | 
 993 |       ul {
 994 |         margin-left: 15px;
 995 |       }
 996 | 
 997 |       ul li {
 998 |         list-style: none;
 999 |       }
1000 | 
1001 |       footer {
1002 |         position: absolute;
1003 |         bottom: 0;
1004 |         width: 100%;
1005 |         height: 60px;
1006 |         /* Height of the footer */
1007 |         background: #6cf;
1008 |       }
1009 | 
1010 |       .footer-wrapper {
1011 |         font-weight: 400;
1012 |         text-align: center;
1013 |         line-height: 60px;
1014 |       }
1015 |     </style>
1016 |   </head>
1017 | 
1018 |   <body>
1019 |     <div class="root"></div>
1020 | 
1021 |     <script
1022 |       crossorigin
1023 |       src="https://unpkg.com/react@16/umd/react.development.js"
1024 |     ></script>
1025 |     <script
1026 |       crossorigin
1027 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
1028 |     ></script>
1029 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
1030 |     <script type="text/babel">
1031 |       // To get the root element from the HTML document
1032 |       const rootElement = document.querySelector('.root')
1033 |       // JSX element, header
1034 |       const title = 'Getting Started React'
1035 |       const subtitle = 'JavaScript Library'
1036 |       const author = {
1037 |         firstName:'Asabeneh',
1038 |         lastName:'Yetayeh'
1039 |       }
1040 |       const date = 'Feb 10, 2020'
1041 | 
1042 |       // JSX element, header
1043 |       const header = (
1044 |         <header>
1045 |           <div className='header-wrapper'>
1046 |             <h1>{title}</h1>
1047 |             <h2>{subtitle}</h2>
1048 |             <p>
1049 |               Instructor: {author.firstName} {author.lastName}
1050 |             </p>
1051 |             <p>Date: {date}</p>
1052 |           </div>
1053 |         </header>
1054 |       )
1055 | 
1056 |       const numOne = 3
1057 |       const numTwo = 2
1058 | 
1059 |       const result = (
1060 |         <p>
1061 |           {numOne} + {numTwo} = {numOne + numTwo}
1062 |         </p>
1063 |       )
1064 | 
1065 |       const yearBorn = 1820;
1066 |       const currentYear = 2020
1067 |       const age = currentYear - yearBorn
1068 |       const personAge = <p> {author.firstName} {author.lastName} is {age} years old</p>
1069 | 
1070 |       // JSX element, main
1071 |       const techs = ['HTML', 'CSS', 'JavaScript']
1072 | 
1073 |       // JSX element, main
1074 |       const main = (
1075 |         <main>
1076 |           <div className='main-wrapper'>
1077 |             <p>
1078 |               Prerequisite to get started{' '}
1079 |               <strong>
1080 |                 <em>react.js</em>
1081 |               </strong>
1082 |               :
1083 |             </p>
1084 |             <ul>{techs}</ul>
1085 |             {result}
1086 |             {personAge}
1087 |           </div>
1088 |         </main>
1089 |       )
1090 | 
1091 |       const copyRight = 'Copyright 2020'
1092 | 
1093 |       // JSX element, footer
1094 |       const footer = (
1095 |         <footer>
1096 |           <div className='footer-wrapper'>
1097 |             <p>{copyRight}</p>
1098 |           </div>
1099 |         </footer>
1100 |       )
1101 | 
1102 |       // JSX element, app
1103 |       const app = (
1104 |         <div className='app'>
1105 |           {header}
1106 |           {main}
1107 |           {footer}
1108 |         </div>
1109 |       )
1110 | 
1111 |       // we render the JSX element using the ReactDOM package
1112 |       ReactDOM.render(app, rootElement)
1113 |     </script>
1114 |   </body>
1115 | </html>
1116 | ```
1117 | 
1118 | ![Dynamic Data](images/dynamic_data.png)
1119 | 
1120 | 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 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).
1121 | 
1122 | ```js
1123 | const techs = ['HTML', 'CSS', 'JavaScript']
1124 | const techsFormatted = techs.map(tech => <li>{tech}</li>)
1125 | ```
1126 | 
1127 | In the following code example, the list is now containing list elements and formatted properly.
1128 | 
1129 | ```html
1130 | <!DOCTYPE html>
1131 | <html lang="en">
1132 |   <head>
1133 |     <meta charset="UTF-8" />
1134 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
1135 |     <link
1136 |       href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
1137 |       rel="stylesheet"
1138 |     />
1139 | 
1140 |     <title>React For Everyone</title>
1141 |     <style>
1142 |       /* == General style === */
1143 |       * {
1144 |         box-sizing: border-box;
1145 |         padding: 0;
1146 |         margin: 0;
1147 |       }
1148 | 
1149 |       html,
1150 |       body {
1151 |         height: 100%;
1152 |         line-height: 1.5;
1153 |         font-family: 'Montserrat';
1154 |         font-weight: 300;
1155 |         color: black;
1156 |       }
1157 | 
1158 |       .root {
1159 |         min-height: 100%;
1160 |         position: relative;
1161 |       }
1162 | 
1163 |       .header-wrapper,
1164 |       .main-wrapper,
1165 |       .footer-wrapper {
1166 |         width: 85%;
1167 |         margin: auto;
1168 |       }
1169 | 
1170 |       .header-wrapper,
1171 |       .main-wrapper {
1172 |         padding: 10px;
1173 |         margin: 2px auto;
1174 |       }
1175 | 
1176 |       h1 {
1177 |         font-size: 70px;
1178 |         font-weight: 300;
1179 |       }
1180 | 
1181 |       h2,
1182 |       h3 {
1183 |         font-weight: 300;
1184 |       }
1185 | 
1186 |       header {
1187 |         background-color: #61dbfb;
1188 |         padding: 25;
1189 |         padding: 10px;
1190 |       }
1191 | 
1192 |       main {
1193 |         padding: 10px;
1194 |         padding-bottom: 60px;
1195 |         /* Height of the footer */
1196 |       }
1197 | 
1198 |       ul {
1199 |         margin-left: 15px;
1200 |       }
1201 | 
1202 |       ul li {
1203 |         list-style: none;
1204 |       }
1205 | 
1206 |       footer {
1207 |         position: absolute;
1208 |         bottom: 0;
1209 |         width: 100%;
1210 |         height: 60px;
1211 |         /* Height of the footer */
1212 |         background: #6cf;
1213 |       }
1214 | 
1215 |       .footer-wrapper {
1216 |         font-weight: 400;
1217 |         text-align: center;
1218 |         line-height: 60px;
1219 |       }
1220 |     </style>
1221 |   </head>
1222 | 
1223 |   <body>
1224 |     <div class="root"></div>
1225 | 
1226 |     <script
1227 |       crossorigin
1228 |       src="https://unpkg.com/react@16/umd/react.development.js"
1229 |     ></script>
1230 |     <script
1231 |       crossorigin
1232 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
1233 |     ></script>
1234 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
1235 |     <script type="text/babel">
1236 |       // To get the root element from the HTML document
1237 |       const rootElement = document.querySelector('.root')
1238 |       // JSX element, header
1239 |       const title = 'Getting Started React'
1240 |       const subtitle = 'JavaScript Library'
1241 |       const author = {
1242 |         firstName:'Asabeneh',
1243 |         lastName:'Yetayeh'
1244 |       }
1245 |       const date = 'Feb 10, 2020'
1246 | 
1247 |       // JSX element, header
1248 |       const header = (
1249 |         <header>
1250 |           <div className='header-wrapper'>
1251 |             <h1>{title}</h1>
1252 |             <h2>{subtitle}</h2>
1253 |             <p>
1254 |               Instructor: {author.firstName} {author.lastName}
1255 |             </p>
1256 |             <p>Date: {date}</p>
1257 |           </div>
1258 |         </header>
1259 |       )
1260 | 
1261 |       const numOne = 3
1262 |       const numTwo = 2
1263 | 
1264 |       const result = (
1265 |         <p>
1266 |           {numOne} + {numTwo} = {numOne + numTwo}
1267 |         </p>
1268 |       )
1269 | 
1270 |       const yearBorn = 1820;
1271 |       const currentYear = 2020
1272 |       const age = currentYear - yearBorn
1273 |       const personAge = <p> {author.firstName} {author.lastName} is {age} years old</p>
1274 | 
1275 |       // JSX element, main
1276 |       const techs = ['HTML', 'CSS', 'JavaScript']
1277 |       const techsFormatted = techs.map(tech => <li>{tech}</li>)
1278 | 
1279 |       // JSX element, main
1280 |       const main = (
1281 |         <main>
1282 |           <div className='main-wrapper'>
1283 |             <p>
1284 |               Prerequisite to get started{' '}
1285 |               <strong>
1286 |                 <em>react.js</em>
1287 |               </strong>
1288 |               :
1289 |             </p>
1290 |             <ul>{techsFormatted}</ul>
1291 |             {result}
1292 |             {personAge}
1293 |           </div>
1294 |         </main>
1295 |       )
1296 | 
1297 |       const copyRight = 'Copyright 2020'
1298 | 
1299 |       // JSX element, footer
1300 |       const footer = (
1301 |         <footer>
1302 |           <div className='footer-wrapper'>
1303 |             <p>{copyRight}</p>
1304 |           </div>
1305 |         </footer>
1306 |       )
1307 | 
1308 |       // JSX element, app
1309 |       const app = (
1310 |         <div className='app'>
1311 |           {header}
1312 |           {main}
1313 |           {footer}
1314 |         </div>
1315 |       )
1316 | 
1317 |       // we render the JSX element using the ReactDOM package
1318 |       ReactDOM.render(app, rootElement)
1319 |     </script>
1320 |   </body>
1321 | </html>
1322 | ```
1323 | 
1324 | Rendering list
1325 | 
1326 | ![List Id](images/map_list_id.png)
1327 | 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 when you have id in your data. Now, let us just pass each items us a unique key and remove the warning.
1328 | 
1329 | ```html
1330 | <!DOCTYPE html>
1331 | <html lang="en">
1332 | 
1333 | <head>
1334 |     <meta charset="UTF-8">
1335 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
1336 |     <link
1337 |         href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
1338 |         rel="stylesheet">
1339 | 
1340 | 
1341 |     <title>React For Everyone</title>
1342 |     <style>
1343 |         /* == General style === */
1344 |         * {
1345 |             box-sizing: border-box;
1346 |             padding: 0;
1347 |             margin: 0
1348 |         }
1349 | 
1350 | 
1351 |         html,
1352 |         body {
1353 |             height: 100%;
1354 |             line-height: 1.5;
1355 |             font-family: 'Montserrat';
1356 |             font-weight: 300;
1357 |             color: black;
1358 | 
1359 |         }
1360 | 
1361 |         .root {
1362 |             min-height: 100%;
1363 |             position: relative;
1364 |         }
1365 | 
1366 |         .header-wrapper,
1367 |         .main-wrapper,
1368 |         .footer-wrapper {
1369 |             width: 85%;
1370 |             margin: auto;
1371 | 
1372 |         }
1373 | 
1374 |         .header-wrapper,
1375 |         .main-wrapper {
1376 |             padding: 10px;
1377 |             margin: 2px auto;
1378 |         }
1379 | 
1380 |         h1 {
1381 |             font-size: 70px;
1382 |             font-weight: 300;
1383 |         }
1384 | 
1385 |         h2,
1386 |         h3 {
1387 |             font-weight: 300;
1388 |         }
1389 | 
1390 |         header {
1391 |             background-color: #61DBFB;
1392 |             padding: 25;
1393 |             padding: 10px;
1394 |         }
1395 | 
1396 |         main {
1397 |             padding: 10px;
1398 |             padding-bottom: 60px;
1399 |             /* Height of the footer */
1400 | 
1401 |         }
1402 | 
1403 |         ul {
1404 |             margin-left: 15px;
1405 |         }
1406 | 
1407 | 
1408 | 
1409 |         ul li {
1410 |             list-style: none;
1411 |         }
1412 | 
1413 |         footer {
1414 |             position: absolute;
1415 |             bottom: 0;
1416 |             width: 100%;
1417 |             height: 60px;
1418 |             /* Height of the footer */
1419 |             background: #6cf;
1420 | 
1421 |         }
1422 | 
1423 |         .footer-wrapper {
1424 |             font-weight: 400;
1425 |             text-align: center;
1426 |             line-height: 60px;
1427 |         }
1428 |     </style>
1429 | </head>
1430 | 
1431 | <body>
1432 |     <div class="root"> </div>
1433 | 
1434 |     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
1435 |     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
1436 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
1437 |     <script type="text/babel">
1438 |        // To get the root element from the HTML document
1439 |       const rootElement = document.querySelector('.root')
1440 |       // JSX element, header
1441 |       const title = 'Getting Started React'
1442 |       const subtitle = 'JavaScript Library'
1443 |       const author = {
1444 |         firstName:'Asabeneh',
1445 |         lastName:'Yetayeh'
1446 |       }
1447 |       const date = 'Feb 10, 2020'
1448 | 
1449 |        // JSX element, header
1450 |        const header = (
1451 |        <header>
1452 |            <div className='header-wrapper'>
1453 |                <h1>{title}</h1>
1454 |                <h2>{subtitle}</h2>
1455 |                <p>
1456 |                    Instructor: {authorFirstName} {authorLastName}
1457 |                </p>
1458 |                <p>Date: {date}</p>
1459 |            </div>
1460 |        </header>
1461 |        )
1462 | 
1463 |        const numOne = 3
1464 |        const numTwo = 2
1465 | 
1466 |        const result = (
1467 |        <p>
1468 |            {numOne} + {numTwo} = {numOne + numTwo}
1469 |        </p>
1470 |        )
1471 | 
1472 |       const yearBorn = 1820;
1473 |       const currentYear = 2020
1474 |       const age = currentYear - yearBorn
1475 |       const personAge = <p> {author.firstName} {author.lastName} is {age} years old</p>
1476 | 
1477 |        // JSX element, main
1478 |       const techs = ['HTML', 'CSS', 'JavaScript']
1479 |       const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
1480 | 
1481 |        // JSX element, main
1482 |        const main = (
1483 |        <main>
1484 |            <div className='main-wrapper'>
1485 |                <p>
1486 |                    Prerequisite to get started{' '}
1487 |                    <strong>
1488 |                        <em>react.js</em>
1489 |                    </strong>
1490 |                    :
1491 |                </p>
1492 |                <ul>{techsFormatted}</ul>
1493 |                {result}
1494 |                {personAge}
1495 |            </div>
1496 |        </main>
1497 |        )
1498 | 
1499 | 
1500 |        const copyRight = 'Copyright 2020'
1501 | 
1502 |        // JSX element, footer
1503 |        const footer = (
1504 |        <footer>
1505 |            <div className="footer-wrapper">
1506 |                <p>{copyRight}</p>
1507 |            </div>
1508 | 
1509 |        </footer>
1510 |        )
1511 | 
1512 |        // JSX element, app
1513 |        const app = (
1514 |        <div className="app">
1515 |            {header}
1516 |            {main}
1517 |            {footer}
1518 |        </div>
1519 |        )
1520 | 
1521 |        // we render the JSX element using the ReactDOM package
1522 |        ReactDOM.render(app, rootElement)
1523 | 
1524 |     </script>
1525 | </body>
1526 | 
1527 | </html>
1528 | 
1529 | ```
1530 | 
1531 | ![Removing warning ](images/removing_unique_id_warning.png)
1532 | 
1533 | 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.
1534 | 
1535 | ### Exercise: Inject data to JSX
1536 | 
1537 | 1. Practice how to make JSX element and injecting dynamic data(string, number, boolean, array, object)
1538 | 
1539 | ## Component
1540 | 
1541 | A react component is small reusable code which is responsible for one part of the application UI. A react application is an aggregation of components.  React can help us to build reusable components. The following diagram shows different components. All the components have different border colors. In react we assemble different components together to create an application.
1542 | 
1543 | Components can be:
1544 | 
1545 | - Functional Component / Presentational Component / stateless component / Dumb components
1546 | - Class Component / Container Component/ State full component / smart components
1547 | 
1548 | The above classifications of components does not work for the latest version of react but it is good to know the former definition and how the previous versions work.
1549 | 
1550 | ![components](./images/components.png)
1551 | 
1552 | So, let us change all the JSX  to components. Components in react are JavaScript functions or class which return a JSX. Component name must start with an uppercase and if the name is two word should be CamelCase, camel with two humps.
1553 | 
1554 | ```js
1555 | // React component stntax
1556 | // it can be arrow function, function declaration or function expression
1557 | const ComponentName = () => {
1558 |   return JSX
1559 | }
1560 | ```
1561 | 
1562 | ```js
1563 | // JSX element, header
1564 | const header = (
1565 |   <header style={headerStyles}>
1566 |     <div className='header-wrapper'>
1567 |       <h1>Getting Started React</h1>
1568 |       <h2>JavaScript Library</h2>
1569 |       <h3>Asabeneh Yetayeh</h3>
1570 |       <h4>Feb 10, 2020</h4>
1571 |     </div>
1572 |   </header>
1573 | )
1574 | 
1575 | // React Component
1576 | const Header = () => {
1577 |   return header
1578 | }
1579 | 
1580 | // or we can just return the JSX
1581 | 
1582 | const Header = () => {
1583 |   return (
1584 |     <header style={headerStyles}>
1585 |       <div className='header-wrapper'>
1586 |         <h1>Getting Started React</h1>
1587 |         <h2>JavaScript Library</h2>
1588 |         <h3>Asabeneh Yetayeh</h3>
1589 |         <h4>Feb 10, 2020</h4>
1590 |       </div>
1591 |     </header>
1592 |   )
1593 | }
1594 | 
1595 | // Even th above code can be written like this
1596 | const Header = () =>  (
1597 |     <header style={headerStyles}>
1598 |       <div className='header-wrapper'>
1599 |         <h1>Getting Started React</h1>
1600 |         <h2>JavaScript Library</h2>
1601 |         <h3>Asabeneh Yetayeh</h3>
1602 |         <h4>Feb 10, 2020</h4>
1603 |       </div>
1604 |     </header>
1605 |   )
1606 | ```
1607 | 
1608 | ## Rendering components
1609 | 
1610 | Now, lets change all the JSX elements we had to components. When we call JSX element we use curly brackets and when we call components we do as follows <ComponentName />. If we pass an attribute when we call the component name, we call it props(<ComponentName propsName = {'data type'} />). We will talk about props in its section.[Live on code pen](https://codepen.io/Asabeneh/full/wvaKKEM)
1611 | 
1612 | ```html
1613 | <!DOCTYPE html>
1614 | <html lang="en">
1615 |   <head>
1616 |     <meta charset="UTF-8" />
1617 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
1618 |     <link
1619 |       href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
1620 |       rel="stylesheet"
1621 |     />
1622 | 
1623 |     <title>React For Everyone</title>
1624 |     <style>
1625 |       /* == General style === */
1626 |       * {
1627 |         box-sizing: border-box;
1628 |         padding: 0;
1629 |         margin: 0;
1630 |       }
1631 | 
1632 |       html,
1633 |       body {
1634 |         height: 100%;
1635 |         line-height: 1.5;
1636 |         font-family: 'Montserrat';
1637 |         font-weight: 300;
1638 |         color: black;
1639 |       }
1640 | 
1641 |       .root {
1642 |         min-height: 100%;
1643 |         position: relative;
1644 |       }
1645 | 
1646 |       .header-wrapper,
1647 |       .main-wrapper,
1648 |       .footer-wrapper {
1649 |         width: 85%;
1650 |         margin: auto;
1651 |       }
1652 | 
1653 |       .header-wrapper,
1654 |       .main-wrapper {
1655 |         padding: 10px;
1656 |         margin: 2px auto;
1657 |       }
1658 | 
1659 |       h1 {
1660 |         font-size: 70px;
1661 |         font-weight: 300;
1662 |       }
1663 | 
1664 |       h2,
1665 |       h3 {
1666 |         font-weight: 300;
1667 |       }
1668 | 
1669 |       header {
1670 |         background-color: #61dbfb;
1671 |         padding: 25;
1672 |         padding: 10px;
1673 |       }
1674 | 
1675 |       main {
1676 |         padding: 10px;
1677 |         padding-bottom: 60px;
1678 |         /* Height of the footer */
1679 |       }
1680 | 
1681 |       ul {
1682 |         margin-left: 15px;
1683 |       }
1684 | 
1685 |       ul li {
1686 |         list-style: none;
1687 |       }
1688 | 
1689 |       footer {
1690 |         position: absolute;
1691 |         bottom: 0;
1692 |         width: 100%;
1693 |         height: 60px;
1694 |         /* Height of the footer */
1695 |         background: #6cf;
1696 |       }
1697 | 
1698 |       .footer-wrapper {
1699 |         font-weight: 400;
1700 |         text-align: center;
1701 |         line-height: 60px;
1702 |       }
1703 |     </style>
1704 |   </head>
1705 | 
1706 |   <body>
1707 |     <div class="root"></div>
1708 | 
1709 |     <script
1710 |       crossorigin
1711 |       src="https://unpkg.com/react@16/umd/react.development.js"
1712 |     ></script>
1713 |     <script
1714 |       crossorigin
1715 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
1716 |     ></script>
1717 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
1718 |     <script type="text/babel">
1719 |       // To get the root element from the HTML document
1720 |       const rootElement = document.querySelector('.root')
1721 | 
1722 |       // Header Component
1723 |       const Header = () => (
1724 |         <header>
1725 |           <div className='header-wrapper'>
1726 |             <h1>Getting Started React</h1>
1727 |             <h2>JavaScript Library</h2>
1728 |             <h3>Asabeneh Yetayeh</h3>
1729 |             <p>Feb 10, 2020</p>
1730 |           </div>
1731 |         </header>
1732 |       )
1733 | 
1734 |       // TechList Component
1735 |       const TechList = () => {
1736 |         const techs = ['HTML', 'CSS', 'JavaScript']
1737 |         const techsFormatted = techs.map(tech => <li key={tech}>{tech}</li>)
1738 |         return techsFormatted
1739 |       }
1740 | 
1741 |       // Main Component
1742 |       const Main = () => (
1743 |         <main>
1744 |           <div className='main-wrapper'>
1745 |             <p>Prerequisite to get started react.js:</p>
1746 |             <ul>
1747 |               <TechList />
1748 |             </ul>
1749 |           </div>
1750 |         </main>
1751 |       )
1752 | 
1753 |       // Footer Component
1754 |       const Footer = () => (
1755 |         <footer>
1756 |           <div className='footer-wrapper'>
1757 |             <p>Copyright 2020</p>
1758 |           </div>
1759 |         </footer>
1760 |       )
1761 | 
1762 |       // The App, or the parent or the container component
1763 |       const App = () => (
1764 |         <div className='app'>
1765 |           <Header />
1766 |           <Main />
1767 |           <Footer />
1768 |         </div>
1769 |       )
1770 | 
1771 |       // we render the JSX element using the ReactDOM package
1772 |       ReactDOM.render(<App />, rootElement)
1773 |     </script>
1774 |   </body>
1775 | </html>
1776 | ```
1777 | 
1778 | ![Rendering Components](images/rendering_componnets.png)
1779 | 
1780 | ### Class Components
1781 | 
1782 | All the above components are functional components. Let us make also class based component. Class based component is made using JavaScript class and it inherits from react Component. Let us learn how to make a class based component by converting all the functional components we made previously. It is not important to convert all but we are converting them for the sake of learning how to change functional components to class components. [Live on code pen](https://codepen.io/Asabeneh/full/oNXjpOj)
1783 | 
1784 | ```js
1785 | // Header Component
1786 | // Functional component
1787 | const Header = () => (
1788 |   <header>
1789 |     <div className='header-wrapper'>
1790 |       <h1>Getting Started React</h1>
1791 |       <h2>JavaScript Library</h2>
1792 |       <h3>Asabeneh Yetayeh</h3>
1793 |       <p>Feb 10, 2020</p>
1794 |     </div>
1795 |   </header>
1796 | )
1797 | 
1798 | // class base component
1799 | 
1800 | class Header extends React.Component {
1801 |   render() {
1802 |     return (
1803 |       <header>
1804 |         <div className='header-wrapper'>
1805 |           <h1>Getting Started React</h1>
1806 |           <h2>JavaScript Library</h2>
1807 |           <h3>Asabeneh Yetayeh</h3>
1808 |           <p>Feb 10, 2020</p>
1809 |         </div>
1810 |       </header>
1811 |     )
1812 |   }
1813 | }
1814 | 
1815 | // TechList Component
1816 | // functional component
1817 | const TechList = () => {
1818 |   const techs = ['HTML', 'CSS', 'JavaScript']
1819 |   const techsFormatted = techs.map(tech => <li key={tech}>{tech}</li>)
1820 |   return techsFormatted
1821 | }
1822 | 
1823 | // TechList Component
1824 | // class base component
1825 | class TechList extends React.Component {
1826 |   render() {
1827 |     const techs = ['HTML', 'CSS', 'JavaScript']
1828 |     const techsFormatted = techs.map(tech => <li key={tech}>{tech}</li>)
1829 |     return techsFormatted
1830 |   }
1831 | }
1832 | 
1833 | // Main Component
1834 | // Functional Component
1835 | const Main = () => (
1836 |   <main>
1837 |     <div className='main-wrapper'>
1838 |       <p>Prerequisite to get started react.js:</p>
1839 |       <ul>
1840 |         <TechList />
1841 |       </ul>
1842 |     </div>
1843 |   </main>
1844 | )
1845 | 
1846 | // Main Component
1847 | // Class Component
1848 | class Main extends React.Component {
1849 |   render() {
1850 |     return (
1851 |       <main>
1852 |         <div className='main-wrapper'>
1853 |           <p>Prerequisite to get started react.js:</p>
1854 |           <ul>
1855 |             <TechList />
1856 |           </ul>
1857 |         </div>
1858 |       </main>
1859 |     )
1860 |   }
1861 | }
1862 | 
1863 | // Footer Component
1864 | // Functional component
1865 | const Footer = () => (
1866 |   <footer>
1867 |     <div className='footer-wrapper'>
1868 |       <p>Copyright 2020</p>
1869 |     </div>
1870 |   </footer>
1871 | )
1872 | 
1873 | // Footer Component
1874 | // Class component
1875 | class Footer extends React.Component {
1876 |   render() {
1877 |     return (
1878 |       <footer>
1879 |         <div className='footer-wrapper'>
1880 |           <p>Copyright 2020</p>
1881 |         </div>
1882 |       </footer>
1883 |     )
1884 |   }
1885 | }
1886 | 
1887 | // The App, or the parent or the container component
1888 | // Functional Component
1889 | const App = () => (
1890 |   <div className='app'>
1891 |     <Header />
1892 |     <Main />
1893 |     <Footer />
1894 |   </div>
1895 | )
1896 | 
1897 | // The App, or the parent or the container component
1898 | // Class Component
1899 | class App extends React.Component {
1900 |   render() {
1901 |     return (
1902 |       <div className='app'>
1903 |         <Header />
1904 |         <Main />
1905 |         <Footer />
1906 |       </div>
1907 |     )
1908 |   }
1909 | }
1910 | ```
1911 | 
1912 | Most of the time the container or the parent component can be written as class component and others as functional or presentational components. However, the latest version of react can allow us to write every component in our application only with functional components. This was impossible in previous versions.
1913 | 
1914 | ## Props
1915 | 
1916 | ### Props in Functional Component
1917 | 
1918 | In the previous section, we saw how to inject dynamic data type JSX. Now, let us see how we use dynamic data in component and also how to pass data as props.
1919 | 
1920 | ```js
1921 | const title = 'Getting Started React'
1922 | const subtitle = 'JavaScript Library'
1923 | const author = {
1924 |   firstName:'Asabeneh',
1925 |   lastName:'Yetayeh'
1926 | }
1927 | const date = 'Feb 10, 2020'
1928 | 
1929 | // Header Component
1930 | const Header = () => (
1931 |   <header>
1932 |     <div className='header-wrapper'>
1933 |       <h1>{title}</h1>
1934 |       <h2>{subtitle}</h2>
1935 |       <p>{author.firstName} {author.lastName]</p>
1936 |       <p>{date}</p>
1937 |     </div>
1938 |   </header>
1939 | )
1940 | ```
1941 | 
1942 | Instead of injecting data we can also pass the data as a props. React props is similar to parameters in function. React props is an object which you get instantly when you create a component.
1943 | 
1944 | ```js
1945 | const title = 'Getting Started React'
1946 | const subtitle = 'JavaScript Library'
1947 | const author = {
1948 |   firstName:'Asabeneh',
1949 |   lastName:'Yetayeh'
1950 | }
1951 | const date = 'Feb 10, 2020'
1952 | 
1953 | // Header Component
1954 | const Header = props => (
1955 |   <header>
1956 |     <div className='header-wrapper'>
1957 |       <h1>{props.title}</h1>
1958 |       <h2>{props.subtitle}</h2>
1959 |       <h3>
1960 |         {props.author.firstName} {props.author.lastName}
1961 |       </h3>
1962 |       <p>{props.date}</p>
1963 |     </div>
1964 |   </header>
1965 | )
1966 | 
1967 | // The App, or the parent or the container component
1968 | // Functional Component
1969 | const App = () => (
1970 |   <div className='app'>
1971 |     <Header
1972 |       title={title}
1973 |       subtitle={subtitle}
1974 |       author={author}
1975 |       date={date}
1976 |     />
1977 |     <Main />
1978 |     <Footer />
1979 |   </div>
1980 | )
1981 | ```
1982 | 
1983 | As you can see in the above code, the data passed as props to Header component.
1984 | [Live on code pen](https://codepen.io/Asabeneh/full/abOvEjr)
1985 | 
1986 | ```html
1987 | <!DOCTYPE html>
1988 | <html lang="en">
1989 |   <head>
1990 |     <meta charset="UTF-8" />
1991 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
1992 |     <link
1993 |       href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
1994 |       rel="stylesheet"
1995 |     />
1996 | 
1997 |     <title>React For Everyone</title>
1998 |     <style>
1999 |       /* == General style === */
2000 |       * {
2001 |         box-sizing: border-box;
2002 |         padding: 0;
2003 |         margin: 0;
2004 |       }
2005 | 
2006 |       html,
2007 |       body {
2008 |         height: 100%;
2009 |         line-height: 1.5;
2010 |         font-family: 'Montserrat';
2011 |         font-weight: 300;
2012 |         color: black;
2013 |       }
2014 | 
2015 |       .root {
2016 |         min-height: 100%;
2017 |         position: relative;
2018 |       }
2019 | 
2020 |       .header-wrapper,
2021 |       .main-wrapper,
2022 |       .footer-wrapper {
2023 |         width: 85%;
2024 |         margin: auto;
2025 |       }
2026 | 
2027 |       .header-wrapper,
2028 |       .main-wrapper {
2029 |         padding: 10px;
2030 |         margin: 2px auto;
2031 |       }
2032 | 
2033 |       h1 {
2034 |         font-size: 70px;
2035 |         font-weight: 300;
2036 |       }
2037 | 
2038 |       h2,
2039 |       h3 {
2040 |         font-weight: 300;
2041 |       }
2042 | 
2043 |       header {
2044 |         background-color: #61dbfb;
2045 |         padding: 25;
2046 |         padding: 10px;
2047 |       }
2048 | 
2049 |       main {
2050 |         padding: 10px;
2051 |         padding-bottom: 60px;
2052 |         /* Height of the footer */
2053 |       }
2054 | 
2055 |       ul {
2056 |         margin-left: 15px;
2057 |       }
2058 | 
2059 |       ul li {
2060 |         list-style: none;
2061 |       }
2062 | 
2063 |       footer {
2064 |         position: absolute;
2065 |         bottom: 0;
2066 |         width: 100%;
2067 |         height: 60px;
2068 |         /* Height of the footer */
2069 |         background: #6cf;
2070 |       }
2071 | 
2072 |       .footer-wrapper {
2073 |         font-weight: 400;
2074 |         text-align: center;
2075 |         line-height: 60px;
2076 |       }
2077 |     </style>
2078 |   </head>
2079 | 
2080 |   <body>
2081 |     <div class="root"></div>
2082 | 
2083 |     <script
2084 |       crossorigin
2085 |       src="https://unpkg.com/react@16/umd/react.development.js"
2086 |     ></script>
2087 |     <script
2088 |       crossorigin
2089 |       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
2090 |     ></script>
2091 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2092 |     <script type="text/babel">
2093 |       // To get the root element from the HTML document
2094 |       const rootElement = document.querySelector('.root')
2095 | 
2096 |       const title = 'Getting Started React'
2097 |       const subtitle = 'JavaScript Library'
2098 |       const author = {
2099 |       firstName: 'Asabeneh',
2100 |       lastName: 'Yetayeh'
2101 |       }
2102 |       const date = 'Feb 10, 2020'
2103 |       const copyRight = 'Copyright 2020'
2104 |       const techs = ['HTML', 'CSS', 'JavaScript']
2105 | 
2106 |       // Header Component
2107 |       const Header = props => (
2108 |         <header>
2109 |           <div className='header-wrapper'>
2110 |             <h1>{props.title}</h1>
2111 |             <h2>{props.subtitle}</h2>
2112 |             <h3>
2113 |               {props.author.firstName} {props.author.lastName}
2114 |             </h3>
2115 |             <p>{props.date}</p>
2116 |           </div>
2117 |         </header>
2118 |       )
2119 | 
2120 |       // TechList Component
2121 |       const TechList = props => {
2122 |         const techsFormatted = props.techs.map(tech => (
2123 |           <li key={tech}>{tech}</li>
2124 |         ))
2125 |         return techsFormatted
2126 |       }
2127 | 
2128 |       // Main Component
2129 |       const Main = () => (
2130 |         <main>
2131 |           <div className='main-wrapper'>
2132 |             <p>Prerequisite to get started react.js:</p>
2133 |             <ul>
2134 |               <TechList techs={techs} />
2135 |             </ul>
2136 |           </div>
2137 |         </main>
2138 |       )
2139 | 
2140 |       // Footer Component
2141 |       const Footer = props => (
2142 |         <footer>
2143 |           <div className='footer-wrapper'>
2144 |             <p>{props.copyRight}</p>
2145 |           </div>
2146 |         </footer>
2147 |       )
2148 | 
2149 |       // The App, or the parent or the container component
2150 |       const App = () => (
2151 |         <div className='app'>
2152 |           <Header
2153 |             title={title}
2154 |             subtitle={subtitle}
2155 |             author={author}
2156 |             date={date}
2157 |           />
2158 |           <Main />
2159 |           <Footer copyRight={copyRight} />
2160 |         </div>
2161 |       )
2162 | 
2163 |       // we render the JSX element using the ReactDOM package
2164 |       ReactDOM.render(<App />, rootElement)
2165 |     </script>
2166 |   </body>
2167 | </html>
2168 | ```
2169 | 
2170 | #### propTypes
2171 | 
2172 | So far, we are using CDN. After few lesson, we will use create-react-app to create a react project and we will start using importing packages instead of CDN. We will cover propTypes and defaultProps when we start create-react-app.
2173 | 
2174 | #### defaultProps
2175 | 
2176 | The defaultProps can be used when we want to have some default prop types for a component.
2177 | 
2178 | #### Destructuring props
2179 | 
2180 | Destructuring code to some extent makes easy to read. Let us destructure the props in Header component. Everything we passed a props is stored in props object. Therefore, props is an object and we can destructure the properties.
2181 | 
2182 | ```js
2183 | // Header Component
2184 | const Header = (props) => (
2185 | const {title, subtitle, author, date}  = props
2186 | <header>
2187 |   <div className='header-wrapper'>
2188 |     <h1>{title}</h1>
2189 |     <h2>{subtitle}</h2>
2190 |     <h3>{author.firstName} {author.lastName}</h3>
2191 |     <p>{date}</p>
2192 |   </div>
2193 | </header>
2194 | )
2195 | ```
2196 | 
2197 | Some developer prefer the above destructuring but I and most prefer the following:
2198 | 
2199 | ```js
2200 | // Header Component
2201 | const Header = ({title, subtitle, author, date}) => (
2202 | <header>
2203 |   <div className='header-wrapper'>
2204 |     <h1>{title}</h1>
2205 |     <h2>{subtitle}</h2>
2206 |     <h3>{author.firstName} {author.lastName}</h3>
2207 |     <p>{date}</p>
2208 |   </div>
2209 | </header>
2210 | )
2211 | ```
2212 | 
2213 | Let us destructure all the props in Header, TechList and Footer. See the destructure props in the following file. [Live on code pen](https://codepen.io/Asabeneh/full/RwPWxeG)
2214 | 
2215 | ```html
2216 | <!DOCTYPE html>
2217 | <html lang="en">
2218 | 
2219 | <head>
2220 |   <meta charset="UTF-8" />
2221 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2222 |   <link
2223 |     href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
2224 |     rel="stylesheet" />
2225 | 
2226 |   <title>React For Everyone</title>
2227 |   <style>
2228 |     /* == General style === */
2229 |     * {
2230 |       box-sizing: border-box;
2231 |       padding: 0;
2232 |       margin: 0;
2233 |     }
2234 | 
2235 |     html,
2236 |     body {
2237 |       height: 100%;
2238 |       line-height: 1.5;
2239 |       font-family: 'Montserrat';
2240 |       font-weight: 300;
2241 |       color: black;
2242 |     }
2243 | 
2244 |     .root {
2245 |       min-height: 100%;
2246 |       position: relative;
2247 |     }
2248 | 
2249 |     .header-wrapper,
2250 |     .main-wrapper,
2251 |     .footer-wrapper {
2252 |       width: 85%;
2253 |       margin: auto;
2254 |     }
2255 | 
2256 |     .header-wrapper,
2257 |     .main-wrapper {
2258 |       padding: 10px;
2259 |       margin: 2px auto;
2260 |     }
2261 | 
2262 |     h1 {
2263 |       font-size: 70px;
2264 |       font-weight: 300;
2265 |     }
2266 | 
2267 |     h2,
2268 |     h3 {
2269 |       font-weight: 300;
2270 |     }
2271 | 
2272 |     header {
2273 |       background-color: #61dbfb;
2274 |       padding: 25;
2275 |       padding: 10px;
2276 |     }
2277 | 
2278 |     main {
2279 |       padding: 10px;
2280 |       padding-bottom: 60px;
2281 |       /* Height of the footer */
2282 |     }
2283 | 
2284 |     ul {
2285 |       margin-left: 15px;
2286 |     }
2287 | 
2288 |     ul li {
2289 |       list-style: none;
2290 |     }
2291 | 
2292 |     footer {
2293 |       position: absolute;
2294 |       bottom: 0;
2295 |       width: 100%;
2296 |       height: 60px;
2297 |       /* Height of the footer */
2298 |       background: #6cf;
2299 |     }
2300 | 
2301 |     .footer-wrapper {
2302 |       font-weight: 400;
2303 |       text-align: center;
2304 |       line-height: 60px;
2305 |     }
2306 |   </style>
2307 | </head>
2308 | 
2309 | <body>
2310 |   <div class="root"></div>
2311 | 
2312 |   <script
2313 |     crossorigin
2314 |     src="https://unpkg.com/react@16/umd/react.development.js"></script>
2315 |   <script
2316 |     crossorigin
2317 |     src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2318 |   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2319 |   <script type="text/babel">
2320 |     // To get the root element from the HTML document
2321 | const rootElement = document.querySelector('.root')
2322 | 
2323 | const title = 'Getting Started React'
2324 | const subtitle = 'JavaScript Library'
2325 | const author = {
2326 |  firstName: 'Asabeneh',
2327 |  lastName: 'Yetayeh'
2328 | }
2329 | const date = 'Feb 10, 2020'
2330 | const copyRight = 'Copyright 2020'
2331 | const techs = ['HTML', 'CSS', 'JavaScript']
2332 | 
2333 | // Header Component
2334 | const Header = ({title, subtitle, author, date}) => (
2335 | <header>
2336 |   <div className='header-wrapper'>
2337 |     <h1>{title}</h1>
2338 |     <h2>{subtitle}</h2>
2339 |     <p>{author.firstName} {author.lastName}</p>
2340 |     <p>{date}</p>
2341 |   </div>
2342 | </header>
2343 | )
2344 | 
2345 | 
2346 | // TechList Component
2347 | const TechList = ({techs}) => {
2348 |   const techsFormatted = techs.map(tech => <li key={tech}>{tech}</li>)
2349 |   return techsFormatted
2350 | }
2351 | 
2352 | // Main Component
2353 | const Main = () => (
2354 |   <main>
2355 |     <div className='main-wrapper'>
2356 |       <p>Prerequisite to get started react.js:</p>
2357 |       <ul>
2358 |         <TechList techs = {techs}/>
2359 |       </ul>
2360 |     </div>
2361 |   </main>
2362 | )
2363 | 
2364 | // Footer Component
2365 | const Footer = ({copyRight}) => (
2366 |   <footer>
2367 |     <div className='footer-wrapper'>
2368 |       <p>{copyRight}</p>
2369 |     </div>
2370 |   </footer>
2371 | )
2372 | 
2373 |   // The App, or the parent or the container component
2374 |  const App = () => (
2375 |  <div className='app'>
2376 |    <Header
2377 |      title={title}
2378 |      subtitle={subtitle}
2379 |      author={author}
2380 |      date={date} />
2381 |    <Main />
2382 |    <Footer copyRight = {copyRight} />
2383 |  </div>
2384 |  )
2385 | 
2386 | // we render the JSX element using the ReactDOM package
2387 |   ReactDOM.render(<App />, rootElement)
2388 |     </script>
2389 | </body>
2390 | </html>
2391 | ```
2392 | 
2393 | As you can see, all the variables are declared global but most of the cases your data comes from the parent or container component. Let us move all the data to the parent component which is App. [Live on code pen](https://codepen.io/Asabeneh/full/JjdXMjp)
2394 | 
2395 | ```html
2396 | <!DOCTYPE html>
2397 | <html lang="en">
2398 | 
2399 | <head>
2400 |     <meta charset="UTF-8" />
2401 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2402 |     <link
2403 |         href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
2404 |         rel="stylesheet" />
2405 | 
2406 |     <title>React For Everyone</title>
2407 |     <style>
2408 |         /* == General style === */
2409 |         * {
2410 |             box-sizing: border-box;
2411 |             padding: 0;
2412 |             margin: 0;
2413 |         }
2414 | 
2415 |         html,
2416 |         body {
2417 |             height: 100%;
2418 |             line-height: 1.5;
2419 |             font-family: 'Montserrat';
2420 |             font-weight: 300;
2421 |             color: black;
2422 |         }
2423 | 
2424 |         .root {
2425 |             min-height: 100%;
2426 |             position: relative;
2427 |         }
2428 | 
2429 |         .header-wrapper,
2430 |         .main-wrapper,
2431 |         .footer-wrapper {
2432 |             width: 85%;
2433 |             margin: auto;
2434 |         }
2435 | 
2436 |         .header-wrapper,
2437 |         .main-wrapper {
2438 |             padding: 10px;
2439 |             margin: 2px auto;
2440 |         }
2441 | 
2442 |         h1 {
2443 |             font-size: 70px;
2444 |             font-weight: 300;
2445 |         }
2446 | 
2447 |         h2,
2448 |         h3 {
2449 |             font-weight: 300;
2450 |         }
2451 | 
2452 |         header {
2453 |             background-color: #61dbfb;
2454 |             padding: 25;
2455 |             padding: 10px;
2456 |         }
2457 | 
2458 |         main {
2459 |             padding: 10px;
2460 |             padding-bottom: 60px;
2461 |             /* Height of the footer */
2462 |         }
2463 | 
2464 |         ul {
2465 |             margin-left: 15px;
2466 |         }
2467 | 
2468 |         ul li {
2469 |             list-style: none;
2470 |         }
2471 | 
2472 |         footer {
2473 |             position: absolute;
2474 |             bottom: 0;
2475 |             width: 100%;
2476 |             height: 60px;
2477 |             /* Height of the footer */
2478 |             background: #6cf;
2479 |         }
2480 | 
2481 |         .footer-wrapper {
2482 |             font-weight: 400;
2483 |             text-align: center;
2484 |             line-height: 60px;
2485 |         }
2486 |     </style>
2487 | </head>
2488 | 
2489 | <body>
2490 |     <div class="root"></div>
2491 | 
2492 |     <script
2493 |         crossorigin
2494 |         src="https://unpkg.com/react@16/umd/react.development.js"></script>
2495 |     <script
2496 |         crossorigin
2497 |         src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2498 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2499 |     <script type="text/babel">
2500 |         // To get the root element from the HTML document
2501 | const rootElement = document.querySelector('.root')
2502 | // Header Component
2503 | const Header = ({title, subtitle, author, date}) => (
2504 | <header>
2505 |   <div className='header-wrapper'>
2506 |     <h1>{title}</h1>
2507 |     <h2>{subtitle}</h2>
2508 |     <p>{author.firstName} {author.lastName}</p>
2509 |     <p>{date}</p>
2510 |   </div>
2511 | </header>
2512 | )
2513 | 
2514 | 
2515 | // TechList Component
2516 | const TechList = ({techs}) => {
2517 |   const techsFormatted = techs.map(tech => <li key={tech}>{tech}</li>)
2518 |   return techsFormatted
2519 | }
2520 | 
2521 | // Main Component
2522 | const Main = ({techs}) => {
2523 |     return (
2524 |   <main>
2525 |     <div className='main-wrapper'>
2526 |       <p>Prerequisite to get started react.js:</p>
2527 |       <ul>
2528 |         <TechList techs = {techs}/>
2529 |       </ul>
2530 |     </div>
2531 |   </main>
2532 | )
2533 | }
2534 | 
2535 | // Footer Component
2536 | const Footer = ({copyRight}) => (
2537 |   <footer>
2538 |     <div className='footer-wrapper'>
2539 |       <p>{copyRight}</p>
2540 |     </div>
2541 |   </footer>
2542 | )
2543 | 
2544 |   // The App, or the parent or the container component
2545 |  const App = () => {
2546 |   const title = 'Getting Started React'
2547 |       const subtitle = 'JavaScript Library'
2548 |       const author = {
2549 |       firstName: 'Asabeneh',
2550 |       lastName: 'Yetayeh'
2551 |       }
2552 |       const date = 'Feb 10, 2020'
2553 |       const copyRight = 'Copyright 2020'
2554 |       const techs = ['HTML', 'CSS', 'JavaScript']
2555 | 
2556 |    return (
2557 |  <div className='app'>
2558 |    <Header
2559 |      title={title}
2560 |      subtitle={subtitle}
2561 |      author={author}
2562 |      date={date} />
2563 |    <Main techs = {techs}/>
2564 |    <Footer copyRight = {copyRight} />
2565 |  </div>
2566 |  )
2567 |  }
2568 | 
2569 | // we render the JSX element using the ReactDOM package
2570 |   ReactDOM.render(<App />, rootElement)
2571 |     </script>
2572 | </body>
2573 | 
2574 | </html>
2575 | ```
2576 | 
2577 | ### Props in Class Components
2578 | 
2579 | We access the props object in class full components using the word *this*. [Live on code pen](https://codepen.io/Asabeneh/full/poJNjjV)
2580 | 
2581 | ```html
2582 | <!DOCTYPE html>
2583 | <html lang="en">
2584 | 
2585 | <head>
2586 |     <meta charset="UTF-8" />
2587 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2588 |     <link
2589 |         href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
2590 |         rel="stylesheet" />
2591 | 
2592 |     <title>React For Everyone</title>
2593 |     <style>
2594 |         /* == General style === */
2595 |         * {
2596 |             box-sizing: border-box;
2597 |             padding: 0;
2598 |             margin: 0;
2599 |         }
2600 | 
2601 |         html,
2602 |         body {
2603 |             height: 100%;
2604 |             line-height: 1.5;
2605 |             font-family: 'Montserrat';
2606 |             font-weight: 300;
2607 |             color: black;
2608 |         }
2609 | 
2610 |         .root {
2611 |             min-height: 100%;
2612 |             position: relative;
2613 |         }
2614 | 
2615 |         .header-wrapper,
2616 |         .main-wrapper,
2617 |         .footer-wrapper {
2618 |             width: 85%;
2619 |             margin: auto;
2620 |         }
2621 | 
2622 |         .header-wrapper,
2623 |         .main-wrapper {
2624 |             padding: 10px;
2625 |             margin: 2px auto;
2626 |         }
2627 | 
2628 |         h1 {
2629 |             font-size: 70px;
2630 |             font-weight: 300;
2631 |         }
2632 | 
2633 |         h2,
2634 |         h3 {
2635 |             font-weight: 300;
2636 |         }
2637 | 
2638 |         header {
2639 |             background-color: #61dbfb;
2640 |             padding: 25;
2641 |             padding: 10px;
2642 |         }
2643 | 
2644 |         main {
2645 |             padding: 10px;
2646 |             padding-bottom: 60px;
2647 |             /* Height of the footer */
2648 |         }
2649 | 
2650 |         ul {
2651 |             margin-left: 15px;
2652 |         }
2653 | 
2654 |         ul li {
2655 |             list-style: none;
2656 |         }
2657 | 
2658 |         footer {
2659 |             position: absolute;
2660 |             bottom: 0;
2661 |             width: 100%;
2662 |             height: 60px;
2663 |             /* Height of the footer */
2664 |             background: #6cf;
2665 |         }
2666 | 
2667 |         .footer-wrapper {
2668 |             font-weight: 400;
2669 |             text-align: center;
2670 |             line-height: 60px;
2671 |         }
2672 |     </style>
2673 | </head>
2674 | 
2675 | <body>
2676 |     <div class="root"></div>
2677 | 
2678 |     <script
2679 |         crossorigin
2680 |         src="https://unpkg.com/react@16/umd/react.development.js"></script>
2681 |     <script
2682 |         crossorigin
2683 |         src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2684 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2685 |     <script type="text/babel">
2686 |         // To get the root element from the HTML document
2687 | const rootElement = document.querySelector('.root')
2688 | // Header Component
2689 | class Header  extends React.Component {
2690 |   render () {
2691 |     const {title, subtitle, author, date} = this.props
2692 |     return (
2693 | <header>
2694 |   <div className='header-wrapper'>
2695 |     <h1>{title}</h1>
2696 |     <h2>{subtitle}</h2>
2697 |     <p>{author.firstName} {author.lastName}</p>
2698 |     <p>{date}</p>
2699 |   </div>
2700 | </header>
2701 | )
2702 |   }
2703 | }
2704 | 
2705 | 
2706 | // TechList Component
2707 | class TechList extends React.Component {
2708 |   render () {
2709 |     const techsFormatted = this.props.techs.map(tech => <li key={tech}>{tech}</li>)
2710 |   return techsFormatted
2711 |   }
2712 |   
2713 | }
2714 | 
2715 | // Main Component
2716 | class Main extends React.Component {
2717 |   render () {
2718 |     const {techs} = this.props
2719 |   return (
2720 |   <main>
2721 |     <div className='main-wrapper'>
2722 |       <p>Prerequisite to get started react.js:</p>
2723 |       <ul>
2724 |         <TechList techs = {techs}/>
2725 |       </ul>
2726 |     </div>
2727 |   </main>
2728 | )
2729 |   }
2730 | }
2731 | 
2732 | // Footer Component
2733 | class Footer extends React.Component {
2734 |   render () {
2735 |     const copyRight = this.props
2736 |     return (
2737 |   <footer>
2738 |     <div className='footer-wrapper'>
2739 |       <p>{copyRight}</p>
2740 |     </div>
2741 |   </footer>
2742 | )
2743 |   }
2744 | }
2745 | 
2746 |   // The App, or the parent or the container component
2747 |  class App extends React.Component{
2748 |    render () {
2749 |       const title = 'Getting Started React'
2750 |       const subtitle = 'JavaScript Library'
2751 |       const author = {
2752 |       firstName: 'Asabeneh',
2753 |       lastName: 'Yetayeh'
2754 |       }
2755 |       const date = 'Feb 10, 2020'
2756 |       const copyRight = 'Copyright 2020'
2757 |       const techs = ['HTML', 'CSS', 'JavaScript']
2758 | 
2759 |    return (
2760 |  <div className='app'>
2761 |    <Header
2762 |      title={title}
2763 |      subtitle={subtitle}
2764 |      author={author}
2765 |      date={date} />
2766 |    <Main techs = {techs}/>
2767 |    <Footer copyRight = {copyRight} />
2768 |  </div>
2769 |  )
2770 |    }
2771 |   
2772 |  }
2773 | 
2774 | // we render the JSX element using the ReactDOM package
2775 |   ReactDOM.render(<App />, rootElement)
2776 |     </script>
2777 | </body>
2778 | 
2779 | </html>
2780 | ```
2781 | 
2782 | ### Rendering lists
2783 | 
2784 | Most of the time data is in the form of array or array of objects. To render this array or array of objects most of the time we modify the data using *map*. In the previous section, we have rendered the techs list using map. In this section also we will also see more examples.
2785 | 
2786 | In the following example, you will see how we render a number array, a string array, a countries array and skills array on the browser.
2787 | 
2788 | First let us start with an array of numbers:
2789 | [Live on code pen](https://codepen.io/Asabeneh/full/QWbGbQp)
2790 | 
2791 | ```html
2792 | <!DOCTYPE html>
2793 | <html lang="en">
2794 | 
2795 | <head>
2796 |     <meta charset="UTF-8" />
2797 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2798 |     <link
2799 |         href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
2800 |         rel="stylesheet" />
2801 |     <title>React For Everyone</title>
2802 |     <style>
2803 |         .container {
2804 |             display: flex;
2805 |             flex-direction: column;
2806 |             justify-content: center;
2807 |             align-items: center;
2808 |             font-family: 'Montserrat';
2809 |         }
2810 |     </style>
2811 | </head>
2812 | 
2813 | <body>
2814 |     <div class="root"></div>
2815 | 
2816 |     <script
2817 |         crossorigin
2818 |         src="https://unpkg.com/react@16/umd/react.development.js"></script>
2819 |     <script
2820 |         crossorigin
2821 |         src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2822 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2823 |     <script type="text/babel">
2824 |         // To get the root element from the HTML document
2825 | const rootElement = document.querySelector('.root')
2826 | 
2827 | const App = () => {
2828 |   const numbers = [1, 2, 3, 4, 5]
2829 |   const list = numbers.map((num) => <p key = {num}>{num}</p>)
2830 | 
2831 |         return (
2832 |         <div className = 'container'>
2833 |             <div>
2834 |                 <h1>Numbers List</h1>
2835 |                   {list}
2836 |             </div>
2837 |         </div>
2838 |         )
2839 |       }
2840 | 
2841 |   ReactDOM.render(<App />, rootElement)
2842 |     </script>
2843 | </body>
2844 | 
2845 | </html>
2846 | ```
2847 | 
2848 | Let render more lists
2849 | 
2850 | [Live on code pen](https://codepen.io/Asabeneh/full/XWbNbEY)
2851 | 
2852 | ```html
2853 | <!DOCTYPE html>
2854 | <html lang="en">
2855 | 
2856 | <head>
2857 |     <meta charset="UTF-8" />
2858 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2859 |     <link
2860 |         href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
2861 |         rel="stylesheet" />
2862 |     <title>React For Everyone</title>
2863 |     <style>
2864 |         .container {
2865 |             display: flex;
2866 |             flex-direction: column;
2867 |             justify-content: center;
2868 |             align-items: center;
2869 |             font-family: 'Montserrat';
2870 |         }
2871 |     </style>
2872 | </head>
2873 | 
2874 | <body>
2875 |     <div class="root"></div>
2876 | 
2877 |     <script
2878 |         crossorigin
2879 |         src="https://unpkg.com/react@16/umd/react.development.js"></script>
2880 |     <script
2881 |         crossorigin
2882 |         src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2883 |     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2884 |     <script type="text/babel">
2885 |         // To get the root element from the HTML document
2886 | const rootElement = document.querySelector('.root')
2887 | 
2888 | 
2889 | const App = () => {
2890 |   const numbers = [1, 2, 3, 4, 5]
2891 |   const skills = [['HTML', 10], ['CSS', 7], ['JavaScript', 9], ['React', 8]]
2892 |   const countries = [{name:'Finland', city:'Helsinki'},{name:'Sweden', city:'Stockholm'}, {name:'Denmark', city:'Copenhagen'}, {name:'Norway', city:'Oslo'}]
2893 | 
2894 |   const list = numbers.map((num) => <p key = {num}>{num}</p>)
2895 | 
2896 |   const countryList = countries.map(({name, city}) => <div><p>{name} {city} </p> </div>)
2897 |   
2898 |   const skillsList = skills.map(([tech, level]) => <p key = {tech}> {tech} {' '}
2899 |        {level} </p>)
2900 |       return (
2901 |       <div className = 'container'>
2902 |           <div>
2903 |               <h1>Numbers List</h1>
2904 |                 {list}
2905 |           </div>
2906 |           <div>
2907 |               <h1>Technologies List</h1>
2908 |               {skillsList}
2909 |           </div>
2910 |           <div>
2911 |               <h1>Countries List</h1>
2912 |               {countryList}
2913 |           </div>
2914 |       </div>
2915 |       )
2916 |       }
2917 | 
2918 |   ReactDOM.render(<App />, rootElement)
2919 |     </script>
2920 | </body>
2921 | </html>
2922 | ```
2923 | 
2924 | ![Rendering list](images/rendering_list.png)
2925 | 
2926 | After this, we will use the *create-react-app* package to start a react project. The *create-react-app* is the standard way to create your react project.
2927 | 
2928 | By now you should be familiar with:
2929 | 
2930 | - JSX
2931 | - JSX Element
2932 | - Injected Dynamic data to JSX
2933 | - Babel
2934 | - React Component
2935 | - Props
2936 | - Passing props to components
2937 | - Rendering list
2938 | - Functional Component
2939 | - Class Based Component
2940 | 
2941 | ## Creating a react project
2942 | 
2943 | From now, on we use the *create-react-app* to create react project.
2944 | First check if you have node on your machine by typing *node* on your terminal or windows command prompt.  
2945 | 
2946 | ```sh
2947 | asabeneh $ node -v
2948 | v12.14.0
2949 | ```
2950 | 
2951 | To create the react project you go to any directory you want your project to be and then type the following:
2952 | 
2953 | ```sh
2954 | asabeneh $ nxp create-react-app name-of-your-project
2955 | ```
2956 | 
2957 | After the project is created, write the following command
2958 | 
2959 | ```sh
2960 | asabeneh $ nxp create-react-app name-of-your-project
2961 | asabeneh $ npm start
2962 | ```
2963 | 
2964 | In other way, you can use just create-react-app followed by name of a project by installing create-react-app globally
2965 | 
2966 | ```sh
2967 | asabeneh $ npm install create-react-app -g
2968 | asabeneh $ create-react-app name-of-your-project
2969 | asabeneh $ cd  name-of-your-project
2970 | asabeneh $ npm start
2971 | ```
2972 | 
2973 | Now, let create a react project name react-for-everyone
2974 | 
2975 | ```sh
2976 | asabeneh $ npx create-react-app first-react-app
2977 | asabeneh $ cd  first-react-app
2978 | asabeneh $ npm start
2979 | ```
2980 | 
2981 | Now, your application is running at port 3000.
2982 | 
2983 | Let us open the file on vscode and let us the files and directories.
2984 | 
2985 | ![Create create app files](images/create_react_app_files.png)
2986 | 
2987 | Let us remove the unnecessary files and create components directory, after removing you will left with following structure. All the components goes to the components folder.
2988 | 
2989 | ![Cleaned files](images/create_react_app_file_cleaned.png)
2990 | 
2991 | First modify the App.js file and run the application using npm start will launch the app on the browser. You will get the folder structure in the [*react-starter*](https://github.com/Asabeneh/React-For-Everyone/tree/master/react-starter) folder.
2992 | 
2993 | ![launched](images/cleaned_launched.png)
2994 | 
2995 | Now, lets create Header.js, Main.js, Footer.js component inside the components directory and move all the components we created in the previous section to their corresponding component file. And all the CSS to App.css fille. Finally, you will get this. You will get the code on [first-react-app](https://github.com/Asabeneh/React-For-Everyone/tree/master/first-react-app) folder.
2996 | 
2997 | ![First react app](images/first_react_app.png)
2998 | 
2999 | We developed a very simple react application but this application can be changed to a portfolio or a blog.
3000 | 
3001 | ## Events
3002 | 
3003 | Let us talk about events. Let see first the most common HTML element events:
3004 |      - onclick
3005 |      - ondblclick
3006 |      - onmouseenter
3007 |      - onmousemove
3008 |      - onhover
3009 |      - onkeyup
3010 |      - onkeydown
3011 |      - onkeypress
3012 |      - oninput
3013 |      - onblur
3014 |      - onfocus
3015 |      - onchange
3016 | 
3017 | In react, we can use the same events a bit differently. The HTML events will be camel case in react that means onclick will be onClick and we use the curly bracket to call the function inside the event handler.
3018 | 
3019 | ```js
3020 | const  App = () =>  {
3021 |   return (
3022 |     <div className='App'>
3023 |       <button onClick={() => alert('I am clicked')}>Click me</button>
3024 |     </div>
3025 |   )
3026 | }
3027 | ```
3028 | 
3029 | Now, you attached a click event listener to the button and it should pop up an alert message. It is common to write the function outside the curly bracket. Let us take out and write it outside.
3030 | 
3031 | ```js
3032 | const  App = () =>  {
3033 |   const doSomething = () => {
3034 |     alert('You clicked me. Of course, I am doing something')
3035 |   }
3036 |   return (
3037 |     <div className='App'>
3038 |       <button onClick={doSomething}>Click me</button>
3039 |     </div>
3040 |   )
3041 | }
3042 | ```
3043 | 
3044 | How about if the component is a class based component ? Lets change the above functional component and add event to the button.
3045 | 
3046 | We need the *this* key word to bind the *doSomething* method to the component and the method should be an arrow function to avoid unnecessary steps of bind..
3047 | 
3048 | ```js
3049 | class App extends React.Component {
3050 |   doSomething = () => {
3051 |     alert('You clicked me. Of course, I am doing something')
3052 |   }
3053 |   render() {
3054 |     return (
3055 |       <div className='App'>
3056 |         <Header />
3057 |         <button onClick={this.doSomething}>Click me</button>
3058 |       </div>
3059 |     )
3060 |   }
3061 | }
3062 | ```
3063 | 
3064 | Well done, now you know how to handle event in react and let move on to state. We will cover more events with state.
3065 | 
3066 | With react hooks a functional component can have a state but if we do not react hooks we get state only from class components. We will learn about react hooks in the later section.
3067 | 
3068 | ## State
3069 | 
3070 | What is state ? The English meaning of state is *the particular condition that someone or something is in at a specific time*.
3071 | 
3072 | Let us see some states being something
3073 |      - Are you happy or sad?
3074 |      - Is light on or off ? Is present or absent ?
3075 |      - Is full or empty ?
3076 | 
3077 | State is an object in react which let the component re-render when data changes. We do not directly change or mutate the state but we use the *setState()* method. As you can see below in the state object we have count with initial value 0.  We can access the state object using *this.state* and the property name. See the example below.
3078 | 
3079 | ```js
3080 | class App extends React.Component {
3081 |   // declaring state
3082 |   state = {
3083 |     count: 0
3084 |   }
3085 |   render() {
3086 |     // accessing the state value
3087 |     const count = this.state.count
3088 |     return (
3089 |       <div className='App'>
3090 |         <h1>{count} </h1>
3091 |       </div>
3092 |     )
3093 |   }
3094 | }
3095 | ```
3096 | 
3097 | Now, let add some methods which increase or decrease the value of count by clicking a button. Let us add a button to increase and a button to decrease the value of count. To set the state we use react method *this.setState*. See the example below
3098 | 
3099 | ```js
3100 | class App extends React.Component {
3101 |   // declaring state
3102 |   state = {
3103 |     count: 0
3104 |   }
3105 |   render() {
3106 |     // accessing the state value
3107 |     const count = this.state.count
3108 |     return (
3109 |       <div className='App'>
3110 |         <h1>{count} </h1>
3111 |         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
3112 |           Add One
3113 |         </button>
3114 |       </div>
3115 |     )
3116 |   }
3117 | }
3118 | ```
3119 | 
3120 | If you understand the above example, adding minus one will be easy. Let us add the minus one event.
3121 | 
3122 | ```js
3123 | class App extends React.Component {
3124 |   // declaring state
3125 |   state = {
3126 |     count: 0
3127 |   }
3128 |   render() {
3129 |     // accessing the state value
3130 |     const count = this.state.count
3131 |     return (
3132 |       <div className='App'>
3133 |         <h1>{count} </h1>
3134 | 
3135 |         <div>
3136 |           <button
3137 |             onClick={() => this.setState({ count: this.state.count + 1 })}
3138 |           >
3139 |             Add One
3140 |           </button>{' '}
3141 |           <button
3142 |             onClick={() => this.setState({ count: this.state.count - 1 })}
3143 |           >
3144 |             Minus One
3145 |           </button>
3146 |         </div>
3147 |       </div>
3148 |     )
3149 |   }
3150 | }
3151 | ```
3152 | 
3153 | Both button work well, but we need to re-structure the code well. Let us create separate methods in component. 
3154 | If you want to see it live check it [here][https://codepen.io/Asabeneh/full/JjdWYom]
3155 | 
3156 | ```js
3157 | class App extends React.Component {
3158 |   // declaring state
3159 |   state = {
3160 |     count: 0
3161 |   }
3162 |   // method which add one to the state
3163 | 
3164 |   addOne = () => {
3165 |     this.setState({ count: this.state.count + 1 })
3166 |   }
3167 | 
3168 |   // method which subtract one to the state
3169 |   minusOne = () => {
3170 |     this.setState({ count: this.state.count - 1 })
3171 |   }
3172 |   render() {
3173 |     // accessing the state value
3174 |     const count = this.state.count
3175 |     return (
3176 |       <div className='App'>
3177 |         <h1>{count} </h1>
3178 | 
3179 |         <div>
3180 |           <button className='btn btn-add' onClick={this.addOne}>
3181 |             +1
3182 |           </button>{' '}
3183 |           <button className='btn btn-minus' onClick={this.minusOne}>
3184 |             -1
3185 |           </button>
3186 |         </div>
3187 |       </div>
3188 |     )
3189 |   }
3190 | }
3191 | ```
3192 | 
3193 | Let us do more example about state, in the following example we will develop small application which shows either a dog or cat.
3194 | We can start by setting the initial state with cat then when it is clicked it will show dog and alternatively. We need one method which changes the animal alternatively. See the code below. If you want to see live click [here](https://codepen.io/Asabeneh/full/LYVxKpq).
3195 | 
3196 | ```js
3197 | class App extends React.Component {
3198 |   // declaring state
3199 |   state = {
3200 |     image: 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'
3201 |   }
3202 |   changeAnimal = () => {
3203 |     let dogURL =
3204 |       'https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg'
3205 |     let catURL =
3206 |       'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'
3207 |     let image = this.state.image === catURL ? dogURL : catURL
3208 |     this.setState({ image })
3209 |   }
3210 | 
3211 |   render() {
3212 |     // accessing the state value
3213 |     const count = this.state.count
3214 |     return (
3215 |       <div className='App'>
3216 |         <h1>React for Everyone</h1>
3217 |         <div className='animal'>
3218 |           <img src={this.state.image} alt='animal' />
3219 |         </div>
3220 | 
3221 |         <button onClick={this.changeAnimal} class='btn btn-add'>
3222 |           Change
3223 |         </button>
3224 |       </div>
3225 |     )
3226 |   }
3227 | }
3228 | ```
3229 | 
3230 | I believe now you have a very good understanding of state. After this, we will use state in other sections too because state and props is the core of a react application.
3231 | 
3232 | ## Controlled input
3233 | 
3234 | So far we did not get any data from input field. Now, it is time to learn how to get data from an input field. We need on input field, event listener (onChange) and state to get data from a controlled input. See the example below. The h1 element below the input tag display what we write on the input. Check live [demo](https://codepen.io/Asabeneh/full/OJVpyqm)
3235 | 
3236 | ```js
3237 | class App extends React.Component {
3238 |   // declaring state
3239 |   // initial state
3240 |   state = {
3241 |     firstName: ''
3242 |   }
3243 |   handleChange = e => {
3244 |     const value = e.target.value
3245 |     this.setState({ firstName: value })
3246 |   }
3247 | 
3248 |   render() {
3249 |     // accessing the state value and this value will injected to the input in the value attribute
3250 |     const firstName = this.state.firstName
3251 |     return (
3252 |       <div className='App'>
3253 |         <input
3254 |           type='text'
3255 |           name='firstName'
3256 |           placeholder='First Name'
3257 |           value={firstName}
3258 |           onChange={this.handleChange}
3259 |         />
3260 |         <h1>{this.state.firstName}</h1>
3261 |       </div>
3262 |     )
3263 |   }
3264 | }
3265 | ```
3266 | 
3267 | We usually use form to handle use information. Let us move to form section and make use the form element.
3268 | 
3269 | ## Forms
3270 | 
3271 | Form is used to collect data from user. In this section we will develop a small form which collect user information. Our user is a student. We use a parent form element and certain number of input elements to collect user information. In addition to that we will have event listener for the form (onSubmit) and for the inputs (onChange). See the following example try to see the commonts too. You can also check the live [demo](https://codepen.io/Asabeneh/full/eYNvJda).
3272 | 
3273 | ```js
3274 | class App extends React.Component {
3275 |   // declaring state
3276 |   state = {
3277 |     firstName: '',
3278 |     lastName: '',
3279 |     country: '',
3280 |     title: ''
3281 |   }
3282 |   handleChange = e => {
3283 |     /*
3284 |     // we can get the name and value like this but we can also destructure it from e.target
3285 |     const name = e.target.name
3286 |     const value = e.target.value
3287 |     */
3288 |     const { name, value } = e.target
3289 |     // [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
3290 |     this.setState({ [name]: value })
3291 |   }
3292 |   handleSubmit = e => {
3293 |     // stops the default behavior of form element specifically refreshing of page
3294 |     e.preventDefault()
3295 |     console.log(this.state)
3296 |   }
3297 | 
3298 |   render() {
3299 |     // accessing the state value by destrutcturing the state
3300 |     const { firstName, lastName, title, country } = this.state
3301 |     return (
3302 |       <div className='App'>
3303 |         <h3>Add Student</h3>
3304 |         <form onSubmit={this.handleSubmit}>
3305 |           <div>
3306 |             <input
3307 |               type='text'
3308 |               name='firstName'
3309 |               placeholder='First Name'
3310 |               value={firstName}
3311 |               onChange={this.handleChange}
3312 |             />
3313 |           </div>
3314 |           <div>
3315 |             <input
3316 |               type='text'
3317 |               name='lastName'
3318 |               placeholder='Last Name'
3319 |               value={lastName}
3320 |               onChange={this.handleChange}
3321 |             />
3322 |           </div>
3323 |           <div>
3324 |             <input
3325 |               type='text'
3326 |               name='country'
3327 |               placeholder='Country'
3328 |               value={country}
3329 |               onChange={this.handleChange}
3330 |             />
3331 |           </div>
3332 |           <div>
3333 |             <input
3334 |               type='text'
3335 |               name='title'
3336 |               placeholder='Title'
3337 |               value={title}
3338 |               onChange={this.handleChange}
3339 |             />
3340 |           </div>
3341 | 
3342 |           <button onClick={this.changeAnimal} class='btn btn-success'>
3343 |             Submit
3344 |           </button>
3345 |         </form>
3346 |       </div>
3347 |     )
3348 |   }
3349 | }
3350 | ```
3351 | 
3352 | ## Container and Presentation component
3353 | 
3354 | 
3355 | ## Controlled and uncontrolled inputs
3356 | 
3357 | ## Conditional Rendering
3358 | 
3359 | ### Using if condition
3360 | 
3361 | ### Using ternary operators
3362 | 
3363 | ### Using and operator
3364 | 
3365 | ## Component Life cycles
3366 | 
3367 | ## React Router
3368 | 
3369 | ## React Hooks
3370 | 


--------------------------------------------------------------------------------