├── 2.lifecycle-events-handling.md
├── 4.forms.md
├── 1.component-props-state.md
├── 3.routing-api-handling.md
└── README.md


/2.lifecycle-events-handling.md:
--------------------------------------------------------------------------------
 1 | # Lifecycle | Handling events
 2 | 
 3 | ## Questions
 4 | 
 5 | <br>
 6 | 
 7 | ### 1.  What is the order lifecycles in ReactJS ?
 8 | 
 9 | ### 2.  What is the difference between React's `handling events` vs HTML `handling events`?
10 | 
11 | ### 3.  How to send data from `child` component to its parents?
12 | 
13 | <br>
14 | 
15 | ## Exercises
16 | 
17 | ##### Task 1.
18 | Add another state `time: new Date().toLocaleTimeString()` to component `Home.js`. Create a lifecycle `componentDidMount()` and update the value of new state using `this.setState({ time: new Date().toLocaleTimeString() })` for **an interval of 1 second**. Display the value of new state next to the welcome header as: 'Welcome to Rookies. It is 12:26:48 PM'
19 | 
20 | ##### Task 2.
21 | Add an additional `<button onClick={() => clickGame()}> Clicky Game</button>` in `src/components/Home.js`. Edit the `clickGame()` method in component `Home.js`, with every **3 clicks**, alert the message `Fizz`, with every **5 clicks**, alert the message `Buzz`, with every **15 clicks**, alert the message `FizzBuzz`.
22 | 
23 | [**Hint**] 
24 | 
25 | - Add new state `clickedTime: 0` in component `Home.js`. Every time the `<button>` is clicked, update the value of `clickedTime` to `+1`.
26 | 
27 | - To show the alert. Add `alert("Hello! I am an alert box!!");` to `clickGame()` like the below snippet.
28 | 
29 | ```
30 |   ...
31 |   
32 |   clickGame() {
33 |     ...
34 |     alert("Hello! I am an alert box!!");
35 |   }
36 |   
37 | ```
38 | 


--------------------------------------------------------------------------------
/4.forms.md:
--------------------------------------------------------------------------------
 1 | # Forms
 2 | 
 3 | <br>
 4 | 
 5 | ## Exercises
 6 | 
 7 | ##### Task 1.
 8 | 
 9 | Create a form to add new contact at the end of in component `Contact.js` (Feel free to play around with styling the form). Use `axios.post()` with the url `https://jsonplaceholder.typicode.com/users` and the body is your form's value to make a request. Alert a message '**Success!**' when the request is completed or '**Failed!**' when it is incompleted.
10 | 
11 | Finally, add new record to the `<table>` body.
12 | 
13 | ```js
14 | // JSX
15 | 
16 |    render() {
17 |       return {
18 |          ...
19 |          <form onSubmit={e => this.addNewContact(e)}>
20 |              <label for="name">Name: </label>
21 |              <input type="text" id="name" />
22 | 
23 |              <label for="email">Email: </label>
24 |              <input type="text" id="email" />
25 | 
26 |              <button type="submit">Submit</button>
27 |          </form>
28 |       }
29 |    }
30 | ```
31 | 
32 | ```js
33 | // JS
34 | 
35 |    addNewContact(e) {
36 |       e.preventDefault();
37 |       console.log(e.target.name.value)
38 |       console.log(e.target.email.value)
39 |   }
40 | ```
41 | 
42 | ##### Task 2.
43 | 
44 | Install `react-hook-form` to handle controls of add contact form. Then, using `yup` to add schema validation with following options:
45 | 
46 | ```js
47 | // JS
48 | 
49 | const schema = yup
50 |   .object({
51 |     name: yup.string().required("Please enter name"),
52 |     email: yup.string().email().required("Please enter email"),
53 |   })
54 |   .required();
55 | ```
56 | 


--------------------------------------------------------------------------------
/1.component-props-state.md:
--------------------------------------------------------------------------------
 1 | # Component | Props/State
 2 | 
 3 | ## Questions
 4 | 
 5 | <br>
 6 | 
 7 | ### 1.  What is the diffference between the React's `function` components and `class` components ?
 8 | 
 9 | ### 2.  What is the component `state` ?
10 | 
11 | <br>
12 | 
13 | ## Exercises
14 | 
15 | ##### Task 1.
16 | Using the npm package [create-react-app](https://facebook.github.io/create-react-app/docs/getting-started) create new project named `react-state-example`. 
17 | Inside off the `src` directory create a new directory `components` to store your new components.
18 | Create file `src/components/Home.js` and update the `src/App.js`, as per the code in this gist.
19 | 
20 | ##### Task 2.
21 | Add additional property `bootcamp: 'Rookies'` to the `state` of the root component (`App.js`).
22 | Pass this value as the prop and display it in an additional `<h2>` tag in the `<Home />` component so that it says : 'Welcome to Rookies'
23 | 
24 | ##### Task 3.
25 | Create a new class component `Navbar.js`, which has a `state` with one property `username: 'YOUR NAME'`. Display this value in the `<p>` tag which will be showing in the navbar.
26 | You can use the below snippet for your component elements.
27 | When done, `import` the `Navbar` component in `App.js` component and place it as the first element so that it displays on the top of the page.
28 | 
29 | ```js
30 | // Navbar.js
31 |    <nav id='navbar'>
32 |      <ul>
33 |        <a href="#"><li>Home</li></a>
34 |        <a href="#"><li>Contact</li></a>
35 |        <a href="#"><li>About</li></a>
36 |      </ul>
37 | 
38 |      <div className="nav-details">
39 |        <p className="nav-username"> Bob </p>
40 |      </div>
41 |    </nav>
42 | ```
43 | 
44 | 
45 | ```css
46 | #navbar {
47 |   display: flex;
48 |   align-items: center;
49 |   justify-content: space-between;
50 |   background:  #352275;
51 |   padding: 0px 40px;
52 | }
53 | 
54 | #navbar li {
55 |   list-style: none;
56 |   display: inline-block;
57 |   margin: 0px 40px; 
58 |   font-size: 22px;
59 |   color:white;
60 | }
61 | 
62 | div.nav-details > * {
63 |   display: inline-block;
64 |   color: royalblue;
65 |   font-size: 22px;
66 | }
67 | ```
68 | 


--------------------------------------------------------------------------------
/3.routing-api-handling.md:
--------------------------------------------------------------------------------
  1 | # Routing | API Handlers
  2 | 
  3 | ## Questions
  4 | 
  5 | ### 1.  What is `react-router-dom`? What is its components?
  6 | 
  7 | ### 2.  What is the difference between `axios` and `fetch()`?
  8 | 
  9 | <br>
 10 | 
 11 | ## Exercises
 12 | 
 13 | ##### Task 1.
 14 | Install npm package [swr](https://swr.vercel.app/) and create a new component `Contact.jsx` in `src/components`. Use `useSWR()` to get data from the api `https://jsonplaceholder.typicode.com/users` and display those in the `<table>` tag. You can use the below snippet for your component elements.
 15 | 
 16 | ```js
 17 | // Contact.jsx
 18 |    <div id="contact-container">
 19 |       <h1>Contact List</h1>
 20 |       <table id="table">
 21 |           <thead>
 22 |               <tr>
 23 |                   <th>Id</th>
 24 |                   <th>Name</th>
 25 |                   <th>Email</th>
 26 |               </tr>
 27 |           </thead>
 28 |           <tbody>
 29 |               <tr>
 30 |                   <td>1</td>
 31 |                   <td>ABC</td>
 32 |                   <td>abc@nomail.com</td>
 33 |               </tr>
 34 |               <tr>
 35 |                   <td>2</td>
 36 |                   <td>XYZ</td>
 37 |                   <td>xyz@nomail.com</td>
 38 |               </tr>
 39 |           </tbody>
 40 |       </table>
 41 |   </div>
 42 | ```
 43 | 
 44 | ```css
 45 |    #contact-container {
 46 |        display: flex;
 47 |        flex-direction: column;
 48 |        align-items: center;
 49 |        justify-content: center;
 50 |        padding: 2rem;
 51 |    }
 52 | 
 53 |    #table {
 54 |      border-collapse: separate;
 55 |      border-radius: 10px;
 56 |      border-spacing: 0;
 57 |      box-shadow: 0 0 25px #aaa;
 58 |      margin: 4rem 0;
 59 |      width: 100%;
 60 |    }
 61 | 
 62 |    th {
 63 |      background-color: #fff;
 64 |      font-weight: normal;
 65 |      border-bottom: 1px solid #d1d1d1;
 66 |    }
 67 | 
 68 |    th,
 69 |    td {
 70 |      line-height: 1.5;
 71 |      padding: 0.75em;
 72 |      text-align: center;
 73 |    }
 74 | 
 75 |    td {
 76 |      background-color: white;
 77 |    }
 78 | 
 79 |    td:first-child {
 80 |      font-weight: bold;
 81 |      text-align: left;
 82 |    }
 83 | 
 84 |    tbody tr:nth-child(odd) td {
 85 |      background-color: #f6f6f6;
 86 |    }
 87 | 
 88 |    thead th:first-child {
 89 |        border-top-left-radius: 10px;
 90 |        text-align: left;
 91 |    }
 92 | 
 93 |    thead th:last-child {
 94 |        border-top-right-radius: 10px;
 95 |    }
 96 | 
 97 |    tbody tr:last-child td:first-child {
 98 |      border-bottom-left-radius: 10px;
 99 |    }
100 | 
101 |    tbody tr:last-child td:last-child {
102 |      border-bottom-right-radius: 10px;
103 |    }
104 | 
105 | ```
106 | 
107 | 
108 | 
109 | ##### Task 2.
110 | Install npm package [react-router](https://reactrouter.com/) and update the root component `App.js` as below code:
111 | 
112 | a/ Change the `<a>` tag to `Link` component of `react-router` in component `Navbar.js` so that it can render the correct component for each route.
113 | 
114 | b/ Add **No match route**
115 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React-Basic-Exercise
  2 | 
  3 | ## Component | Props/State
  4 | 
  5 | <br>
  6 | 
  7 | ### 1.  What is the diffference between the React's `function` components and `class` components ?
  8 | 
  9 | ### 2.  What is the component `state` ?
 10 | 
 11 | <br>
 12 | 
 13 | ## Exercise
 14 | 
 15 | ##### Task 1.
 16 | Using the npm package [create-react-app](https://facebook.github.io/create-react-app/docs/getting-started) create new project named `react-state-example`. 
 17 | Inside off the `src` directory create a new directory `components` to store your new components.
 18 | Create file `src/components/Home.js` and update the `src/App.js`, as per the code in this gist.
 19 | 
 20 | ##### Task 2.
 21 | Add additional property `bootcamp: 'Rookies'` to the `state` of the root component (`App.js`).
 22 | Pass this value as the prop and display it in an additional `<h2>` tag in the `<Home />` component so that it says : 'Welcome to Rookies'
 23 | 
 24 | ##### Task 3.
 25 | Create a new class component `Navbar.js`, which has a `state` with one property `username: 'YOUR NAME'`. Display this value in the `<p>` tag which will be showing in the navbar.
 26 | You can use the below snippet for your component elements.
 27 | When done, `import` the `Navbar` component in `App.js` component and place it as the first element so that it displays on the top of the page.
 28 | 
 29 | ```js
 30 | // Navbar.js
 31 |    <nav id='navbar'>
 32 |      <ul>
 33 |        <a href="#"><li>Home</li></a>
 34 |        <a href="#"><li>Contact</li></a>
 35 |        <a href="#"><li>About</li></a>
 36 |      </ul>
 37 | 
 38 |      <div className="nav-details">
 39 |        <p className="nav-username"> Bob </p>
 40 |      </div>
 41 |    </nav>
 42 | ```
 43 | 
 44 | 
 45 | ```css
 46 | #navbar {
 47 |   display: flex;
 48 |   align-items: center;
 49 |   justify-content: space-between;
 50 |   background:  #352275;
 51 |   padding: 0px 40px;
 52 | }
 53 | 
 54 | #navbar li {
 55 |   list-style: none;
 56 |   display: inline-block;
 57 |   margin: 0px 40px; 
 58 |   font-size: 22px;
 59 |   color:white;
 60 | }
 61 | 
 62 | div.nav-details > * {
 63 |   display: inline-block;
 64 |   color: royalblue;
 65 |   font-size: 22px;
 66 | }
 67 | ```
 68 | 
 69 | ## Lifecycle | Handling events
 70 | 
 71 | <br>
 72 | 
 73 | ### 1.  What is the order lifecycles in ReactJS ?
 74 | 
 75 | ### 2.  What is the difference between React's `handling events` vs HTML `handling events`?
 76 | 
 77 | ### 3.  How to send data from `child` component to its parents?
 78 | 
 79 | <br>
 80 | 
 81 | ## Exercise
 82 | 
 83 | ##### Task 1.
 84 | Add another state `time: new Date().toLocaleTimeString()` to component `Home.js`. Create a lifecycle `componentDidMount()` and update the value of new state using `this.setState({ time: new Date().toLocaleTimeString() })` for **an interval of 1 second**. Display the value of new state next to the welcome header as: 'Welcome to Rookies. It is 12:26:48 PM'
 85 | 
 86 | ##### Task 2.
 87 | Add an additional `<button onClick={() => clickGame()}> Clicky Game</button>` in `src/components/Home.js`. Edit the `clickGame()` method in component `Home.js`, with every **3 clicks**, alert the message `Fizz`, with every **5 clicks**, alert the message `Buzz`, with every **15 clicks**, alert the message `FizzBuzz`.
 88 | 
 89 | [**Hint**] 
 90 | 
 91 | - Add new state `clickedTime: 0` in component `Home.js`. Every time the `<button>` is clicked, update the value of `clickedTime` to `+1`.
 92 | 
 93 | - To show the alert. Add `alert("Hello! I am an alert box!!");` to `clickGame()` like the below snippet.
 94 | 
 95 | ```
 96 |   ...
 97 |   
 98 |   clickGame() {
 99 |     ...
100 |     alert("Hello! I am an alert box!!");
101 |   }
102 |   
103 | ```
104 | 
105 | ## Routing | API Handlers
106 | 
107 | <br>
108 | 
109 | ### 1.  What is `react-router-dom`? What is its components?
110 | 
111 | ### 2.  What is the difference between `axios` and `fetch()`?
112 | 
113 | <br>
114 | 
115 | ## Exercise
116 | 
117 | ##### Task 1.
118 | Install npm package [axios](https://www.npmjs.com/package/axios) and create new class component `Contact.js` in `src/components`. Use `axios.get()` to get data from the api `https://jsonplaceholder.typicode.com/users` and display those in the `<table>` tag. You can use the below snippet for your component elements.
119 | 
120 | ```js
121 | // Contact.js
122 |    <table id="table">
123 |      <thead>
124 |        <th>Id</th>
125 |        <th>Name</th>
126 |        <th>Email</th>
127 |      </thead>
128 |      <tbody>
129 |        <tr>
130 |          <td>1</td>
131 |          <td>ABC</td>
132 |          <td>abc@nomail.com</td>
133 |        </tr>
134 |        <tr>
135 |          <td>2</td>
136 |          <td>XYZ</td>
137 |          <td>xyz@nomail.com</td>
138 |        </tr>
139 |      </tbody>
140 |    </table>
141 | ```
142 | 
143 | ```css
144 |    #table {
145 |      border-collapse: separate;
146 |      border-radius: 10px;
147 |      border-spacing: 0;
148 |      box-shadow: 0 0 25px #aaa;
149 |      margin: 4rem 0;
150 |      width: 100%;
151 |    }
152 | 
153 |    th {
154 |      background-color: #fff;
155 |      font-weight: normal;
156 |      border-bottom: 1px solid #d1d1d1;
157 |    }
158 | 
159 |    th,
160 |    td {
161 |      line-height: 1.5;
162 |      padding: 0.75em;
163 |      text-align: center;
164 |    }
165 | 
166 |    td {
167 |      background-color: white;
168 |    }
169 | 
170 |    td:first-child {
171 |      font-weight: bold;
172 |      text-align: left;
173 |    }
174 | 
175 |    tbody tr:nth-child(odd) td {
176 |      background-color: #f6f6f6;
177 |    }
178 | 
179 |    thead th:first-child {
180 |        border-top-left-radius: 10px;
181 |        text-align: left;
182 |    }
183 | 
184 |    thead th:last-child {
185 |        border-top-right-radius: 10px;
186 |    }
187 | 
188 |    tbody tr:last-child td:first-child {
189 |      border-bottom-left-radius: 10px;
190 |    }
191 | 
192 |    tbody tr:last-child td:last-child {
193 |      border-bottom-right-radius: 10px;
194 |    }
195 | 
196 | ```
197 | 
198 | 
199 | 
200 | ##### Task 2.
201 | Install npm package [react-router-dom](https://www.npmjs.com/package/react-router-dom) and update the root component `App.js` as below code:
202 | 
203 | a/ Change the `<a>` tag to `Link` component of `react-router-dom` in component `Navbar.js` so that it can render the correct component for each route.
204 | 
205 | b/ Add [**No match route**](https://reactrouter.com/web/example/no-match)
206 | 
207 | ```js
208 | // App.js
209 |    import React from "react";
210 |    import Navbar from "./components/Navbar";
211 |    import Home from "./components/Home";
212 |    import Contact from "./components/Contact";
213 |    import { BrowserRouter, Switch, Route } from "react-router-dom";
214 | 
215 |    class App extends React.Component {
216 |       render() {
217 |          return (
218 |             <BrowserRouter>
219 |               <div>
220 |                 <Navbar />
221 | 
222 |                 <Switch>
223 |                   <Route exact path="/home">
224 |                     <Home></Home>
225 |                   </Route>
226 |                   <Route exact path="/contact">
227 |                     <Contact></Contact>
228 |                   </Route>
229 |                 </Switch>
230 |               </div>
231 |             </BrowserRouter>
232 |          );
233 |       }
234 |    }
235 | 
236 |    export default App;
237 | ```
238 | 
239 | ## Forms
240 | 
241 | <br>
242 | 
243 | ## Exercises
244 | 
245 | ##### Task 1.
246 | 
247 | Create a form to add new contact at the end of in component `Contact.js` (Feel free to play around with styling the form). Use `axios.post()` with the url `https://jsonplaceholder.typicode.com/users` and the body is your form's value to make a request. Alert a message '**Success!**' when the request is completed or '**Failed!**' when it is incompleted.
248 | 
249 | Finally, add new record to the `<table>` body.
250 | 
251 | ```js
252 | // JSX
253 | 
254 |    render() {
255 |       return {
256 |          ...
257 |          <form onSubmit={e => this.addNewContact(e)}>
258 |              <label for="name">Name: </label>
259 |              <input type="text" id="name" />
260 | 
261 |              <label for="email">Email: </label>
262 |              <input type="text" id="email" />
263 | 
264 |              <button type="submit">Submit</button>
265 |          </form>
266 |       }
267 |    }
268 | ```
269 | 
270 | ```js
271 | // JS
272 | 
273 |    addNewContact(e) {
274 |       e.preventDefault();
275 |       console.log(e.target.name.value)
276 |       console.log(e.target.email.value)
277 |   }
278 | ```
279 | 
280 | ##### Task 2.
281 | 
282 | Install `react-hook-form` to handle controls of add contact form. Then, using `yup` to add schema validation with following options:
283 | 
284 | ```js
285 | // JS
286 | 
287 | const schema = yup
288 |   .object({
289 |     name: yup.string().required("Please enter name"),
290 |     email: yup.string().email().required("Please enter email"),
291 |   })
292 |   .required();
293 | ```
294 | 
295 | ## State Management
296 | 
297 | <br>
298 | 
299 | ### 1.  What is state management for?
300 | 
301 | ### 2.  What is the difference between `Context-Provider` and `Redux`?
302 | 
303 | <br>
304 | 
305 | ## Exercise
306 | 
307 | ##### Task 1.
308 | Create new component `src/components/Login.js` and assign it to a route `/login`. Use HTML form (or [**reactstrap form**](https://reactstrap.github.io/components/form/)) to create a login form with 2 fields `username` and `password` and a submit button.
309 | 
310 | When done, create `users.json` file in `src` with the content below:
311 | 
312 | ```json
313 |    [
314 |        {
315 |            "username": "YOUR_USERNAME",
316 |            "password": "YOUR_PASSWORD" 
317 |        }
318 |    ]
319 | ```
320 | 
321 | ##### Task 2.
322 | Continue to implement the method `handleLogin()` in `Login.js` component after user submit the form. If user login successfully, redirect to `/home` route. 
323 | 
324 | [**Hint**] 
325 | 
326 | - You can use `fetch()` or `axios` to read the list of available users in `users.json` file, then compare that users list with the `username` and `password` from login form using [`.includes()`](https://www.w3schools.com/jsref/jsref_includes_array.asp)). 
327 | 
328 | 


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