Phản ứng là gì?
React là thư viện JavaScript được tạo bởi Facebook
React là 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 UI
Hướng dẫn bắt đầu nhanh về phản ứng
Đây là một hướng dẫn bắt đầu nhanh.
Trước khi bắt đầu, bạn nên có hiểu biết cơ bản về:
Để có hướng dẫn đầy đủ:
Đi tới Hướng dẫn React của chúng tôi ❯Thêm React vào trang HTML
Hướng dẫn bắt đầu nhanh này sẽ thêm React vào một trang như thế này:
Ví 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à trình biên dịch JavaScript có thể dịch 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 cần có <script type="text/babel"> để 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.
Ví 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 thì giá trị đó là biểu thức JavaScript.
Lưu ý rằng JSX không sử dụng dấu ngoặc kép quanh chuỗi văn bản HTML.
Phản ứng kết xuất DOM
Phương thức ReactDom.render() được sử dụng để hiển thị (hiển thị) các phần tử HTML:
Ví 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 gói chúng trong dấu ngoặc nhọn {} .
Ví 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>
Yếu 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 (root element):
<div id="root"></div>
Các phần tử phản ứng 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 yếu tố phản ứng là bất biến . Chúng không thể thay đổi được.
Cách duy nhất để thay đổi phần tử React là hiển thị phần tử mới mỗi lần:
Ví dụ
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);Thành phần phản ứng
Các thành phần phản ứng là các hàm JavaScript.
Ví dụ này tạo một thành phần React có tên "Chào mừng":
Ví 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 Welcome bằng phương thức kết xuất:
Ví 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 phản ứng
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:
Ví 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:
Ví 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 phải được thực hiện riêng.
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 ứng dụng React.
Đây là một máy chủ phát triển sử dụng Webpack để biên dịch các tệp CSS có tiền tố tự động React, JSX và ES6.
Ứng dụng Create React sử dụng ESLint để kiểm tra và cảnh báo về các lỗi trong mã.
Để tạo Ứng dụng Tạo React, hãy chạy đoạn mã sau trên thiết bị đầu cuối của bạn:
Ví 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:
Ví dụ
npm i npx
Bắt đầu một thư mục từ nơi bạn muốn ứng dụng của mình ở lại:
Ví 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
