@ -45,15 +45,12 @@ Prerequisite to get started with React. You should have a good understanding of
- CSS
- JavaScript
If you have the above skills you will enjoy doing react.
React for Everyone contains anything you need to know about react. In every section, it has some exercise and mini-projects and it is recommended to work them.
This 30 Days Of React challenge will help you learn the latest version of React and old version step by step. The topics are broken down into 30 days, where each day contains several topics with easy-to-understand explanations, real-world examples and many hands on exercises.
If you have the above skills you will enjoy doing React. React for Everyone contains anything you need to know about react. In every section, it has some exercises and mini-projects and it is recommended to work on them. This 30 Days Of React challenge will help you learn the latest version of React and the old version step by step. The topics are broken down into 30 days, where each day contains several topics with easy-to-understand explanations, real-world examples and many hands on exercises.
This challenge is designed for beginners and professionals who want to build a web application using React and JavaScript.
### 1. What is React?
React is a JavaScript library for building a reusable user interfaces(UI). It was initially released on May 29, 2013. The current version is 16.13.1 and somehow it is stable. React was created by Facebook. React makes creating UI components very easy.The official React documentation can be found [here](https://reactjs.org/docs/getting-started.html). When we work with react we do not interact directly with the DOM. React has its own way to handle the DOM(Document Object Model). React uses it virtual DOM to make a new change and it update only the element that needs change. Do not directly interact with DOM when you build react application leave that job for the virtual DOM. In this challenge, we will develop 10-15 web applications using React. A web application or a website is made up of buttons, links, forms with different input fields, header, footer, images, links, sections, articles, texts and boxes with different shapes. We use react to make a reusable UI component of a website.
React is a JavaScript library for building a reusable user interface(UI). It was initially released on May 29, 2013. The current version is 16.13.1 and somehow it is stable. React was created by Facebook. React makes creating UI components very easy.The official React documentation can be found [here](https://reactjs.org/docs/getting-started.html). When we work with React we do not interact directly with the DOM. React has its own way to handle the DOM(Document Object Model) manipulation. React uses its virtual DOM to make a new change and it updates only the element that needs change. Do not directly interact with DOM when you build a React Application and leave the DOM manipulation job for the React virtual DOM. In this challenge, we will develop 10-15 web applications using React. A web application or a website is made up of buttons, links, forms with different input fields, header, footer, sections, articles, texts, images, audios, videos and boxes with different shapes. We use react to make a reusable UI component of a website.
To summarize:
@ -68,7 +65,7 @@ To summarize:
### 2. Why React?
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 popularity could be GitHub repository stars, watchers and fork.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 speculate the most popular JavaScript library. You may look at the number of watchers, stars and forks for both React and Vue. These alone will not be a very good measure of popularity but still it tells something. If I have to recommend another JavaScript library next to React would Vue.js.
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 popularity could be GitHub repository stars, watchers and forks.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 shown on the diagram. From the diagram, you can speculate the most popular JavaScript library. You may look at the number of watchers, stars and forks for both React and Vue. These alone will not be a very good measure of popularity but still it tells a little bit about the popularity of the two technologies. If I have to recommend another JavaScript library next to React would Vue.js.
#### React vs Vue popularity in October 2020
@ -98,6 +95,7 @@ Why we choose to use react ? We use react because of the following reasons:
- flexible
- big community and popular
- open source
- High job opportunity
### 3. JSX
@ -105,29 +103,29 @@ JSX stands for JavaScript XML. JSX allows us to write HTML elements with JavaScr
```js
// JSX syntax
// we don't need to use string when we use JSX
// we don't need to use quotes with use JSX
const jsxElement = <h1>I am a JSX element</h1>
const welcome = <h1>Welcome to 30 Days of React Challenge</h1>
const data = <small>Oct 2, 2020</small>
```
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.
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 an HTML element. JSX can allow us to use HTML in JavaScript. The HTML element in the above JSX is _h1_ and _small_.
#### JSX Element
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.
This JSX element has only on HTML element which is h1.
This JSX element has only on HTML element which is _h1_.
```js
const jsxElement = <h1>I am a JSX element</h1> // JS with HTML
const jsxElement = <h>I am a JSX element</h1> // JS with HTML
```
Let's make more JSX elements by declaring new variables name title, message and its content inside h1.
Let's make more JSX elements by declaring a new variable name title and content inside h1.
```js
const title = <h1>Getting Started React</h1>
const title = <h2>Getting Started React</h2>
```
Let us add a subtitle and other contents to the above JSX element by adding additional HTML elements. Every HTML element should be wrapped by an outer HTML element to create a valid JSX element. The name title variable also should be changed to header because our JSX element is containing almost all the header of the application.
@ -136,8 +134,8 @@ Let us add a subtitle and other contents to the above JSX element by adding addi
const header = (
<header>
<h1>Welcome to 30 Days Of React</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
</header>
)
```
@ -148,15 +146,15 @@ Let us keep adding more elements. Additional HTML element to display the author
const header = (
<header>
<h1>Welcome to 30 Days Of React</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
)
```
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.
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.
#### Commenting JSX element
@ -167,10 +165,10 @@ We comment codes for different reasons and it is also go to know how to comment
/*
<header>
<h1>Welcome to 30 Days Of React</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h3>Asabeneh Yetayeh</h3>
<small>Oct 1, 2020</small>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
*/
@ -179,7 +177,7 @@ We comment codes for different reasons and it is also go to know how to comment
#### Rendering JSX Element
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.
To render a JSX element to HTML document, we should first create an index HTML. The index.html is the only HTML file you will have in any React Application. That is why we call that every React Application is a single page application. Let us create an index.html file.
```html
<!DOCTYPE html>
@ -198,7 +196,7 @@ To render a JSX element to HTML document. We should create on index HTML. The in
</html>
```
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.
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 any react code.
```html
<!DOCTYPE html>
@ -219,7 +217,7 @@ As you can see from the above index.html, we have one div with a class root and
</html>
```
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). Open the browser console and you should get an object. If you see an object containing react methods then you managed to link your project with React CND.
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. In order to link React and ReactDOM we attach both packages CDN to the body of index.html. To test if React is linked to the index.html try to check by doing console.log(React). Open the browser console and you should get an object. If you see an object containing React methods then you managed to link your project with React CND and you are ready to use React.
```html
<!DOCTYPE html>
@ -249,9 +247,9 @@ The babel library is linked to our document and now we can make use of it. The n
</html>
```
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.
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 a variable name rootElement. The is the only place we directly interact with DOM.
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).
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).
```html
<!DOCTYPE html>
@ -291,7 +289,7 @@ Now, you knew JSX and JSX element. Let us render the JSX element on the browser,
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. We can render only one on JSX element at a time.
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. Remember, we can render only one on JSX element at a time.
[Live on code pen](https://codepen.io/Asabeneh/full/QWbGWeY).
```html
@ -322,9 +320,9 @@ Let us render more content. To render more content the JSX element should have m
// JSX element
const header = (
<header>
<h1>30 Days Of React Challenge</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
@ -338,7 +336,7 @@ Let us render more content. To render more content the JSX element should have m
</html>
```
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.
@ -369,15 +367,15 @@ const footer = (
)
```
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.
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 or putting them in an array. To include JSX element inside another JSX element we use the curly bracket, {} and call the name of the JSX inside the curly bracket.
```js
// JSX element for the header part of the website
const header = (
<header>
<h1>30 Days Of React Challenge</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
@ -442,11 +440,11 @@ Now, let us put everything together and render it to the browser. [Live on code
// JSX element, header
const header = (
<header>
<h1>30 Days Of React Challenge</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p>
<small>Oct 1, 2020</small>
<small>Oct 2, 2020</small>
</header>
)
@ -481,12 +479,14 @@ Now, let us put everything together and render it to the browser. [Live on code
// we render the JSX element using the ReactDOM package
// ReactDOM has the render method and the render method takes two argument
@ -589,11 +589,11 @@ Now, you know how to use the inline style and how to use className and let us st
const header = (
<headerstyle={headerStyles}>
<divclassName='header-wrapper'>
<h1>30 Days Of React Challenge</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Asabeneh Yetayeh</p>
<small>Oct 1, 2020</small>
<small>Oct 2, 2020</small>
</div>
</header>
)
@ -757,9 +757,9 @@ Instead of style object using regular styling method is more easier than the abo
const header = (
<header>
<divclassName='header-wrapper'>
<h1>30 Days Of React Challenge</h1>
<h1>Getting Started React</h1>
<h2>JavaScript Library</h2>
<h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
<p>Instructor: Asabeneh Yetayeh</p>
<small>Date: Oct 1, 2020</small>
</div>
@ -843,20 +843,20 @@ Instead of style object using regular styling method is more easier than the abo
5. What is babel ?
6. What is a transpiler?
#### Exercises:JSX Elements
#### Exercises:JSX Elements
1. What is JSX element
2. Write your name in JSX element and store it in a name variable
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.
4. Write a footer JSX element
#### Exercises - Inline Style
#### Exercises: Inline Style
1. Create a style object for the main JSX
2. Create a style object for the footer and app JSX
Asabeneh
4 years ago
