Phản ứng Bắt đầu
Để sử dụng React trong sản xuất, bạn cần có npm đi kèm với 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 vào tệp HTML của bạn.
Không gian trường học W3
Cách dễ nhất để bắt đầu tạo tệp HTML là Example.com.vn Spaces!
Đây là nơi hoàn hảo để tạo, chỉnh sửa và chia sẻ tác phẩm của bạn với 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 ta viết mã React trong JavaScript và tập lệnh thứ ba, Babel, cho phép chúng ta 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 .
Ví dụ
Bao gồm ba CDN trong tệp HTML của bạn:
<!DOCTYPE html> <html> <head> <script src=" https://unpkg.com/react@18/umd/react.development.js " crossorigin></script> <script src=" https://unpkg.com/react-dom@18/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>; } const container = document.getElementById('mydiv'); const root = ReactDOM.createRoot(container); root.render(<Hello />) </script> </body> </html>Cách sử dụng React này có thể phù hợp với 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 ĐĂNG KÝ
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 đây bạn đã cài đặt create-react-app trên toàn cầu thì bạn nên gỡ cài đặt gói này để đả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 ứ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.
Chạy ứng dụng React
Bây giờ bạn đã sẵn sàng chạy ứng dụng React thực sự đầu tiên của mình!
Chạy lệnh này để di 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ẽ bật lên với Ứng dụng React mới 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:3000 và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 cách nào để thay đổi nội dung?
Nhìn vào thư mục my-react-app và bạn sẽ tìm thấy thư mục src . Bên trong thư mục src có một file tên là App.js , mở nó ra 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 những thay đổi sẽ hiển thị ngay sau khi bạn lưu tệp, bạn không phải tải lại trình duyệt!
Ví dụ
Thay thế tất cả nội dung bên trong <div className="App"> bằng phần tử <h1> .
Xem những 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ụ "Hiển thị phản ứng" để giải thích các khía cạnh khác nhau của React và cách chúng 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 src để chỉ chứa một tệp: index.js . Bạn cũng nên xóa mọi dòng mã không cần thiết bên trong tệp index.js để làm cho chúng trông giống như ví dụ trong công cụ "Show React" bên dưới:
Ví 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/client'; const myFirstElement = <h1>Hello React!</h1> const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myFirstElement);