React.js xử lý delete Bài tập này sẽ giúp các bạn xóa một mục bất kỳ. Cũng giống như insert và update việc xóa dữ liệu cũng cần tiến hành ở phía client và server. Tạo button xóa dữ liệu Trước tiên ta cần tạo button bên trong file /client/src/App.js như sau: <ul>   {this.state.news.map(item […]

React.js xử lý update Chúng ta tiếp tục bài này với việc cập nhật, thay đổi dữ liệu. Cũng giống như insert, việc cập nhật dữ liệu cũng cần tiến hành ở phía client và server. Tạo button click mở modal Trước tiên ta cần tạo button bên trong file /client/src/App.js như sau: <ul>   […]

React.js xử lý insert Bài trước ta đã biết cách hiển thị nội dung dữ liệu MySQL với Express và Axios. Bài này sẽ hướng dẫn các bạn cách thêm một nội dung vào dữ liệu MySQL bằng React. Sử dụng lại kết quả bài trước Các bạn có thể xem lại bài React.js – […]

React.js MySQL Trước khi bắt đầu bài học này, bạn cần biết về tạo API với Express và cách kết nối server với client của project React đã được giới thiệu ở 2 bài học trước, nếu chưa biết thì bạn cần xem lại nhé, kiên nhẫn chút ^^. Bài toán xử lý dữ liệu […]

React.js server & client Bài học trước ta đã tạo được một API đơn giản, vậy làm sao để sử dụng API này bên trong một project React? Bản thân React được xem như là nơi để xử lý ở phía client, còn API Express sẽ dùng xử lý ở phía server, điều này cũng […]

React.js api Khi làm việc với React, chúng ta sẽ thường có nhu cầu liên kết dữ liệu như MySQL, MongoDB, …, tuy nhiên bản thân React là một Javascript, chỉ thao tác ở phía client, việc liên kết sử lý dữ liệu là không thể. Để giải quyết vấn đề này, chúng ta sẽ […]

React.js project state Tiếp theo bài học trước, bài học này ta sẽ tiến hành thay đổi dữ liệu bằng cách dùng setState, ta lần lượt tiến hành các bước sau: Viết lại /src/App.js theo state. Tiến hành xử lý thay đổi dữ liệu trong component Viết lại /src/App.js theo state. Sử dụng kết quả […]

React.js project props Ở bài học Props- liên kết data trong Component, chúng ta đã biết các xử lý dữ liệu trong component như thế nào rồi, bài học này sẽ giúp các bạn thao tác trong một project thực tế. Tiếp theo bài học trước, để tạo một dữ liệu sử dụng cho project […]

React.js project component Ở bài học trước ta đã biết cách kết nối các dữ liệu trong component của một project React, tiếp tục với bài học này, ta sẽ tiến hành cập nhật (thay đổi) dữ liệu. Nội dung chuẩn bị: Cài đặt để chạy được project React.js, xem lại phần Cài đặt React.js […]

React.js setState với map() Bài học này sẽ giúp các bạn biết cách áp dụng map() vào setState để cập nhật một mục bất kỳ trong một mãng cho trước. Tiếp theo bài trước ta có nội dung sau: <!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> […]

React.js state với map() Bài học này sẽ áp dụng map() vào một state thực tế, mục đích giúp các bạn hình dung rõ hơn việc ứng dụng map() để list ra một danh sách từ dữ liệu ban đầu. Trước tiên ta xét ví dụ sau: <!DOCTYPE html> <html>   <head>     <meta […]

React.js nhúng map() vào JSX Thay vì khai báo một map() tách riêng phần render, ta hoàn toàn có thể sử dụng bên trong cấu trúc JSX của phần render. Ta thực hiện như sau: map() bên ngoài render map() bên trong JSX của render function ListItem(props) { return <li>{props.value}</li>; }; function NumberList(props) { const […]