React.js list và keys key giúp React xác định item nào được thay đổi, được thêm, hoặc được xóa. key dành cho mỗi phần tử trong list, do đó keys của mỗi phần tử phải là duy nhất. Viết tiếp nội dung bài trước như sau: function NumberList(props) { const numbers = props.numbers; const listItems […]

React.js Array to list Dữ liệu dưới dạng Array, Object làm sao có thể chuyển đổi sang cấu trúc là một danh sách (list) của HTML? nội dung bài học này sẽ giúp các bạn làm được việc đó. Render giá trị Array Để lấy giá trị là một Array, đối với Javascript ta làm […]

React.js render có điều kiện Trong React, chúng ta có thể tạo nhiều component khác nhau, khi đó có thể render bất kỳ component nào ta muốn, bằng cách sử dụng điều kiện tại phần render. Cách sử dụng câu điều kiện (câu điều kiện if else) tại phần render giống như cách sử dụng […]

React.js form kết hợp Bài học này sẽ giúp các bạn biết cách kết hợp xử lý các thành phần trong <form>. React form – 2 thành phần <input /> <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <title>Hello React</title> <script src=”https://unpkg.com/react@16/umd/react.development.js”></script> <script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script> <script src=”https://unpkg.com/@babel/standalone/babel.min.js”></script> </head> <body> <div id=”root”></div> <scripttype=”text/babel”> class ActionButton extends React.Component { […]

React.js form Ta có thể sử dụng các thành phần của form trong trang HTML, tuy nhiên để tận dụng ưu điểm của React, cũng như có thể xử lý dễ dàng với dữ liệu, React chọn cách viết các thành phần form bên trong file Javascript, kỹ thuật này được gọi là “controlled component”. […]

React.js xử lý sự kiện (event) Cách React.js xử lý sự kiện (event) (thật ra là JSX) có khác biệt so với viết HTML thông thường, xem so sánh sau sẽ rõ. Event viết theo HTML Event viết theo JSX <button onclick=”fncName()”> Click me! </button> <button onClick={fncName}> Click me! </button> Thay đổi bên trên khác […]

Component Lifecycle là gì? Một cách chung chung, chúng ta có thể định nghĩa lifecycle như là: sinh ra (birth) – lớn lên (growth) – kết thúc hay là chết (death). Component có thể được viết theo kiểu của vòng đời này như sau: Tạo vòng đời (Mount trên DOM) Cập nhật vòng đời (Updating) […]

React.js setState Bài trước ta đã biết cách viết một State là như thế nào, bài này sẽ giúp các bạn cách cập nhật dữ liệu của component bằng các sử dụng setState. Thay đổi dữ liệu bên trong component với State Muốn thay đổi hay cập nhật nội dung của một State, chúng ta […]

React.js State Như đã đề cập ở bài trước giá trị của Props không thay đổi, chỉ truyền từ component này sang component khác. Tuy nhiên trong thực tế, bản thân component đôi lúc cũng cần xử lý dữ liệu riêng của nó, ví dụ thay đổi thông tin dữ liệu như name, … do […]

React.js Props by Class Trong phiên bảng Javascript ES6, chúng ta có thể chuyển đổi một function sang dạng Class, việc này có nhiều ưu điểm hơn so với cách viết function, thao tác với các object khá tốt, các bạn có thể tìm hiểu thêm tại ES6 – classes. Cấu trúc chuyển đổi function […]

Props – arrow function Hàm mũi tên (arrow function) đã được giới thiệu trong bài ES6 – arrow function, cấu trúc có những vượt trội hơn so với cách sử dụng cũ, sử dụng tham số cũng linh hoạt hơn. Bài học này sẽ giúp các bạn chuyển đổi cách viết một props theo function […]

React.js component xử lý data Bài học trước ta đã biết các xử lý data đơn giản cho một component, bài học này sẽ giúp các bạn hình dung được các dữ liệu được truyền giữa các component như thế nào. Sử dụng lại kết quả ví dụ của bài React.js Component ta có: <!DOCTYPE […]