Viết Ứng Dụng Đầu Tiên Với ReactJS

Viết Ứng Dụng Đầu Tiên Với ReactJS

Sau một thời gian viết lan man về những mảng khác nhau trong lĩnh vực lập trình, Mình đã quyết định và bố trí lại các bài viết của mình dưỡi dạng các sê-ri, các bài hướng dẫn cho các bạn dễ theo dõi. Tại sao lại chọn ReactJS thì đơn giản là công việc trước đây mình có sử dụng React JS để phát triển Frontend cho phía Client. Nó hay và nó có khá nhiều thứ mà chúng ta cần tìm hiểu nên câu chuyện chúng ta nói nó sẽ được dài hơi hơn là các thanh niên còn lại trong giới JS. 
Muốn giỏi thì phải học, muốn học thì nên đi từ cơ bản đến nâng cao. Hãy cùng bắt đầu nhé !!!

1. Cài đặt môi trường

Đầu tiên là tiền đâu, chúng ta sẽ phải đi cài đặt môi trường dev (development) cho ReactJS. Ở đây mình chỉ hướng dẫn trên windows thôi còn nếu dùng linux hay các hệ điều hành khác các bạn hãy tự tìm hiểu nhé.

Bước 1: cài đặt Node JS, tại sao lại là Nodejs?

Xin thưa với các bạn là vì chúng ta sẽ dùng Node JS để cài đặt App cho React Js cũng như download các gói, thư viện cần thiết, quản lý và cập nhật các tool của React.

Các bạn bấm vào đây để tải Node JS chọn bản mà nhà sản xuất khuyến khích bạn dùng (hoàn toàn Free vì là mã nguồn mở).

Bước 2: Sau khi đã cài đặt thành công Node JS. Các mở PowerShell trên window, trỏ đến thư mục mà các bạn muốn lưu trữ source code, gõ lệnh sau và nhấn enter:

npx create-react-app my-app

Trong đó my-app là tên ứng dụng mà bạn muốn tạo, trong một số trường hợp "create-react-app" bị thiếu nến xảy ra lỗi dưới đây:

Chúng ta sẽ khắc phục bằng cách cài đặt lại gói bị thiếu bằng dòng lệnh sau:

npm install -g [email protected]

Và thử lại lần nữa.

Sau khi tất cả các gói và các tệp tin cần thiết của một App React JS đã được cài đặt xong các bạn hãy trỏ vào thư mục my-app là tên thư mục mình vừa đặt cho ứng dụng. Gõ lệnh sau đây để chạy ứng dụng lần đầu:

cd my-app
npm start

Kết quả trả về nếu thành công như hình sau:

Ứng dụng của chúng ta đang chạy trên localhost với ip tĩnh là 127.0.0.1 và port là 3000. Giao diện mà ta nhìn thấy ở đây là giao diện welcome của ứng dụng React JS.

2. Ứng dụng hello world

Từ đời thủy tổ đến giờ của các ngôn ngữ lập trình và các thư viện ứng dụng đầu tiên luôn là hello world. Để viết ứng dụng "Hello world!" các bạn truy cập vào tệp tin src/App.js và đây là nội dung ban đầu của tệp tin:

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>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
Và đây là sau khi đã remove phần "welcome" của ứng dụng và thay vào đó là câu lệnh "hello world!" trong thẻ <h1>
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;
Kết quả thu được: là dòng chữ "Hello world!" thay vì giao diện mặc định ban đầu, chúc mừng bạn đã có được ứng dụng đầu tay của mình bằng React JS, bài sau chúng ta sẽ cùng tìm hiểu về  JSX là Javascript và XML, tìm hiểu thế nào "để React render mọi thứ cho bạn". vân vân và mây mây.

Còn khoảng 40 từ nữa mà mình không biết viết cái gì thôi thì chúc các bạn một tuần làm việc và học tập mới thật hiểu quả, chúc các bạn thành công với ứng dụng đầu tay của mình.

3. Tạm kết

Alright!! hôm nay chúng ta tìm hiểu đến đấy thôi, các bạn có thể tìm tòi và sử code trong tệp tin src/app.js để viết ứng dụng "hello world" cho riêng mình.

Hẹn gặp lại trong các bài sắp tới. ps: Sê-ri này của mình sẽ kéo dài khoảng 8-9 bài gì đó trước khi chuyển sang những bài nâng cao hơn.

Many thanks!

Trần Văn Dũng - IT Engineer

"To become a happy man"