From e25416d7f14be98c35df31a2f9d789689e699bae Mon Sep 17 00:00:00 2001 From: asabeneh Date: Tue, 13 Oct 2020 06:36:59 +0300 Subject: [PATCH] polishing --- .gitignore | 1 + 03_Day_Setting_Up/03_setting_up.md | 17 +++-- .../04_components.md | 69 +++++++++--------- .../04_components_boilerplate}/.gitignore | 0 .../04_components_boilerplate}/README.md | 0 .../04_components_boilerplate}/package.json | 0 .../public/index.html | 0 .../src/images/asabeneh.jpg | Bin .../src/images/css_logo.png | Bin .../src/images/html_logo.png | Bin .../src/images/js_logo.png | Bin .../src/images/react_logo.png | Bin .../04_components_boilerplate}/src/index.js | 0 .../04_components_boilerplate}/yarn.lock | 0 06_Day_Map_List_Keys/06_map_list_keys.md | 10 +-- .../07_class_components.md | 7 +- .../09_conditional_rendering.md | 4 +- .../10_react_project_folder_structure.md | 7 +- 11_Day_Events/11_events.md | 19 +++-- 12_Day_Forms/12_forms.md | 19 +++-- .../13_uncontrolled_input.md | 9 +++ 21 files changed, 99 insertions(+), 63 deletions(-) rename {04_Day_Component => 04_Day_Components}/04_components.md (74%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/.gitignore (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/README.md (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/package.json (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/public/index.html (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/src/images/asabeneh.jpg (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/src/images/css_logo.png (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/src/images/html_logo.png (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/src/images/js_logo.png (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/src/images/react_logo.png (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/src/index.js (100%) rename {04_Day_Component/04_component_boilerplate => 04_Day_Components/04_components_boilerplate}/yarn.lock (100%) diff --git a/.gitignore b/.gitignore index fa79e16..b3bf425 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ draft.md react-for-everyone.md component.md +14_Day_Component_Life_Cycles diff --git a/03_Day_Setting_Up/03_setting_up.md b/03_Day_Setting_Up/03_setting_up.md index fe6e71f..2df9a17 100644 --- a/03_Day_Setting_Up/03_setting_up.md +++ b/03_Day_Setting_Up/03_setting_up.md @@ -15,7 +15,7 @@ -[<< Day 2](../02_Day_Introduction_to_React/02_introduction_to_react.md) | [Day 4 >>](./04_Day_Component/04_components.md) +[<< Day 2](../02_Day_Introduction_to_React/02_introduction_to_react.md) | [Day 4 >>](../04_Day_Components/04_components.md) ![30 Days of React banner](../images/30_days_of_react_banner_day_3.jpg) @@ -36,6 +36,7 @@ - [Exercises](#exercises) - [Exercises: Level 1](#exercises-level-1) - [Exercises: Level 2](#exercises-level-2) + - [Exercises: Level 3](#exercises-level-3) # Setting Up @@ -747,21 +748,23 @@ The boilerplate code can be found [here](../03/../03_Day_Setting_Up/30-days-of-r 6. How do you create a new React project? 7. What are the files and folders inside a project folder(package.json, package-lock.json or yarn.lock, .gitignore,node_modules and public)? 8. What is your favorite code editor (I believe that it is Visual Studio Code)? -9. Add different Visual Studio Code extensions to imporve your productivity(eg. prettier, ESLint etc). -10. Try to make a different module in a different file and import it to index.js. +9. Add different Visual Studio Code extensions to improve your productivity(eg. prettier, ESLint etc). +10. Try to make a different custom module in a different file and import it to index.js. ## Exercises: Level 2 1. Import and render the following images ![Front end](../images/frontend_technologies.png) -2. Design the following user card. +2. Use h1, p, input and button HTML elements to create the following design using JSX -![User Card](../images/user_card_design_jsx.png) +![News Letter](../images/news_letter_design.png) -3. Use h1, p, input and button HTML elements to create the following design using JSX +## Exercises: Level 3 -![News Letter](../images/news_letter_design.png) +2. Design the following user card. + +![User Card](../images/user_card_design_jsx.png) 🎉 CONGRATULATIONS ! 🎉 diff --git a/04_Day_Component/04_components.md b/04_Day_Components/04_components.md similarity index 74% rename from 04_Day_Component/04_components.md rename to 04_Day_Components/04_components.md index 7a7105a..9f32097 100644 --- a/04_Day_Component/04_components.md +++ b/04_Day_Components/04_components.md @@ -14,7 +14,7 @@ -[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md) +[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_setting_up.md) | [Day 5 >>](../05_Day_Props/05_props.md) ![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg) @@ -28,33 +28,33 @@ - [Injecting data to JSX in React Component](#injecting-data-to-jsx-in-react-component) - [Further on Functional components](#further-on-functional-components) - [Exercises: Components](#exercises-components) - - [Exercises: Level 1](#exercises-level-1) - [Exercises: Level 2](#exercises-level-2) + - [Exercises: Level 3](#exercises-level-3) # Components -A React component is a 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. We use JavaScript functions or classes to make components. If we use a function the component will be a functional component but if we use a class the component will be a class-based component. +A React component is a 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. We use JavaScript functions or classes to make components. If we use a function, the component will be a functional component, but if we use a class, the component will be a class-based component. Components can be: -- Functional Component / Presentational Component / stateless component / Dumb component -- Class Component / Container Component/ State full component / smart component +- Functional Component / Presentational Component / Stateless Component / Dumb Component +- Class Component / Container Component/ Statefull Component / Smart Component -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. +The classification of components above does not work for the latest version of React, but it is good to know the former definition and how the previous versions work. -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 words should be CamelCase, camel with two humps. +So, let us change all the JSX to components. Components in React are JavaScript functions or classes, that return a JSX. Component name must start with an uppercase, and if the name is two words, it should be CamelCase - a camel with two humps. ## Big picture of components -In the previous section, we agree that a website or an application is made of buttons, forms, texts, media objects, header, section, article and footer. If we have a million-dollar button we can use this button all the time instead of creating all over again whenever we need a button the same goes for input fields, forms, header or footer. That is where the power of the component comes. In the following diagram, the header, main and footer are components. Inside the main also there is a user card component and a text section component. All the different colors represent different components. How many colors do you see? We have five components in this diagram. +In the previous section we agreed, that a website or an application is made of buttons, forms, texts, media objects, header, section, article and footer. If we have a million-dollar button, we can use this button all the time, instead of recreating it all over again, whenever we need a button. The same goes for input fields, forms, header or footer. That is where the power of the component comes. In the following diagram, the header, main and footer are components. Inside the main there is also a user card component and a text section component. All the different colors represent different components. How many colors do you see? Each color represent a single component. We have five components in this diagram. ![Components](../images/components_example.png) -Before we jump into React components let's do some functions and class refreshers. +Before we jump into React components, let's do some functions and class refreshers. ## JavaScript function -A JavaScript function could be either a regular function or an arrow function. There is a slight difference between a regular function and an arrow function. +A JavaScript function could be either a regular function or an arrow function. These functions are not exactly the same there is a slight difference between them. ```js const getUserInfo = (firstName, lastName, country, title, skills) => { @@ -71,7 +71,7 @@ console.log( ## JavaScript Class -A class is a blue print of an object. We instantiate a class to create different objects. In addition, we can create children by inheriting all the methods and properties of the parent. +A class is a blueprint of an object. We instantiate a class to create different objects. In addition, we can create children, by inheriting all the methods and properties of the parent. ```js class Parent { @@ -118,7 +118,7 @@ const child = new Child( ) ``` -We covered function and class in brief and React component is made of JavaScript functions or classes. Now, let's make a React component. +We just briefly covered function and class. React component is made of JavaScript functions or classes, so let's make a React component now. ## Creating React Component @@ -189,7 +189,7 @@ const Header = () => ( ### Rendering components -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 . If we pass an attribute, when we call the component name, we call it props(). We will talk about props in its section.[Live on code pen](https://codepen.io/Asabeneh/full/wvaKKEM) +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 . If we pass an attribute, when we call the component name, we call it props(). We will talk about props in another section.[Live on code pen](https://codepen.io/Asabeneh/full/wvaKKEM) Let's render first the _Header_ component. @@ -216,7 +216,7 @@ const rootElement = document.getElementById('root') ReactDOM.render(
, rootElement) ``` -Now, let's create an App component which hold the Header, Main and Footer. Then the App component will be render on the DOM. +Now, let's create an App component , that will wrap the Header, Main and Footer. Then the App component will be render on the DOM. ```js // index.js @@ -292,7 +292,7 @@ ReactDOM.render(, rootElement) ### Injecting data to JSX in React Component -So far, we used static data on the JSX elements now let's pass different data types as 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. +So far, we used static data on the JSX elements. Now let's pass different data types as dynamic data. The dynamic data could be strings, numbers, booleans, arrays or objects. Let us see each of the data types step by step. To inject data to a JSX we use the {} bracket. In this section we inject only strings @@ -438,15 +438,14 @@ ReactDOM.render(, rootElement) ### Further on Functional components -We have transformed all the JSX elements of Day 2 to functional components and by now you are very familiar with components. Let's create more components. What is the smallest size of a component ? A component that -returns only a single HTML as JSX is considered as a small component. A button component or an alert box component or just an input field component. +We have transformed all the JSX elements of Day 2 to functional components, and by now you are very familiar with components. Let's create more components. What is the smallest size of a component? A component that returns only a single HTML as JSX is considered as a small component. A button component or an alert box component, or just an input field component. ```js const Button = () => ``` The _Button_ component is made of a single HTML button element. -Let's style this button using JavaScript style object. All CSS properties should be camelCase to make a JavaScript CSS object. If we pass number without unit as CSS value is considered as px. See the example below. +Let's style this button using JavaScript style object. All CSS properties should be camelCase to make a JavaScript CSS object. If we pass a number without unit as CSS value, it is considered as px. See the example below. ```js const buttonStyles = { @@ -458,7 +457,7 @@ const buttonStyles = { const Button = () => ``` -The Button component is a dumb component because it does not take any parameter and we can not change the action text dynamically. We need to pass props to the button to change the value dynamically. We will see props in the next section. Before we close today's lesson let's make another more functional component which displays a random hexadecimal number. +The Button component is a dumb component, because it does not take any parameters and we cannot change the action text dynamically. We need to pass props to the button, to change the value dynamically. We will see props in the next section. Before we close today's lesson let's make another, more functional component, which displays a random hexadecimal number. ```js import React from 'react' @@ -484,34 +483,32 @@ ReactDOM.render(, rootElement) # Exercises: Components -## Exercises: Level 1 - -1. What is a React Component ? -2. How do you make a React functional component ? -3. What is the difference between a pure JavaScript function and a functional component ? -4. How small is a React component ? -5. Can we make a button or input field component ? -6. Make a reusable Button component -7. Make a reusable InputField component ? -8. Make a reusable alert box component with one div parent element and one p child element of the div(warning alert box, success alert box) +1. What is a React Component? +2. How do you make a React functional component? +3. What is the difference between a pure JavaScript function and a functional component? +4. How small is a React component? +5. Can we make a button or input field component? +6. Make a reusable Button component. +7. Make a reusable InputField component. +8. Make a reusable alert box component with one div parent element and one p child element of the div(warning alert box, success alert box). ## Exercises: Level 2 1. Create functional components and display the following images ![Front end](../images/frontend_technologies.png) -2.Use functional component to design the following user card. - -![User Card](../images/user_card_design_jsx.png) - -3. Use functional component to create the following design +2. Use functional component to create the following design ![News Letter](../images/news_letter_design.png) -4. Use the given hexadecimal color generator in the example to create these random colors +## Exercises: Level 3 + +2.Use functional component to design the following user card. ![Hexadecimal colors](../images/hexadecimal_color_exercise.png) +![User Card](../images/user_card_design_jsx.png) 4. Use the given hexadecimal color generator in the example to create these random colors + 🎉 CONGRATULATIONS ! 🎉 -[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md) +[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_setting_up.md) | [Day 5 >>](../05_Day_Props/05_props.md) diff --git a/04_Day_Component/04_component_boilerplate/.gitignore b/04_Day_Components/04_components_boilerplate/.gitignore similarity index 100% rename from 04_Day_Component/04_component_boilerplate/.gitignore rename to 04_Day_Components/04_components_boilerplate/.gitignore diff --git a/04_Day_Component/04_component_boilerplate/README.md b/04_Day_Components/04_components_boilerplate/README.md similarity index 100% rename from 04_Day_Component/04_component_boilerplate/README.md rename to 04_Day_Components/04_components_boilerplate/README.md diff --git a/04_Day_Component/04_component_boilerplate/package.json b/04_Day_Components/04_components_boilerplate/package.json similarity index 100% rename from 04_Day_Component/04_component_boilerplate/package.json rename to 04_Day_Components/04_components_boilerplate/package.json diff --git a/04_Day_Component/04_component_boilerplate/public/index.html b/04_Day_Components/04_components_boilerplate/public/index.html similarity index 100% rename from 04_Day_Component/04_component_boilerplate/public/index.html rename to 04_Day_Components/04_components_boilerplate/public/index.html diff --git a/04_Day_Component/04_component_boilerplate/src/images/asabeneh.jpg b/04_Day_Components/04_components_boilerplate/src/images/asabeneh.jpg similarity index 100% rename from 04_Day_Component/04_component_boilerplate/src/images/asabeneh.jpg rename to 04_Day_Components/04_components_boilerplate/src/images/asabeneh.jpg diff --git a/04_Day_Component/04_component_boilerplate/src/images/css_logo.png b/04_Day_Components/04_components_boilerplate/src/images/css_logo.png similarity index 100% rename from 04_Day_Component/04_component_boilerplate/src/images/css_logo.png rename to 04_Day_Components/04_components_boilerplate/src/images/css_logo.png diff --git a/04_Day_Component/04_component_boilerplate/src/images/html_logo.png b/04_Day_Components/04_components_boilerplate/src/images/html_logo.png similarity index 100% rename from 04_Day_Component/04_component_boilerplate/src/images/html_logo.png rename to 04_Day_Components/04_components_boilerplate/src/images/html_logo.png diff --git a/04_Day_Component/04_component_boilerplate/src/images/js_logo.png b/04_Day_Components/04_components_boilerplate/src/images/js_logo.png similarity index 100% rename from 04_Day_Component/04_component_boilerplate/src/images/js_logo.png rename to 04_Day_Components/04_components_boilerplate/src/images/js_logo.png diff --git a/04_Day_Component/04_component_boilerplate/src/images/react_logo.png b/04_Day_Components/04_components_boilerplate/src/images/react_logo.png similarity index 100% rename from 04_Day_Component/04_component_boilerplate/src/images/react_logo.png rename to 04_Day_Components/04_components_boilerplate/src/images/react_logo.png diff --git a/04_Day_Component/04_component_boilerplate/src/index.js b/04_Day_Components/04_components_boilerplate/src/index.js similarity index 100% rename from 04_Day_Component/04_component_boilerplate/src/index.js rename to 04_Day_Components/04_components_boilerplate/src/index.js diff --git a/04_Day_Component/04_component_boilerplate/yarn.lock b/04_Day_Components/04_components_boilerplate/yarn.lock similarity index 100% rename from 04_Day_Component/04_component_boilerplate/yarn.lock rename to 04_Day_Components/04_components_boilerplate/yarn.lock diff --git a/06_Day_Map_List_Keys/06_map_list_keys.md b/06_Day_Map_List_Keys/06_map_list_keys.md index 16c1a4b..d486515 100644 --- a/06_Day_Map_List_Keys/06_map_list_keys.md +++ b/06_Day_Map_List_Keys/06_map_list_keys.md @@ -31,13 +31,13 @@ # Mapping arrays -Array is the most frequently used data structure to handle many kind of problems. In React, we use map to modify an array to list of JSX by adding a certain HTML elements to each element of the array. +An array is the most frequently used data structure to handle many kinds of problems. In React, we use map to modify an array to list of JSX by adding a certain HTML elements to each element of an array. ## Mapping and rendering arrays -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. +Most of the time data is in the form of an array or an 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 a map method. In this section, we will see more examples. -In the following examples, you will see how we render a number array, a string array, a countries array and skills array on the browser. +In the following examples, you will see how we render an array of numbers, an array of strings, an array of countries and an array of skills on the browser. ```js import React from 'react' @@ -57,7 +57,7 @@ const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` -If you check the browser, you will see the numbers are attached together in one line. To avoid this, we modify the array and change the array elements to JSX element. See the example below, the array has been modified to a list JSX elements. +If you check the browser, you will see the numbers are attached together in one line. To avoid this, we modify the array and change the array elements to JSX element. See the example below, the array has been modified to a list of JSX elements. ### Mapping array of numbers @@ -183,7 +183,7 @@ ReactDOM.render(, rootElement) ### Key in mapping arrays -Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. Key should be unique. Mostly data has come with an id and we can use id as key. If we do not pass key react raise a warning on the browser. If the data does not have id we have to find a way to create a unique identifier for each elements when we map it. See the following example: +Keys help React to identify items which have changed, added, or removed. Keys should be given to the elements inside the array to give the elements a stable identity. The key should be unique. Mostly data will come with as an id and we can use id as key. If we do not pass key to React during mapping it raises a warning on the browser. If the data does not have an id we have to find a way to create a unique identifier for each element when we map it. See the following example: ```js import React from 'react' diff --git a/07_Day_Class_Components/07_class_components.md b/07_Day_Class_Components/07_class_components.md index d6a7e1a..4fa8c22 100644 --- a/07_Day_Class_Components/07_class_components.md +++ b/07_Day_Class_Components/07_class_components.md @@ -14,7 +14,7 @@ -[<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../07_Day_Class_Components/07_class_components.md) +[<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../08_Day_States/08_states.md) ![30 Days of React banner](../images/30_days_of_react_banner_day_7.jpg) @@ -24,6 +24,7 @@ - [Exercises](#exercises) - [Exercises: Level 1](#exercises-level-1) - [Exercises: Level 2](#exercises-level-2) + - [Exercises: Level 3](#exercises-level-3) # Class Components @@ -833,6 +834,8 @@ In next section, we will cover state which is the heart of React. State allows R Learn more about class based component by changing previous days exercises to class based components +## Exercises: Level 3 + 🎉 CONGRATULATIONS ! 🎉 -[<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../07_Day_Class_Components/07_class_components.md) +[<< Day 6](../06_Day_Map_List_Keys/06_map_list_keys.md) | [Day 8 >>](../08_Day_States/08_states.md) diff --git a/09_Day_Conditional_Rendering/09_conditional_rendering.md b/09_Day_Conditional_Rendering/09_conditional_rendering.md index d3aff0e..0d8bb3f 100644 --- a/09_Day_Conditional_Rendering/09_conditional_rendering.md +++ b/09_Day_Conditional_Rendering/09_conditional_rendering.md @@ -14,7 +14,7 @@ -[<< Day 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_Day_Events/10_events.md) +[<< Day 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md) ![30 Days of React banner](../images/30_days_of_react_banner_day_9.jpg) @@ -777,4 +777,4 @@ Coming 🎉 CONGRATULATIONS ! 🎉 -[<< Day 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_Day_Events/10_events.md) +[<< Day 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md) diff --git a/10_React_Project_Folder_Structure/10_react_project_folder_structure.md b/10_React_Project_Folder_Structure/10_react_project_folder_structure.md index 6aaf9a2..680ff2e 100644 --- a/10_React_Project_Folder_Structure/10_react_project_folder_structure.md +++ b/10_React_Project_Folder_Structure/10_react_project_folder_structure.md @@ -26,6 +26,7 @@ - [Exercises](#exercises) - [Exercises:Level 1](#exerciseslevel-1) - [Exercises:Level 2](#exerciseslevel-2) + - [Exercises: Level 3](#exercises-level-3) # React Project Folder Structure and File Naming @@ -611,7 +612,11 @@ Well done. Time to do some exercises for your brain and muscles. ## Exercises:Level 2 -1. Make a simple a simple portfolio using the components we have created so far. +1. Make a simple portfolio using the components we have created so far. Implement a dark mode by using the function we wrote on day 8 challenge. + +## Exercises: Level 3 + +Coming 🎉 CONGRATULATIONS ! 🎉 diff --git a/11_Day_Events/11_events.md b/11_Day_Events/11_events.md index d4f831f..66b9313 100644 --- a/11_Day_Events/11_events.md +++ b/11_Day_Events/11_events.md @@ -1,5 +1,5 @@
-

30 Days Of React: Statet

+

30 Days Of React: Events

@@ -122,10 +122,6 @@ Let's implement some more mouse and keyboard events. // index.js import React, { Component } from 'react' import ReactDOM from 'react-dom' -/* -_onMouseMove, onMouseEnter, onMouseLeave, onMouseOut, onClick, onKeyDown, onKeyPress, onKeyUp, onCopy, onCut, onDrag, onChange,onBlur,onInput, onSubmit_ - -*/ class App extends Component { state = { @@ -217,6 +213,17 @@ ReactDOM.render(, rootElement) ## Exercises: Level 1 +1. What is an event? +2. What is the different between an HTML element event and React event? +3. Write at least 4 keyboard events? +4. Write at least 8 mouse events? +5. What are the most common mouse and keyboard events? +6. Write an event specific to input element? +7. Write an event specific to form element? +8. Display the coordinate of the view port when a mouse is moving on the body? +9. What is the difference between onInput, onChange and onBlur? +10. Where do we put the onSubmit event ? + ## Exercises: Level 2 Implement the following using onMouseEnter event @@ -225,6 +232,8 @@ Implement the following using onMouseEnter event ## Exercises: Level 3 +Coming + 🎉 CONGRATULATIONS ! 🎉 [<< Day 10](../10_React_Project_Folder_Structure/10_react_project_folder_structure.md) | [Day 12 >>](../12_Day_Forms/12_forms.md) diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md index 5768916..82acb70 100644 --- a/12_Day_Forms/12_forms.md +++ b/12_Day_Forms/12_forms.md @@ -159,6 +159,7 @@ class App extends Component { handleSubmit = (e) => { // stops the default behavior of form element specifically refreshing of page e.preventDefault() + // the is the place where we connect backend api to send the data to the database console.log(this.state) } @@ -334,6 +335,7 @@ class App extends React.Component { file, skills: formattedSkills, } + // the is the place where we connect backend api to send the data to the database console.log(data) } @@ -685,7 +687,7 @@ class App extends Component { file, skills: formattedSkills, } - // the is the place we connect backend api to send the data to the database + // the is the place where we connect backend api to send the data to the database console.log(data) } @@ -889,10 +891,15 @@ ReactDOM.render(, rootElement) 4. What is the importance of htmlFor? 5. Write an input type which is not given in the example if there is? 6. What is a controlled input? -7. How do you bind data in React? The first input field example is data binding in React. -8. What is validation? -9. What is the event type we use to listen when an input changes? -10. What are event types we use to validate an input? +7. What do you need to write a controlled input? +8. What event type do you use to listen changes on an input field? +9. What is the value of a checked checkbox? +10. When do you use onChange, onBlur, onSubmit? +11. What is the purpose of write e.preventDefault() inside the submit handler method? +12. How do you bind data in React? The first input field example is data binding in React. +13. What is validation? +14. What is the event type we use to listen when an input changes? +15. What are event types we use to validate an input? ## Exercises: Level 2 @@ -900,6 +907,8 @@ ReactDOM.render(, rootElement) ## Exercises: Level 3 +Coming + 🎉 CONGRATULATIONS ! 🎉 [<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>]() diff --git a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md index 2ac0fcc..ca2d3b7 100644 --- a/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md +++ b/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md @@ -168,11 +168,20 @@ Most of the time we use controlled input instead of uncontrolled input. In case 3. How do you get a content of a certain HTML element in React ? 4. Why it is not a good idea to touch the DOM directly in React ? 5. What is most frequently used in React ? Controlled or Uncontrolled input. +6. What do you need to write uncontrolled input? +7. Does state require to write uncontrolled input? +8. When do you use uncontrolled input? +9. When do you use controlled input? +10. Do you use a controlled or uncontrolled input to validate form input fields? ## Exercises: Level 2 +coming + ## Exercises: Level 3 +Coming + 🎉 CONGRATULATIONS ! 🎉 [<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>]()