Xin chào tất cả mọi người, là một developer, chắc hẳn trong chúng ta, không ai còn xa lạ với ReactJS, một thư viện viết bằng JavaScript được phát triển bởi Facebook rất là hot hiện nay.
Vì vậy, trong bài viết này, mình sẽ hướng dẫn mọi người cách tạo một ứng dụng TodoList đơn giản và nhanh chóng bằng ReactJS cho những người mới học để chúng ta có tầm nhìn tổng quan và hiểu rõ hơn về ReactJS một thư viện đang rất hot hiện nay nhé.
1. ReactJS là gì?
React là một thư viện viết bằng javascript, dùng để xây dựng giao diện người dùng(User Interface – UI). Để phát triển ứng dụng hoàn chỉnh, một mình React Js là không làm được tất cả, bạn sẽ cần thêm:
- Server side language: để xử lý logic và lưu trữ dữ liệu trên server.
- HTML/CSS nếu bạn làm ứng dụng web.
- Objective C: nếu bạn sử dụng React để xây dựng app cho iOS
2. Các thành phần chính trong một ứng dụng ReactJS ?
- Component: Component là nơi render ra các mã html thuần, 1 điều quan trọng khác đó là nó cho phép ta chia nhỏ đoạn code của UI thành những phần độc lập với nhau, với mục đích để tiện cho việc quản lý và tái sử dụng.
- Props: Props là viết tắt của Properties, ta có thể hiểu nó như là những thuộc tính của 1 Component. Nếu coi Component như là đối tượng trong lập trình OOP thì Props giống như là những miêu tả về tính chất, đặc trưng của 1 đối tượng.
- State: State được dùng để biểu diễn trạng thái của Component. Tức là giá trị của State có thể thay đổi được, trái ngược hoàn toàn với Props là 1 giá trị bất biến.
Để không bị chậm trễ vào phần chính nên mình chỉ giới thiệu sơ lại về ReactJS, bạn có thể đọc thêm tại đây nhé.
3. Tạo một ứng dụng nhỏ TodoList với ReactJs ?
Tạo 1 react app:
npx create-react-app my-app cd my-app npm start
Ở đây my-app của mình sẽ là todolist-app
Sau khi chạy lệnh npm start thì sẽ xuất hiện http://localhost:3000/ :
Ở trong phần này, mình sẽ hướng dẫn các bạn cách add 1 task vào list, sau đó hiển thị TodoList nhé. Còn phần edit và delete mình sẽ tiếp tục làm ở phần sau.
Trong file src/index.js các bạn chỉnh lại code thành như sau:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TaskList from './TaskList';
ReactDOM.render(<TaskList />, document.getElementById('root'));
Ở file public/index.html các bạn nhúng thêm bootstrap ở thẻ <head> để giao diện đẹp hơn nhé
