Hello World

Ở bài học này chúng ta sẽ tạo một ứng dụng Hello World đơn giản sử dụng thư viện ReactJs và ReactDOM.

Bước 1.1: Tạo File index.html

Chúng ta sẽ bắt đầu bằng việc tạo một file HTML để bootstrap dự án sử dụng các thư viện liên quan tới React.js. Trong thư mục dự án bạn tạo tập tin static và bên trong này tạo tập tin index.html với nội dung sau:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
            );
        </script>
    </body>
</html>

Cấu trúc thư mục sẽ như sau:

.
└── static
    └── index.html

Trong file index.html bạn thấy có 3 thẻ <script></script> dùng để tham chiếu tới 3 thư viện JavaScript: react.min.js, react-dom.min.jsbrowser.min.js.

Trong đó browser.min.js chứa thư viện Babel dùng trên trình duyệt. Trong trường hợp bạn quên Babel là gì thì đây chính là công cụ dùng chuyển đổi code JavaScript viết theo cú pháp của ES6 về ES5.

Bên trong thẻ <body></body> bạn thấy có một đoạn code JavaScript sử dụng ReactDOM để thiết lập nội dung cho thẻ div#example sử dụng cú pháp của JSX.

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

Khi chạy tập tin index.html, thư viện Babel sẽ biên dịch JSX về mã JavaScrip thông thường mà trình duyệt có thể hiểu được.

Bước 1.2: Tích Hợp Node.js Server

Bước tiếp theo chúng ta sẽ làm đó là tích hợp Node.js Server để chạy dự án đồng thời chúng ta cũng sẽ cài đặt Express.js web framework để sử dụng với Node.js. Đầu tiên bạn cần cài đặt Node.jsNode Package Manager trên máy tính.

Sau khi cài đặt xong Node.js, chúng ta sẽ khởi tạo dự án bằng cách chạy câu lệnh dưới đây trên cửa sổ dòng lệnh terminal (hoặc command prompt với Windows):

$ npm init

Khi chạy câu lệnh trên máy tính sẽ yêu cầu bạn nhập các thông tin liên quan của ứng dụng. Khi điền các thông tin bạn cần chú ý đặt tên ứng dụng không sử dụng khoảng trắng, ngoài ra entry point chạy node server là webapp.js. Các thông tin khác như phiên bản, license... bạn có thể tùy ý nhập.

Sau khi nhập xong thông tin và gõ Enter, Node.js sẽ tạo file package.json cho bạn. Mở file package.json và kiểm tra trường main bạn sẽ thấy giá trị của trường này là webapp.js như sau:

{
...
  "main": "webapp.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...
}

Tiếp theo để cài đặt Express.js framewokr chúng ta sẽ sử dụng câu lệnh sau:

$ npm install --save express

Sử dụng tùy chọn --save trong câu lệnh trên sẽ tự động cập nhật nội dung file package.json để thêm Express.js vào trường dependencies:

{
...
  "dependencies": {
    "express": "^4.15.3"
  }
...
}

Ở các bài học tiếp theo chúng ta cũng sẽ sử dụng tùy chọn --save trong các câu lệnh dùng để cài đặt mô-đun Node.js.

Chạy Node.js Server

Cuối cùng khởi động Node.js server nhờ chạy câu lệnh sau:

$ node webapp.js

Mở trình duyệt và truy cập vào địa chỉ URL http://localhost:3000 để kiểm tra kết quả.

Nội dung không được để trống

Hướng Dẫn Liên Quan