React.js 02 – Cài đặt React bằng webpack và Babel

0
495

Trong bài viết này, tôi sẽ chỉ cho bạn cách thiết lập môi trường để phát triển React. Chúng ta sẽ cần tới Node.js , vì vậy nếu bạn nào chưa cài đặt nó hãy cài đặt và trang bị cho mình những kiến thức cần thiết để làm việc với React.

STT Phần mềm & mô tả
1 Node.jsNPM

Node.js là nền tảng cần thiết cho sự phát triển ReactJS

 

Sau khi cài đặt thành công Node.js, chúng ta có thể bắt đầu cài đặt React khi sử dụng npm. Bạn có thể cài đặt theo 2 cái cách

  • Sử dụng webpack và babel
  • Sử dụng lệnh create-react-app

Với cách cài đặt đầu tiên yêu cầu bạn phải có kiến thức về webpack và babel nên nếu bạn nào chưa có kiến thức về 2 loại này thì có thể dùng cách thứ 2 sẽ dễ hơn.

Cài đăt ReactJS sử dụng webpack và babel

Trước khi đi vào phần này thì tôi sẽ nói qua cho các bạn một chút về khái niệm của webpackbabel.

Webpack là một module bundler (quản lý và tải các module độc lập). Nó nhận các module phụ thuộc và biên dịch chúng thành một file. Bạn có thể sử dụng file này trong khi phát triển ứng dụng bằng dòng lệnh hoặc bằng cách định cấu hình nó bằng tệp webpack.config.js

Babel là một chương trình biên dịch và trình dịch mã Javascript. Nó được sử dụng để chuyển đổi một mã nguồn khác. Sử dụng điều này, bạn sẽ có thể sử dụng các tính năng mới của ES6, ES7 mới trong mã của mình, babel chuyển đổi nó thành ES5 cũ đơn giản để có thể chạy trên các trình duyệt.

Dưới đây là các bước dùng để cài đặt React bằng webpack và babel.

Bước 1 – Tạo thư mục gốc

Tạo một thư mục có tên VietProReactApp để cài đặt tất cả các tệp cần thiết.

Để tạo một module nào đó , chúng ta cần phải tạo tệp package.json . Dó đó, sau khi tạo thư mục, chúng ta cần tạo tệp package.json . Để làm điều này các bạn chạy lệnh npm init từ command line.

Lệnh này sẽ đòi hỏi bạn các thông tin về module, chẳng hạn như package name, description, author v.v bạn có thể bỏ qua các tùy chọn này bằng các sử dụng câu lệnh.

Bước 2 – Cài đặt React và React-dom

Tiếp theo sau khi đã khởi tạo thư mục chúng ta tiến hành cài đặt react và các package DOM của nó react-dom .

Tiến hành cài đặt bằng lệnh.

Bước 3 – Cài đặt Webpack

Vì ở đây chúng ta sử dụng webpack nên phải cài đặt các package cần thiết cho webpack. Bao gồm webpack, webpack-dev-serverwebpack-cli

Bước 4 – Cài đặt babel

Cài đặt babel và các plugin của nó babel-core, babel-loader, babel-preset-env, babel-preset-reacthtml-webpack-plugin

Bước 5 -Tạo file

Để hoàn tất quá trình cài đặt, chúng ta cần tạo ra một số tập tin nhất định là index.html, App.js, main.js, webpack.config.js và .babelrc

Bước 6 – Thiết lập trình biên dịch, Server và Loaders

Mở file webpack.config.js và thêm đoạn mã sau.

File webpack.config.js


 

Ở đoạn mã trên tôi đã đặt đầu vào của webpack là file main.js . Đầu ra sẽ được đặt trong thư mục bundle. Máy chủ phát triển sẽ chạy trên cổng 3000 bạn có thể thay thế bất kỳ cổng nào mà các bạn muốn.

Tiếp theo các bạn mở file package.json bên trong đối tượng scripts các bạn thêm vào các câu lệnh sau.

Bước 7 – Chỉnh sửa index.html

Đây chỉ là file HTML thông thường. Chúng ta sẽ đặt một div với id là root làm thành phần gốc của ứng dụng  và thêm tệp lệnh app.js  .

Đây là nội dung file index.html

Bước 8 – Thay đổi App.js và main.js

App.js Đây là Component React đầu tiên của chúng ta. Tôi sẽ giải thích cho các bạn về component react trong một bài viết khác. Component này sẽ xuất ra Đây là ứng dụng react đầu tiên.

File App.js

Chúng ta sẽ cần phải import và kết xuất nó với phần tử App gốc.

File main.js

Lưu ý – Bất cứ khi nào bạn muốn sử dụng một cái gì đó, bạn cần import nó trước. Nếu bạn muốn làm cho các component có thể sử dụng được trong các thành phần khác của ứng dụng, bạn cần export nó sau khi tạo và import vào tệp mà bạn muốn sử dụng nó.

Cuối cùng cập nhật file .babelrc với nội dung sau.

Bước 9 – Chạy máy chủ

Sau khi hoàn tất qúa trình thiết lập hoàn tất chúng ta cá thể khởi động máy chủ bằng lệnh.

Nó sẽ mở trình duyệt và đi tới địa chỉ http://localhost:3000 và bạn sẽ thấy nội dung sau trên trình duyệt

Bước 10 – Tạo package

Cuối cùng để tạo package các bạn chạy với lệnh sau

Sau khi câu lệnh được thực thi bạn sẽ thấy các package nằm trong thư mục bundle như sau.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây