ReactJS là một thư viện JavaScript dùng trong việc xây dựng giao diện người dùng và được phát triển bởi đội ngũ Facebook. Tới nay, ReactJS đã thu hút hàng triệu lập trình viên trên thế giới. ReactJS thường được dùng bởi Frontend Developer trong thiết kế Web Application một cách nhanh chóng hơn. Vậy để tìm hiểu ReactJS, chúng ta phải tìm hiểu từ đâu? Và cần gì để chạy được ReactJS? Qua bài viết này, các bạn đọc giả sẽ hiểu được cách cài đặt và sử dụng ReactJS một cách đơn giản nhất.
Yêu cầu
- Cài đặt NodeJS phiên bản mới >= 6 (LTS hoặc bản hiện tại – https://nodejs.org/en/download/)
- Cài đặt Visual Studio Code/Sublime Text hoặc WebStorm (tùy chọn)
Cài đặt
Đầu tiên, các bạn phải chắc chắn rằng mình đã cài đặt đúng phiên bản NodeJS và có NPM bằng cách gõ vào cửa sổ Command Prompt/Windows Powershell hay Terminal trên Mac và Linux:
Như ở trên, các bạn cũng đã thấy phiên bản hiện tại của NodeJS là 8.6.0 và như thế là đã đạt tiêu chuẩn của ReactJS, còn NPM khi bạn cài các phiên bản 8.x trở lên thì NPM cũng đã ở phiên bản 5.x. Vì thế các bạn hãy kiểm tra kỹ, tránh tình trạng cài nhầm NPM phiên bản thấp hơn khi xài các thư viện khác khi thư viên đó đòi hỏi 1 phiên bản NodeJS hoặc NPM thấp hơn để có thể chạy ổn định.
Tiếp tục, chúng ta sẽ tiến hành cài đặt ReactJS thông qua Package đã được viết sẵn cho chúng ta bằng cách gõ vào lệnh npm install -g create-react-app và nó sẽ cài đặt như hình bên dưới:
Sau khi cài đặt hoàn tất, các bạn có thể gõ tiếp lệnh theo cú pháp sau:
create-react-app thienanblog
Trong đó thienanblog là tên Folder mà các bạn ấn định nên không cần phải làm theo bài viết. Tuy nhiên với những bạn không rành thì trước mắt cứ làm theo đi đã, để dễ dàng theo dõi bài viết hơn.
Quá trình cài đặt hoàn tất, các bạn cũng sẽ thấy ứng dụng trả về cho chúng ta cách thức để khởi chạy ReactJS như sau:
Tôi sẽ giải thích cho các bạn các cú pháp họ đã đính kèm cho chúng ta:
- npm start : tiến hành khởi tạo Server phát triển để chạy ReactJS trên môi trường Web của NodeJS.
- npm run build : tiến hành xây dựng sản phẩm sau khi hoàn tất giai đoạn phát triển, bao gồm sẽ copy các file tĩnh đi kèm khi các bạn bỏ vào đúng thư mục chỉ định (Các bạn có thể xem chi tiết ở 1 bài viết khác trong Blog này).
- npm test : tiến hành kiểm thử ứng dụng (Dành cho các bạn biết qua về thư viện Tester).
- npm run eject : khi các bạn chạy lệnh này, tool này sẽ không còn tự động hóa mọi vấn đề khi phát triển nữa mà nó sẽ bung ra toàn bộ các config để những bạn nào am hiểu về Webpack hay Babel… có thể config lại theo ý đồ của mình (Không khuyến khích các bạn không rành). Nên nhớ, một khi đã chạy mà quên backup thì “toi” luôn nhé.
Như vậy ở bên trên các bạn cũng đã tìm hiểu qua 1 số lệnh cơ bản của ReactJS rồi, giờ thì chạy thôi nào:
cd thienanblog
npm start
Một cửa sổ sẽ hiện lên và các bạn thấy ReactJS đã chạy rồi đấy:
Xong như vậy là chúng ta đã hoàn tất cách cài đặt ReactJS. Chuyển sang tinh chỉnh một số File nào. Bạn hãy vào trong thư mục src và tìm file App.js như hình:
Sau đó tinh chỉnh lại như sau và save lại:
/// ...
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
</header>
<p className="App-intro">
<ThienanBlog />
</p>
</div>
);
}
}
/// ...
Lập tức màn hình Browser sẽ tự động Reload lại mà không cần bạn phải F5. Đó chính là do NodeJS vẫn đang chạy, nên vì thế nó sẽ nhận biết được khi nào các bạn thay đổi nội dung trong file.
Viết Component đơn giản
Tiếp tục, chúng ta sẽ viết ngay 1 Component đơn giản nhất trong ReactJS bằng cách gõ vào đoạn Code sau:
function ThienanBlog() {
return (
<div>Thienanblog xin chào các bạn độc giả</div>
);
}
Đoạn code trên chắc chắn sẽ có rất nhiều bạn thấy dòng code “quái lạ”… làm thế nào mà có HTML gì đó ở trong đây vậy? Đó chính là JSX đấy các bạn ạ và nó là gì thì từ từ rồi chúng ta sẽ biết, đừng vội nản các bạn nhé. Và nội dung file App.js sẽ như sau:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
function ThienanBlog() {
return (
<div>Thienanblog xin chào các bạn độc giả</div>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
</header>
<p className="App-intro">
<ThienanBlog />
</p>
</div>
);
}
}
export default App;
Sau đó, các bạn save lại và xem lại kết quả của chúng ta:
Lời kết
Như vậy, chúng ta đã tìm hiểu ReactJS và cách cài đặt như thế nào, cũng như đã tự viết ra 1 Component đầu tiên cho mình. Hãy theo từng bước và thử lại nhiều lần ở các vấn đề mà bạn khó hiểu, vì sắp tới chúng ta còn phải tìm hiểu tiếp về Component và JSX các bạn nhé.
