React là gì?
React là một thư viện JavaScript được tạo bởi Facebook
React là một thư viện Giao diện người dùng (UI)
React là một công cụ để xây dựng các thành phần giao diện người dùng
Hướng dẫn khởi động nhanh React
Đây là một hướng dẫn bắt đầu nhanh.
Trước khi bắt đầu, bạn nên hiểu cơ bản về:
Để có hướng dẫn đầy đủ:
Bắt đầu Hướng dẫn React ❯Thêm React vào một trang HTML
Hướng dẫn bắt đầu nhanh này sẽ thêm React vào một trang như sau:
Thí dụ
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Babel là gì?
Babel là một trình biên dịch JavaScript có thể dịch các ngôn ngữ đánh dấu hoặc lập trình sang JavaScript.
Với Babel, bạn có thể sử dụng các tính năng mới nhất của JavaScript (ES6 - ECMAScript 2015).
Babel có sẵn cho các chuyển đổi khác nhau. React sử dụng Babel để chuyển đổi JSX thành JavaScript.
Xin lưu ý rằng <script type = "text / babel"> là cần thiết để sử dụng Babel.
JSX là gì?
JSX là viết tắt của J ava S cript X ML.
JSX là một phần mở rộng giống như XML / HTML cho JavaScript.
Thí dụ
const element = <h1>Hello World!</h1>
Như bạn có thể thấy ở trên, JSX không phải là JavaScript hay HTML.
JSX là một phần mở rộng cú pháp XML cho JavaScript cũng đi kèm với toàn bộ sức mạnh của ES6 (ECMAScript 2015).
Cũng giống như HTML, thẻ JSX có thể có tên thẻ, thuộc tính và con. Nếu một thuộc tính được bao bọc trong dấu ngoặc nhọn, giá trị là một biểu thức JavaScript.
Lưu ý rằng JSX không sử dụng dấu ngoặc kép xung quanh chuỗi văn bản HTML.
React DOM Render
Phương thức ReactDom.render () được sử dụng để hiển thị (hiển thị) các phần tử HTML:
Thí dụ
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
Biểu thức JSX
Các biểu thức có thể được sử dụng trong JSX bằng cách đặt chúng trong dấu ngoặc nhọn {} .
Thí dụ
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Phần tử phản ứng
Các ứng dụng React thường được xây dựng xung quanh một phần tử HTML duy nhất .
Các nhà phát triển React thường gọi đây là nút gốc (phần tử gốc):
<div id="root"></div>
Các phần tử React trông như thế này:
const element = <h1>Hello React!</h1>
Các phần tử được hiển thị (hiển thị) bằng phương thức ReactDOM.render ():
ReactDOM.render(element, document.getElementById('root'));
Các phần tử React là bất biến . Chúng không thể được thay đổi.
Cách duy nhất để thay đổi một phần tử React là hiển thị một phần tử mới mỗi lần:
Thí dụ
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Các thành phần React
Các thành phần React là các hàm JavaScript.
Ví dụ này tạo một thành phần React có tên là "Chào mừng":
Thí dụ
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React cũng có thể sử dụng các lớp ES6 để tạo các thành phần.
Ví dụ này tạo một thành phần React có tên là Chào mừng với một phương thức kết xuất :
Thí dụ
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Thuộc tính thành phần React
Ví dụ này tạo một thành phần React có tên "Chào mừng" với các đối số thuộc tính:
Thí dụ
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React cũng có thể sử dụng các lớp ES6 để tạo các thành phần.
Ví dụ này cũng tạo một thành phần React có tên "Chào mừng" với các đối số thuộc tính:
Thí dụ
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
Trình biên dịch JSX
Các ví dụ trên trang này biên dịch JSX trong trình duyệt.
Đối với mã sản xuất, việc biên dịch nên được thực hiện riêng biệt.
Tạo ứng dụng React
Facebook đã tạo Ứng dụng Tạo React với mọi thứ bạn cần để xây dựng một ứng dụng React.
Nó là một máy chủ phát triển sử dụng Webpack để biên dịch các tệp CSS tự động tạo tiền tố React, JSX và ES6.
Ứng dụng Create React sử dụng ESLint để kiểm tra và cảnh báo về những sai sót trong mã.
Để tạo Ứng dụng Tạo React, hãy chạy mã sau trên thiết bị đầu cuối của bạn:
Thí dụ
npx create-react-app react-tutorial
Đảm bảo bạn có Node.js 5.2 trở lên. Nếu không, bạn phải cài đặt npx:
Thí dụ
npm i npx
Khởi động một thư mục từ nơi bạn muốn ứng dụng của mình ở lại:
Thí dụ
C:\Users\myUser>npx create-react-app react-tutorial
Kết quả thành công:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start