React.js 03 – Cài đặt React.js bằng lệnh create-react-app

0
231

Trong bài hướng dẫn trước tôi đã hướng dẫn cho các bạn cách cài đặt React.js bằng cách sử dụng Webpack và Babel. Với cách cài đặt của bài trước sẽ rất khó cho các bạn chưa từng làm việc với webpack và babel vì thế trong bài này tôi sẽ hướng dẫn các bạn cài đặt bằng một cách đơn giản hơn đó là sử dụng câu lệnh create-react-app ở trong NPM.

Cài đặt bằng câu lệnh

Để thiết lập create-react-app các bạn hãy chạy đoạn mã sau trên máy tính của các bạn.

Cú pháp: (với NPMNPX các bạn có thể dùng 1 trong 2 đều được nhé)

NPM

NPX

Lưu ý: NPX sẽ đi kèm với phiên bản 5.2 trở lên

Đối với phiên bản NPM từ 5.1 trở xuống các bạn cài đặt theo cách sau.

Cài đặt create-react-app

Tiếp theo bạn cần chạy

Khi chạy lệnh các bạn sẽ đợi cho NPM cài đặt các thư viện vầ cấu hình cần thiết. Việc này có thể mất vài phút tùy theo tốc độ mạng của bạn.

Sau khi cài đặt hoàn tất bạn tiến hành di chuyển đến thư mục vừa tạo để bắt đầu dự án của mình.

 

Khi bạn chạy lệnh này một cửa sổ của trình duyệt sẽ bật lên với địa chỉ localhost:3000 với ứng dụng React mới của bạn.

Nếu bạn nhìn vào cấu trúc của dự án, bạn sẽ thấy thư mục /public và /src cùng với node_modules , .gitignore , README.md , và package.json.

Trong thư mục /public có một tệp quan trọng đó là index.html , rất giống với tệp index.html tĩnh mà chúng ta đã tạo ra ở bài hướng dẫn trước.

Thư mục /src sẽ chứa tất cả các mã React của chúng ta. Để xem cách môi trường tự động biên dịch và cập nhật mã React của bạn, hãy tìm đến dòng như thế này trong /src/App.js .

Và thay thế nó bằng một văn bản khác. Khi bạn lưu tệp, bạn sẽ nhận thấy localhost:3000 sẽ load lại dữ liệu mới.

Công cụ để phát triển React

Có một tiện ích mở rộng có tên React Developer Tools sẽ giúp bạn dễ dàng hơn khi làm việc với React . Bạn có thể cài đặt React DevTools cho Chrome hoặc bất cứ trình duyệt nào bạn muốn làm việc.

Sau khi bạn cài đặt nó, khi bạn mở DevTools, bạn sẽ thấy một tab cho React. Click vào nó bạn sẽ có thể kiểm tra các Component khi chúng được viết. Bạn vẫn có thể chuyển sang tab Element để xem các đầu ra DOM thực tế. Có thể bạn đầu bạn sẽ thấy nó không cần thiết để sử dụng, nhưng khi ứng dụng của bạn trở nên phức tạp hơn, nó sẽ ngày càng trở nên cần thiết để sử dụng.

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