Tạo một component ReactJS đơn giản
Trong bài tập này, mình sẽ tìm hiểu các khái niệm cơ bản của ReactJS, tập trung đặc biệt vào Components và Props. Để bắt đầu, mình sẽ tạo một component đơn giản với mục tiêu là hiển thị thông điệp "Hello React". Hãy theo dõi các bước chi tiết dưới đây để xem làm thế nào chúng ta có thể thực hiện điều này trong một ứng dụng React.
Tạo một component ReactJS đơn giản
Bước 1: Cài đặt Node.js và npm
Đảm bảo bạn đã cài đặt Node.js và npm trên máy tính của mình. Nếu chưa, bạn có thể tải Node.js từ trang web chính thức: https://nodejs.org/
Bước 2: Tạo dự án React
Mở terminal và thực hiện các lệnh sau để tạo một dự án React mới:
npx create-react-app hello-react-app cd hello-react-app
Bước 3: Tạo Component HelloReact
Mở file src/components/HelloReact.js
và thêm nội dung sau:
// src/components/HelloReact.js import React from 'react'; const HelloReact = () => { return ( <div> <p>Hello React </p> <p>Chào mừng bạn đến với freetuts.net </p> </div> ); }; export default HelloReact;
Bước 4: Sử dụng Component trong App
Mở file src/App.js
và sửa nội dung như sau:
// src/App.js import React from 'react'; import HelloReact from './components/HelloReact'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <HelloReact /> </header> </div> ); } export default App;
Bước 5: Chạy ứng dụng
Mở terminal và chạy ứng dụng bằng cách sử dụng lệnh sau:
npm start
Ứng dụng sẽ khởi chạy trên http://localhost:3000, và bạn sẽ thấy một trang web hiển thị "Hello React".
Trong bài tập này, mình đã thành công tạo một component React đơn giản với tên là HelloReact và hiển thị một thông điệp chào đơn giản. Đây chỉ là bước đầu tiên trong việc làm quen với ReactJS, và còn rất nhiều khái niệm thú vị khác để khám phá. Hãy tiếp tục theo dõi các bài tập tiếp theo để nâng cao kỹ năng lập trình React của bạn.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component ReactJS đơn giản
- Tạo một component Greeting trong ReactJS
- Tạo một component PersonList trong ReactJS
- Tạo một component ProductCard trong ReactJS
- Tạo một component Avatar trong ReactJS
- Tạo một component BlogPost bằng ReactJS
- Tạo một component BookList bằng ReactJS
- Tạo một component UserProfile bằng ReactJS
- Tạo một component ProductList bằng ReactJS
- Tạo một component CommentSection bằng ReactJS