Bắt đầu React
Để sử dụng React trong sản xuất, bạn cần npm được bao gồm trong Node.js.
Để có cái nhìn tổng quan về React là gì, bạn có thể viết mã React trực tiếp bằng HTML.
Nhưng để sử dụng React trong sản xuất, bạn cần cài đặt npm và Node.js.
Phản ứng trực tiếp trong HTML
Cách nhanh nhất để bắt đầu học React là viết React trực tiếp trong các tệp HTML của bạn.
W3Schools Spaces
Cách dễ nhất để bắt đầu với việc tạo tệp HTML là W3Schools Spaces!
Đây là nơi hoàn hảo để tạo, chỉnh sửa và chia sẻ công việc của bạn với những người khác!
Bắt đầu bằng cách bao gồm ba tập lệnh, hai tập lệnh đầu tiên cho phép chúng tôi viết mã React trong JavaScripts của chúng tôi và tập lệnh thứ ba, Babel, cho phép chúng tôi viết cú pháp JSX và ES6 trong các trình duyệt cũ hơn.
Bạn sẽ tìm hiểu thêm về JSX trong chương React JSX .
Thí dụ
Bao gồm ba CDN trong tệp HTML của bạn:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Cách sử dụng React này có thể phù hợp cho mục đích thử nghiệm, nhưng để sản xuất, bạn sẽ cần thiết lập môi trường React .
Được chứng nhận!
$ 95 GHI DANH
Thiết lập môi trường phản ứng
Nếu bạn đã cài đặt npx và Node.js, bạn có thể tạo ứng dụng React bằng cách sử dụng create-react-app.
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 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
Nó create-react-appsẽ thiết lập mọi thứ bạn cần để chạy một ứng dụng React.
Chạy ứng dụng React
Bây giờ bạn đã sẵn sàng để chạy ứng dụng React thực đầu tiên của mình!
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 để chạy ứ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ả:
Sửa đổi ứng dụng React
Cho đến nay rất tốt, nhưng làm thế nào để tôi thay đổi nội dung?
Nhìn vào thư mục my-react-app, và bạn sẽ tìm thấy một
srcthư mục. Bên trong
srcthư mục có một tập tin được gọi là
App.js, hãy mở nó và nó sẽ trông như thế này:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Hãy thử thay đổi nội dung HTML và lưu tệp.
Lưu ý rằng các thay đổi có thể nhìn thấy ngay sau khi bạn lưu tệp, bạn không phải tải lại trình duyệt!
Thí dụ
Thay thế tất cả nội dung bên trong <div className="App">bằng một
<h1>phần tử.
Xem các thay đổi trong trình duyệt khi bạn nhấp vào Lưu.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Lưu ý rằng chúng tôi đã xóa các mục nhập mà chúng tôi không cần (logo.svg và App.css).
Kết quả:
Cái gì tiếp theo?
Bây giờ bạn đã có Môi trường React trên máy tính của mình và bạn đã sẵn sàng tìm hiểu thêm về React.
Trong phần còn lại của hướng dẫn này, chúng tôi sẽ sử dụng công cụ "Show React" để giải thích các khía cạnh khác nhau của React và cách chúng được hiển thị trong trình duyệt.
Nếu bạn muốn làm theo các bước tương tự trên máy tính của mình, hãy bắt đầu bằng cách loại bỏ thư mục để chỉ srcchứa một tệp:. index.jsBạn cũng nên xóa mọi dòng mã không cần thiết bên trong index.js
tệp để làm cho chúng trông giống như ví dụ trong công cụ "Show React" bên dưới:
Thí dụ
Nhấp vào nút "Chạy Ví dụ" để xem kết quả.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));