ReactJS Tutorial. Bài 1: ReactJS và cài đặt môi trường

Ngày 20 tháng 9 năm 2018 | 51 views

Chào anh em, lâu rồi không học cái gì nó hay ho vs bài bản. Toàn lao vào dự án là code ầm ầm vài tháng sau quên sạch vì không hiểu bản chất nên quyết định lần này học bài bản cái reactjs. 

Đầu tiên thì đây không phải là mình dạy hay hướng dẫn về react mà đây là phần chia sẻ những gì mình học được khi tìm hiểu reactJS.
Thứ hai là mình là JavaDev, việc tìm hiểu và học React chỉ là sở thích cá nhân nên có cao thủ nào vào đọc xin chém nhẹ tay. :D

Mình sẽ chia nhỏ seri bài viết thành các bài viết nhỏ như sau:

Bài 1: Giới thiệu ReactJS và cài đặt môi trường
Bài 2: Component
Bài 3: Giới thiệu về JSX
Bài 4: Props
Bài 5: Xử lý sự kiện
Bài 6: Refs
Bài 7: State
Bài 8: Ví dụ và ôn tập
Bài 9: React Form
Bài 10: Xây dựng một ứng dụng CRUD đơn giản (Phần 1)
Bài 11: Xây dựng một ứng dụng CRUD đơn giản (Phần 2)
Bài 12: Xây dựng một ứng dụng CRUD đơn giản (Phần 3)
Bài 13: Deploy ứng dụng lên host free và test thử

 

Lan man vậy đủ rồi, giờ mình sẽ bắt đầu đi vào bài đầu tiên : ReactJS và cài đặt môi trường

1. Giới thiệu ReactJS

Thứ gì sinh ra trong trời đất này thì đều phải có lịch sử nên mình sẽ đi qua lịch sử React một chút:

React được viết bởi 1 cuder tên Jordan Walke một kỹ sư IT của Phê tê bóc (Facebook). Nó được Phê tê bóc giới thiệu chính thức vào năm 2011 và Instagram giới thiệu vào năm 2012. Mặc dù vậy phải đến tháng 5 năm 2013 nó mới chính thức trở thành mã nguồn mở tại JSConf US. Từ đó cộng đồng React ngày một lớn mạnh và phát triển như bây giờ. 

Tóm lại ReactJS là gì?

React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng. Với cá nhân tôi cũng như nhận xét chung của cộng đồng về ReactJS thì nó nhanh, dễ học và vui (Nói vậy chứ khi mình học thì nhiều chỗ hóc nên không thấy vui lắm :v)
React cũng có xu hướng Single Page Application (tức ứng dụng web chỉ là single page). Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM.

2. Cài đặt môi trường

Để cài đặt môi trường thì điều đầu tiên chúng ta cần là server nodejs và npm. Chỉ cần lên trang chủ của nodejs: https://nodejs.org/en/ và down load về rồi cài đặt (Next -> next -> finish :3). Vậy là đã cài xong môi trường nodejs và npm. Để kiểm tra các bạn chỉ cần mở cửa sổ cmd lên gõ thử:

node -v

npm -v

Thấy nó hiện ra version là đã cài thành công. Easy voãi! :))))
À quên, về npm thì nó là cái gì thì vào đây đọc nhé. :D

3. Tạo project đầu tiên
Đã xong môi trường và bây giờ mình sẽ tạo project reactjs đầu tiên (hú hú). Để tạo project reactjs thì mình vào ổ D tạo 1 cái folder tên là StudyReact đi rồi bật cmd lên trỏ đường dẫn tới thư mục StudyReact vừa tạo rồi gõ:

npx create-react-app my-app

Đợi khoảng nửa phút cho nó chạy xong. Gõ lệnh:

cd my-app
npm start

đợi nó chạy xong sẽ tự bật lên trang web localhost:3000 và đây là 1 trang reactjs đầu tiên (Port 3000 là mặc định nhé). Như vậy là done rồi, easy voãi :))))

ReactPropTypes trong ReactJS

Ngày 20 tháng 9 năm 2018

20-09-2018
48