Hướng Dẫn Tạo Chương Trình Hello World với ReactJS
React là một thư viện được đánh giá là rất linh hoạt và có thể được sử dụng trong một loạt các dự án. Bạn có thể sử dụng React để viết các ứng dụng mới. Với các dự án đang được phát trển mà chưa dùng React thì bạn vẫn hoàn toàn có thể đưa React vào sử dụng trong app hiện có mà không cần phải chỉnh ...
React là một thư viện được đánh giá là rất linh hoạt và có thể được sử dụng trong một loạt các dự án. Bạn có thể sử dụng React để viết các ứng dụng mới. Với các dự án đang được phát trển mà chưa dùng React thì bạn vẫn hoàn toàn có thể đưa React vào sử dụng trong app hiện có mà không cần phải chỉnh sửa quá nhiều source code. Bài viết này sẽ hướng dẫn các bạn cách tạo ứng dụng Hello World sử dụng ReactJS.
Cài Đặt NPM
Bạn nên sử dụng NPM (Node Package Manager) hoặc Yarn để quản lý các thư viện được dùng trong dự án (hay còn gọi là dependency). Cả NPM và Yarn đều là các package manager được dùng phổ biến hiện nay.
Bạn có thể tham khảo thêm bài viết giới thiệu về Node Package Manager để biết cách cách đặt và sử dụng NPM. Ngoài ra bạn cũng có thể tham khảo thêm bài viết hướng dẫn cài đặt và sử dụng Yarn nếu như bạn muốn sử dụng công cụ này thay vì NPM.
Cài Đặt React
Trước tiên chúng ta sẽ tạo một thư mục mới trên máy để chứa source code ứng dụng. Thư mục này sẽ được gọi là thư mục ứng dụng. Mở cửa sổ dòng lệnh và di chuyển tới địa chỉ của thư mục nào đó trên máy (thư mục này sẽ chứa thư mục ứng dụng) và chạy 2 câu lệnh sau:
$ mkdir hello_react $ cd hello_react
Để cài đặt React với NPM, bạn chạy câu lệnh sau:
$ npm init $ npm install --save react react-dom
Để cài đặt React với Yarn, bạn chạy câu lệnh sau:
$ yarn init $ yarn add react react-dom
Sử Dụng ES6
Bạn có thể hiểu một cách đơn giản ES6 như là một phiên bản mới của JavaScript. Trên thực tế thì ES6 là một tiêu chuẩn bao gồm tập hợp các quy luật viết code dành cho không chỉ JavaScript mà các ngôn ngữ kịch bản khác.
Tuy nhiên, các trình duyệt hiện nay chưa hỗ trợ đầy đủ các tính năng của ES6. Để có thể sử dụng ES6 trong khi lập trình chúng ta cần thêm một công cụ thứ 3 chuyển đổi code JavaScript viết theo ES6 về code JavaScript thông thường được hỗ trợ bởi các trình duyệt. Babel là công cụ được khuyên dùng để thực hiện công việc này.
Để cài đặt công cụ babel-cli trên máy chúng ta chạy câu lệnh sau:
$ npm install -g babel-cli
Nếu muốn cài đặt Babel để sử dụng trong phạm vi của dự án thì bạn có thể chạy câu lệnh sau:
$ npm install --save-dev babel-cli
Lưu ý: Trường hợp cài đặt Babel là một mô-đun của của dự án thì khi sử dụng trên cửa sổ dòng lệnh bạn cần tham chiếu tới thư tập tin ./node_modules/.bin/babel.
Babel cần được sử dụng cùng các plugin để thực hiện các tác vụ riêng. Plugin dùng để chuyển đổi ES6 về ES5 có tên là babel-preset-env. Chúng ta sẽ cần cài đặt plugin này để sử dụng với Babel:
$ npm install babel-preset-env --save-dev
Babel sử dụng một tập tin cấu hình có tên là .babelrc để xác định các plugin nào sẽ được sử dụng cùng với nó. Để sử dụng babel-preset-env thì bạn sẽ tạo tập tin .babelrc với nội dung sau:
{ "presets": ["env"] }
Kết thúc bước này chúng ta đã sẵn sàng để tạo một ứng dụng đầu tiên sử dụng ReactJS.
Hello World
Sau khi hoàn tất các bước thiết lập thì ở phần này chúng ta sẽ tạo một chương trình ReactJS đơn giản có tên là Hello World. Trong thư mục dự án bạn tạo một tập tin HTML đơn giản lấy tên là index.html với nội dung như sau:
<!DOCTYPE html> <html> <body> <div id="root"></div> <script type="text/javascript" src="js/script.js"></script> </body> </html>
Tiếp theo tạo hai thư mục để chứa các file JavaScript là src và js. Thư mục src sẽ chứa các file JavaScript viết bằng ES6, ngược lại thư mục js sẽ chứa các file JavaScript thông thường được chuyển đổi từ các fiel trong thư mục src.
$ mkdir src js
Sau đó trong thư mục src mới tạo ra ở trên bạn tạo một tập tin script.js với nội dung sau:
import React from 'react';
import ReactDOM from 'react-dom';
const elementH1 = React.createElement("h1");
elementH1.innerText = "Hello World";
ReactDOM.render(
elementH1,
document.getElementById('root')
);
Nếu bạn chưa rành về ES6 thì có thể thấy const trong đoạn code trên hơn "lạ". Trong ES6 thay vì dùng var chúng ta sẽ sử dụng const và let được dùng để khai báo biến với giá trị không thể hoặc có thể thay đổi.
Do đoạn code trên sử dụng cú pháp của ES6 và tất nhiên chúng ta sẽ cần chuyển code theo ES6 về ES5:
$ babel src/script.js -o js/script.js
Câu lệnh trên sẽ tạo ra file script.js trong thư mục js với nội dung như sau:
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_reactDom2.default.render(_react2.default.createElement(), document.getElementById('root'));
Bây giờ nếu bạn mở tập tin index.html trên trình duyệt đồng thời bật công cụ console developer bạn sẽ thấy lỗi sau:
script.js:3 Uncaught ReferenceError: require is not defined
at script.js:3
Lỗi này xảy ra là bởi vì mã lệnh JavaScript trong file js/script.js mặc dù đã được viết theo cú pháp của ES5 tuy nhiên thiếu thư viện module loader để tải vào thư viện ReactJS. Có một số thư viện mô-đun loader khác nhau mà bạn có thể sử dụng như RequireJS. Tuy nhiên cách thông thường được sử dụng trong trường hợp này là broserify:
$ npm install -g browserify
Sau đó chạy câu lệnh dưới đây để chuyển đổi source code đã được kèm theo module loader:
$ browserify js/script.js -o js/bundle.js
Và bây giờ nếu bạn tải lại trang index.html bạn sẽ thấy trình duyệt hiển thị dòng chữ Hello World.
