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
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.
- 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:
