Hướng dẫn React
React là một thư viện JavaScript để xây dựng giao diện người dùng.
React được sử dụng để xây dựng các ứng dụng một trang.
React cho phép chúng ta tạo các thành phần UI có thể tái sử dụng.
Bắt đầu học React ngay bây giờ ❯Học bằng các ví dụ
Công cụ "Show React" của chúng tôi giúp bạn dễ dàng trình diễn React. Nó hiển thị cả mã và kết quả.
Thí dụ:
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('root'));
Học bằng bài tập
React Quiz
Kiểm tra kỹ năng React của bạn bằng một bài kiểm tra.
Tạo ứng dụng React
Để học và kiểm tra React, bạn nên thiết lập Môi trường React trên máy tính của mình.
Hướng dẫn này sử dụng create-react-app.
Công create-react-appcụ này là một cách được hỗ trợ chính thức để tạo các ứng dụng React.
Node.js là bắt buộc để sử dụng create-react-app.
Mở thiết bị đầu cuối của bạn trong thư mục bạn muốn tạo ứng dụng của mình.
Chạy lệnh này để tạo một ứng dụng React có tên
my-react-app:
npx create-react-app my-react-app
create-react-app sẽ thiết lập mọi thứ bạn cần để chạy ứng dụng React.
Lưu ý:
Nếu trước đó bạn đã cài đặt create-react-apptoàn cầu, bạn nên gỡ cài đặt gói để đảm bảo npx luôn sử dụng phiên bản mới nhất của
create-react-app. Để gỡ cài đặt, hãy chạy lệnh này npm uninstall -g create-react-app:.
Chạy ứng dụng React
Chạy lệnh này để chuyển đến thư mục my-react-app:
cd my-react-app
Chạy lệnh này để thực thi ứng dụng React
my-react-app:
npm start
Một cửa sổ trình duyệt mới sẽ xuất hiện với Ứng dụng React mới được tạo của bạn! Nếu không, hãy mở trình duyệt của bạn và nhập
localhost:3000vào thanh địa chỉ.
Kết quả:
Bạn sẽ tìm hiểu thêm về điều này create-react-apptrong chương React Get Started .
Những gì bạn nên biết
Trước khi bắt đầu với React.JS, bạn nên có kinh nghiệm trung cấp về:
- HTML
- CSS
- JavaScript
Bạn cũng nên có một số kinh nghiệm với các tính năng JavaScript mới được giới thiệu trong ECMAScript 6 (ES6), bạn sẽ tìm hiểu về chúng trong chương React ES6 .