Tiếp tục series về ReactJS, ở bài trước chúng ta đã tìm hiểu ReactJS là gì. Trong bài này, mình sẽ hướng dẫn bạn cài đặt môi trường lập trình ReactJS. Cùng VoManhKien.com tìm hiểu qua bài viết này nhé.

Cài đặt NodeJS và Yarn

Để có thể bắt đầu lập trình React thì bạn cần cài đặt môi trường NodeJS, và cài Yarn là trình quản lý các thư viện trong ứng dụng của bạn, bạn có thể sử dụng NPM hoặc YARN đều được, nhưng mình khuyến khích sử dụng yarn hơn.

Đầu tiên thì bạn truy cập vào https://nodejs.org/en/download/ và tìm bản download phù hợp với hệ điều hành của bạn, là window hoặc macos, hoặc linux, …

Tải về xong thì bạn cài đặt như phần mềm bình thường thôi.

Sau khi đã cài xong thì bạn bật Node.js command prompt đối với window, còn đối với macos thì bạn bật terminal lên.

Sau đó gõ lệnh node -v và lệnh npm -v 

➜  ~ node -v
v14.2.0
➜  ~ npm -v
6.14.6
➜  ~

Nếu output ra tương tự thế này là ok (có thể khác phiên bản), tức là bạn đã cài đặt thành công.

Sau đó bạn cài Yarn bằng lệnh npm install -g yarn sau khi cài xong thì bạn có thể sử dụng yarn thay cho npm rồi.

Khởi tạo dự án ReactJS đầu tiên

Để tạo dự án reactjs mới thì bạn hãy chạy lệnh yarn create react-app MyApp MyApp ở đây là tên mình tự đặt, là tên dự án, bạn có thể đặt theo tên của bạn.

Ví dụ mình sẽ tạo 1 dự án yarn create react-app vomanhkien-app

Sau khi chạy xong thì bạn sẽ có thông báo thế này

Tạo xong dự án ReactJS đầu tiên
Tạo xong dự án ReactJS đầu tiên

Vào thư mục của dự án theo hướng dẫn cd vomanhkien-app

Sau đó thì bạn hãy mở bằng VScode lên, nếu bạn chưa biết VSCode là gì thì có thể xem qua bài hướng dẫn cài đặt và những extension cần thiết tại đây

Đây là cấu trúc thư mục mà React đã setup sẵn cho bạn.

Cấu trúc thư mục ReactJS
Cấu trúc thư mục ReactJS

Bạn có thể thấy có 3 thư mục chính đó là:

  • src: Đây là thư mục chứa toàn bộ code của ứng dụng
  • public: Đây là thư mục chứa các file asset như ảnh, txt, html, …
  • node_modules: Đây là thư mục chứa tất cả các library sử dụng trong dự án, nếu bạn muốn cài thêm lib nào đó để sử dụng thì nó sẽ ở trong này

Tiếp theo là file package.json đây là file chứa các cài đặt các package, và scripts, còn file yarn.lock thì để lưu lại version của package bạn cài, lần sau cài lại sẽ cài đúng phiên bản đó.

Ngoài ra thì bạn cũng có thể thêm các thư mục khác vào dự án như components để chứa các component, rồi container, … chúng ta sẽ tìm hiểu ở những bài sau nhé.

Chạy dự án ReactJS

Bây giờ quay lại terminal và bạn chạy lệnh yarn start để chạy dự án lên nhé

Lúc này ReactJS sẽ khởi động dự án và đồng thời mở một tab mới trên trình duyệt ở địa chỉ localhost:3000

Giao diện ReactJS đầu tiên
Giao diện ReactJS đầu tiên

Xây dựng dự án ReactJS đầu tiên

Bây giờ bạn hãy mở VSCode lên vào vào file src/App.js và thử chỉnh sửa vài chỗ trong đó xem sao

Mình sẽ sửa đoạn code thành thế này

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Welcome to VoManhKien.com
        </p>
      </header>
    </div>
  );
}

export default App;

và kết quả sẽ ra thế này đây

Chỉnh sửa file app.js
Chỉnh sửa file app.js

Bạn hãy mở file index.js lên, nó sẽ trông thế này

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Bạn chú ý đến đoạn document.getElementById('root') và bạn lại mở thêm file public/index.html lên sẽ có đoạn <div id="root"></div>. Đây chính là vị trí mà toàn bộ code của bạn sẽ được ở trong thẻ div này. Bạn không nên sửa tên này làm gì.

Lưu ý là React đã setup giúp bạn chức năng auto reload tức là mỗi khi bạn sửa code thì trình duyệt sẽ tự động load lại mà bạn không cần phải F5 hay tắt terminal đi bật lại nhé, trừ một số trường hợp đặc biệt thì chúng ta sẽ học trong những bài tiếp theo.

Kết luận

Như vậy là bạn đã cài đặt môi trường lập trình React và khởi chạy dự án React đầu tiên. Cũng không có gì khó đúng không nào.

Nếu bạn có gặp lỗi gì, hay có thắc mắc gì thì có thể để lại comment bên dưới hoặc join group để cùng thảo luận nhé.

Hẹn gặp bạn trong những bài tiếp theo.