What is ReactJS
React is a Javascript library used to build Single Page Application (SPA) applications quickly. Currently React is one of the 3 most popular Frameworks for the Front-end, with a large community, easy to learn, a lot of work, React is really worth learning.
Today, we will learn through the most basic concepts in React.
Components
This is a very powerful part of React, which helps us to divide the application interface into small parts that can be easily reused, rather than using templates like other frameworks. Currently in the React will have two components using components that function and class components but currently the preferred way is the function components because it is short, easy to check and can easily be used React Hook
- Class Components Declaration
1 2 3 4 5 6 |
<span class="token keyword">class</span> <span class="token class-name">Welcome</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> <span class="token plain-text">Hello, </span><span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- Declaring Function Components
1 2 3 4 |
<span class="token keyword">function</span> <span class="token function">Welcome</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> <span class="token plain-text">Hello, </span><span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- Implement Using Components
1 2 3 4 5 6 7 8 9 10 11 |
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Welcome <span class="token keyword">from</span> <span class="token string">'./Welcome.js'</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token class-name">Welcome</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Khanh <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
JSX – Javascript Syntax Extension
1 2 3 4 5 6 7 8 |
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'Khanh'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> <span class="token plain-text">Hello, </span><span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token punctuation">;</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> element <span class="token punctuation">,</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
This is simply a syntax extension of Javascript. With it you can write Javascript with XML-like tags (XML-like). In essence, tags are actually function calls, which will be transformed in the React code and end up as HTML and Javascript in the DOM tree.
Props & State
These are two types of data in React that everyone learns to know, the basic difference between these two data types is that props will be inherited and are often used to share from parent component to child component. State is private and can only be used inside the component, unlike props, when the state changes its value, the UI will also be rerender.
1. Props
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<span class="token keyword">function</span> <span class="token function">Welcome</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> <span class="token plain-text">Hello, </span><span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token class-name">Welcome</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Sara <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token class-name">Welcome</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Cahal <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token class-name">Welcome</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Edite <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token class-name">App</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">,</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
With props we can change the value passed to the component, so that we can easily reuse the component.
2. State
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<span class="token keyword">class</span> <span class="token class-name">Clock</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> date <span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> timerID <span class="token operator">=</span> <span class="token function">setInterval</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">tick</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">tick</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> date <span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> <span class="token plain-text">Hello, world!</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h2</span> <span class="token punctuation">></span></span> <span class="token plain-text">It is </span><span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> date <span class="token punctuation">.</span> <span class="token function">toLocaleTimeString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token plain-text">.</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h2</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token class-name">Clock</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">,</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
After every second, the state will be changed as UI is changed as well. componentDidMount
is a Lifecycle in React, you can learn more about it here.
Event handling
Event handling in React is very simple with the DOM similar to pure JavaScript
Click event
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="token keyword">function</span> <span class="token function">ActionLink</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">function</span> <span class="token function">handleClick</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> e <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'The link was clicked.'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> # <span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> handleClick <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> Click me </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Render Lists
You can easily pass an array or object to a component and easily render array items.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<span class="token keyword">function</span> <span class="token function">NumberList</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> numbers <span class="token operator">=</span> props <span class="token punctuation">.</span> numbers <span class="token punctuation">;</span> <span class="token keyword">const</span> listItems <span class="token operator">=</span> numbers <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">number <span class="token punctuation">,</span> index</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">key</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> index <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> number <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> listItems <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token class-name">NumberList</span></span> <span class="token attr-name">numbers</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> numbers <span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">,</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Key
When you dynamically create components, each element needs a key property, and this property is unique. During rendering, the components will be disordered, they can also be destroyed or recreated depending on the different algorithms, assigning it a key to identify and ensure that the components are in the correct position. Its layout optimizes rendering.
summary
Recently, there are some basic concepts of React, my article still has many shortcomings, to understand more you can visit the React page to learn more carefully!
Reference article: https://codeaholicguy.com/2016/03/01/hoc-reactjs-trong-15-phut-phan-1/