ReactJS là gì ?
ReactJS là thư viện nổi tiếng của Javascript được phát minh bởi một kỹ sư của Facebook với hơn 150000
stars trên github, được dùng để xây dựng giao diện người dùng, nó cho phép chúng ta xây dựng các thành phần giao diện có thể được sử dụng lại, khái niệm này được gọi là components. ReactJS được dùng để xây dựng ứng dụng (Single Page Application). Nếu bạn cần xây dựng những web applications lớn thì hãy nghĩ tới việc sử dụng React vì chúng ta có thể thay đổi dữ liệu mà không cần phải reload lại trang, đồng thời việc sử dụng React cũng nhanh, đơn giản, có thể tái sử dụng và dễ dàng mở rộng ứng dụng cùa mình.
Cài đặt
Cách 1:
Để bắt đầu với React đơn giản viết trong file HTML mà không cần cài đặt nhiều chúng ta chỉ cần sử dụng CDN links cần thiết để khởi tạo React.
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/umd/react.development.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script" /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/umd/react-dom.development.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script" /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>/babel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
Cách 2:
Để tạo một môi trường chạy ứng dụng React chúng ta cần cài thêm NodeJS và NPM, để kiểm tra xem cài chưa.
1 2 3 | $ node -v $ npm -v |
Khởi tạo project
1 2 3 | $ npx create-react-app react-basic $ <span class="token builtin class-name">cd</span> react-basic <span class="token operator">&</span> <span class="token function">npm</span> start |
Khi chạy lệnh trên thì lập tức nó sẽ mở cho chúng ta trang khởi tạo dự án với link là http://localhost:3000/.
Cấu trúc thư mục
Cùng điểm qua các thư mục đáng chú ý.
- src: Folder này là nơi chúng ta sẽ viết code tại thư mục này
- public: Chức các file css, js hay các image.
- node_modules: Chứa các module cần thiết để chạy ứng dụng React
- package.json: Chứa các thông tin của các module.
Xây dựng ứng dụng đầu tiên
Lý thuyết cũng nhiều rồi, cùng đi vào thực hành tẹo luôn cho hứng khởi.
Khi bắt đầu chạy React App bạn sẽ thấy dòng chữ Edit src/App.js and save to reload. Thôi thì cứ như lời hướng dẫn vào đây thử sửa code xem sao.
1 2 3 4 5 6 7 8 9 10 11 12 | <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> logo <span class="token keyword">from</span> <span class="token string">'./logo.svg'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'./App.css'</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 operator"><</span>h1<span class="token operator">></span>Hello World<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span> |
Lên browser chúng ta sẽ thấy Hello World đã được in ngay ngắn trên trình duyệt. Có một lưu ý nhỏ là bạn sẽ không cần phải reload lại trình duyệt khi có sự thay đổi trong các file, React sẽ làm việc này thay cho các bạn.
Tìm hiểu những điều cơ bản nhất
Trước tiên thì mình nghĩ mọi người nên bắt đầu với JSX trước để hiểu rõ bản chất.
JSX
JSX là viết tắt của Javascript và XML, như đã nói JSX giúp chúng ta viết code HTML ở trên trong file JS một cách dễ dàng . Có thể nói đây là một phần khá quan trọng của React vì nó hỗ trợ code trở nên dễ đọc và ngắn gọn hơn, bạn có thể thấy được điều đó qua ví dụ sau.
Có sử dụng JSX:
1 2 | <span class="token keyword">const</span> myelement <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span><span class="token constant">I</span>'m using <span class="token constant">JSX</span><span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> |
Không sử dụng JSX
1 2 | <span class="token keyword">const</span> myelement <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'I do not use JSX!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Nhìn qua thôi đã thấy một sự ngắn gọn và đơn giản hơn không hề nhẹ rồi. Mặc dù việc sử dụng JSX này là không hề bắt buộc trong React nhưng mình khuyên các bạn nên sử dụng nó bởi nó giúp code nhìn ngắn gọn dễ hiểu hơn rất nhiều, hơn nữa cú pháp của nó khá giống với HTML thông thường, giúp chúng ta đọc và sửa code cũng dễ dàng hơn.
Cùng điểm qua một vài tính năng cơ bản của JSX trong React.
Nhúng biểu thức Javascript vào JSX
Chúng ta có thể nhúng biểu thức Javasript vào trong cú pháp của JSX bằng việc sử dụng cặp thẻ ngoặc nhọn {}.
1 2 3 | <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'Quang Phu'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> |
Hay chúng ta cũng có thể nhúng được hàm hay object bên trong JSX giả sử như.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">const</span> first_name <span class="token operator">=</span> <span class="token string">'Quang'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> last_name <span class="token operator">=</span> <span class="token string">'Phu'</span> <span class="token keyword">function</span> <span class="token function">testName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> first_name <span class="token operator">+</span> <span class="token string">''</span> <span class="token operator">+</span> last_name<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token function">testName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></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> |
Chỉ định thuộc tính trong JSX
Chúng ta có thể chỉ định thuộc tính trong JSX như với HTML với việc sử dụng dấu ngoặc kép, và có thể sử dụng dấu ngoặc nhọn.
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>div tabIndex<span class="token operator">=</span><span class="token string">"0"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span> |
hay
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>avatarUrl<span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>img<span class="token operator">></span><span class="token punctuation">;</span> |
Chúng ta không được sử dụng cùng lúc cả dấu ngoặc nhọn và dấu ngoặc kép trong cùng một thuộc tính vì như vậy JSX sẽ hiểu nó là một chuỗi chứ không phải biểu thức. Nên dùng dấu ngoặc kép cho chuỗi và dấu ngoặc nhọn cho biểu thức.
Lưu ý : JSX giống với Javascript hơn là HTML nên việc đặt tên cho các thuộc tính sẽ phải ở dạng camelCase .
class sẽ được đặt là className, hay tabindex sẽ thành tabIndex
Cũng tương tự với các event, chúng ta có onclick sẽ viết là onClick
Phần tử con trong JSX
Đối với các thẻ mà không chứa các phần tử con bên trong bạn có thể sử dụng /> thay vì close tag.
1 2 | <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>avatarUrl<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span> |
Trong trường hợp bên trong có nhiều tag
chúng ta phải sử dụng thẻ để bọc chúng bằng một JSX tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token comment">//viết đúng</span> <span class="token comment">//Phải bọc nó bằng một tags</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Hihi<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Viết sai</span> <span class="token comment">//Các phần từ không được bọc</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>hihi<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
React render HTML
Trong React, để hiển thị HTML lên trình duyện chúng ta sử dụng ReactDOM.render().
ReactDOM.render() nhận hai tham số, tham số thứ nhất là code HTML, tham số thứ hai là HTML element.
Giả sử chúng ta muốn in Hello World
trong app element
thì chúng ta định nghĩa như sau:
1 2 | ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>p<span class="token operator">></span>Hello World<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></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">'app'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
React Component
Component giúp chúng ta phân chia giao diện người dùng thành các đoạn code nhỏ và có thể tái sử dụng. Có 2 cách để khởi tạo components là Functional Component và Class Component.
Trước tiên là Function Component.
Function Component
Function Component sẽ trả về cho chúng ta HTML.
1 2 3 4 5 6 | <span class="token keyword">function</span> <span class="token function">Hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// tạo một function component</span> <span class="token keyword">return</span> <span class="token operator"><</span>h2<span class="token operator">></span>Hello World<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></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 operator"><</span>Hello <span class="token operator">/</span><span class="token operator">></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> |
Class Component
Đây là cách viết đầy đủ của một component, khi viết cách này chúng ta sẽ sử dụng được hầu hết các chức năng như state, props…
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">class</span> <span class="token class-name">Hello</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token comment">// định nghĩa class component Hello</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 operator"><</span>h2<span class="token operator">></span>Hello World<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Welcome<span class="token punctuation">;</span> |
Về việc muốn sử dụng kiểu component nào thì: Khi nào bạn muốn làm việc với với các chức năng của component như events
, state
, lifecycles
hay tổ chức các đoạn code theo cấu trúc theo mô hình OOP thì bạn có thể sử dụng class components, còn ngược lại chúng ta có thể sử dụng function component.
Props
Props chính là viết tắt của properties. Props sẽ cho phép chúng ta truyền dữ liệu vào các components, chúng ta có thể truyền dữ liệu từ component này sang component khác, cú pháp của props không khác gì so với các attribute thông thường trong HTML.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">class</span> <span class="token class-name">Car</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 operator"><</span>h1<span class="token operator">></span>Hello <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 operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token comment">// truy cập đến props</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>Car name<span class="token operator">=</span><span class="token string">"Phu"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span> <span class="token comment">// truyền vào props name với giá trị là Phu</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> |
Props có thể là một number, string, object…
Truyền props giữa các component.
Nếu bạn muốn truyền dữ liệu giữa hai component với nhau thì cũng sẽ sử dụng đến props.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">class</span> <span class="token class-name">Person</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 comment">// định nghĩa class component Person</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 operator"><</span>h1<span class="token operator">></span>Xin chao<span class="token punctuation">,</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 operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token comment">// in ra giá trị của props </span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Name</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 comment">// định nghĩa class component Name</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">const</span> name <span class="token operator">=</span> <span class="token string">'Phu'</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"test"</span><span class="token operator">></span> <span class="token operator"><</span>Person name<span class="token operator">=</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token comment">// truyền props name vào class Person</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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 operator"><</span>Name <span class="token operator">/</span><span class="token operator">></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> |
State
State là một object được tích hợp trong React component, được dùng để lưu trữ dữ liệu trong component. Khác với props được sử dụng để truyền dữ liệu từ component này sang component khác thì state lại chỉ tồn tại trong một component. Và điều đặc biệt ở đây là mỗi khi mà state thay đổi thì tự động component đó sẽ re-render lại.
Khởi tạo một state
Để khai báo một state chúng ta sẽ khai báo bên trong phương thức constructor của class component
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">class</span> <span class="token class-name">Name</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 keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'phu'</span><span class="token punctuation">}</span> <span class="token comment">// định nghĩa state</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 operator"><</span>h1<span class="token operator">></span>Hello <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token comment">// gọi state ra</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 operator"><</span>Name <span class="token operator">/</span><span class="token operator">></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> |
Để render ra state mong muốn bạn sử dụng cú pháp this.state.propertyname là được.
Thay đổi giá trị state
Khi làm việc với component việc bạn tương tác với state là điều tất yếu, đặc biệt là sẽ cần đến việc cập nhật state để component có thể re render lại. Chả hạn như khi bạn muốn ấn vào nút button tăng giá trị nào đó lên chả hạn, đây là lúc bạn cập nhật state.
Để thay đổi giá trị state, cú pháp sẽ là
1 2 3 4 | <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> name <span class="token operator">:</span> <span class="token string">'giá trị mới'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Giả sử ta sẽ cập nhật lại giá trị của state.name
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 | <span class="token keyword">class</span> <span class="token class-name">Name</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 keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'phu'</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function-variable function">changeName</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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> name<span class="token operator">:</span> <span class="token string">'thuy'</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 operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>My name is <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"button"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>changeName<span class="token punctuation">}</span><span class="token operator">></span>Change name<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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 operator"><</span>Name <span class="token operator">/</span><span class="token operator">></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> |
Các bạn chạy chương trình lên sẽ thấy state.name sẽ được cập nhật giá trị.
Kết luận
Đây là những khái niệm cơ bản nhất của ReactJS khi chúng ta mới bắt đầu học, nếu có gì góp ý các bạn comment bên dưới cho mình nhận nhé.