Tổ Chức Code

Babel Logo

Trong bài học này chúng ta sẽ tổ chức lại source code bằng việc tách riêng JavaScript ra khỏi HTML đồng thời sử dụng Babel mô-đun của Node.js để chuyển đổi mã JSX sang JavaScript khi build ứng dụng (build-time) thay vì chuyển đổi khi run ứng dụng (run-time).

Bước 2.1: Tách HTML và JS

Đầu tiên bạn tạo một file App.js trong cùng thư mục với tập tin index.html với nội dung như sau:

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

Tiếp theo cập nhật file index.html, thay vì nhúng trực tiếp mã JavaScript vào trang chúng ta sẽ tham chiếu tới file JavaScript bên ngoài mới tạo ở trên:

<body>
    <div id="example"></div>
    <script src="/App.js" type="text/babel"></script>
</body>

So sánh thay đổi trong source code ở bước 2.1 ở đây

Bước 2.2: Dùng Babel Để Chuyển Đổi Code JSX về JavaScript

ReactJS hỗ trợ viết JavaScript theo phiên bản ECMASCRIPT2015 (hay ES6). Một số trình duyệt chưa hỗ trợ ES6 do đó chúng ta cần chuyển đổi mã lệnh JavaScript viết theo ES6 về phiên bản ES5. Babel là công cụ hỗ trợ công việc này. Để sử dụng Babel trên Node.js chúng ta sẽ cần cài đặt mô-đun Babel-CLI của Node.js sử dụng câu lệnh sau:

$ sudo npm install -g babel-cli

Ở trên chúng ta sử dụng tùy chọn -g để cài đặt babel-cli trên toàn bộ hệ thống. babel-cli sẽ chuyển đổi mã lệnh JavaScript được viết sử dụng ES6 về ES5. Để chuyển đổi mã JSX về JavaScript chúng ta cần cài thêm mô-đun babel-preset-react:

$ npm install --save babel-preset-react

Tạo thư mục src trong thư mục chứa dự án:

$ mkdir src

Sau đó quay lại terminal, mở một tab mới và chạy câu lệnh sau để thực hiện việc chuyển đổi JSX sang JavaScript thông thường:

$ babel --presets react src --watch --out-dir static

Câu lệnh trên sẽ chuyển đổi các file JavaScript trong thư mục src viết theo ES6 và JSX về JavaScript ES5 tương ứng trong thư mục static. Bạn cũng có thể tìm thấy câu lệnh trên trong tập tin transfer.sh.

Cuối cùng thêm file static/App.js vào tập tin .gitignore để bỏ theo dõi tập tin này.

So sánh thay đổi trong source code ở bước 2.2 ở đây

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

Hướng Dẫn Liên Quan