Hướng dẫn học ReactJS trong 5 phút dành cho người mới

1

Gần đây, trên VNTALKING mình có một số bài hướng dẫn VueJS, một thư viện front-end đình đám. Trong lúc không biết viết gì về VueJS thì mình chợt nghĩ tới ReactJS, cũng là một front-end framework rất nổi tiếng khác. Để mở đầu chuỗi học ReactJS, bài viết này sẽ tập trung vào những thứ cơ bản nhất của ReactJS bằng việc xây dựng một ứng dụng đơn giản.

Series học ReactJS từ A-Z
Chapter 1: Introduction <— Bạn đang ở bài viết này
Chapter 2: React Hooks – Có gì hấp dẫn?
Chapter 3: Sử dụng Context trong React
Chapter 4: Form validation trong React
Còn tiếp…

Để khỏi mất thời gian của các bạn, chúng ta bắt đầu luôn nhé.

học reactJS cơ bản

Cài đặt ReactJS

Cũng giống như các front-end framework khác, để cài đặt và bắt đầu một dự án React, bạn có nhiều cách thực hiện. Mình sẽ hướng dẫn 2 cách làm phổ biến nhất.

Sử dụng trực tiếp thư viện React vào HTML

Khi bạn mới bắt đầu học ReactJS, bạn nên sử dụng cách cài đặt đơn giản nhất. Đó là sử dụng tag <script> để import thư viện React và ReactDOM vào trong file HTML.

Đại khái sẽ như thế này:

<html>
<head>  
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>  
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>  
</head>  
<body>  
    <div id="root"></div>  
    <script type="text/babel">  
      
    /*   
    ADD REACT CODE HERE 
    */  
      
    </script>  
</body>  
</html>

Trong ví dụ trên, mình cũng đã import cả thư viện babel. Bởi vì React sử dụng ngôn ngữ JSX thay vì Javascript thuần. Thư viện Babel có nhiệm vụ chuyển ngôn ngữ JSX sang Javascript, lúc đó trình duyệt mới hiểu được.

Ngoài ra, mình muốn lưu ý thêm 2 điểm quan trọng nữa:

  • Thẻ <div> với id là #root: Đây là thẻ <div> bao trùm cả giao diện ứng dụng. Sau này, mọi thứ sẽ được tạo bên trong thẻ <div> này. Nó giống như bộ khung của bức tranh, sau này mọi thứ sẽ được vẽ động bên trong khung đó.
  • Thẻ <script type="text/babel"> trong body: Đây chính là nơi bạn viết mã reactJS

Cài đặt React trên môi trường Node.js

Với cách cài đặt này, bạn sẽ có nhiều công cụ hỗ trợ hơn cho việc khởi tạo dự án. Có một công cụ được chính Facebook phát triển và khuyến khích sử dụng. Đó là Create-React-App.

Create-react-app là cách để đơn giản hóa quá trình cài đặt và cấu hình môi trường để xây dựng Single Page Application (SPA) với React

Trước tiên, bạn cần hoàn thành cài đặt Node.js + NPM trước. Tham khảo hướng dẫn cài đặt Node.js tại đây: Cài đặt Node.js trên Window + Ubuntu

Để đảm bảo bạn đã cài đặt node.js thành công, bạn gõ lệnh nếu có kết quả như dưới đây là được.

cai-dat-nodejs-tren-window-ubuntu-8

Bạn gõ lệnh như bên dưới để cài đặt create-react-app:

npm install -g create-react-app

Tiếp theo, tạo dự án React bằng create-react-app, bạn gõ lệnh sau:

create-react-app my-app 
cd my-app 
npm start

Vậy là xong, bạn vào trình duyệt gõ: http://localhost:3000/ để xem kết quả.

Sau khi đã hiểu cách cài đặt ReactJS, chúng ta tiếp tục tìm hiểu các thành phần quan trọng của ReactJs nhé.

Components

Tất cả mọi thứ trong ReactJS đều là component, và chúng thường là viết dưới dạng các class Javascript.

Bạn tạo mới một component bằng cách extend từ React-Component class. Chúng ta thử tạo một component đơn giản nhé.

class Hello extends React.Component {  
    render() {  
        return <h1>Xin chào các bạn độc giả VNTALKING!</h1>;  
    }  
}

Bên trong mỗi component, bạn có thể định nghĩa các method thực hiện các nhiệm vụ riêng trong component đó.

Như trong ví dụ trên, mình chỉ có mỗi method render(). Nhiệm vụ của hàm này là tạo thẻ <h1> với nội dung là “Xin chào các bạn độc giả VNTALKING!“.

Để hiển thị component này ra màn hình, chúng ta sử dụng ReactDOM.render():

ReactDOM.render(  
    <Hello />,   
    document.getElementById("root")  
);

Theo như ngôn ngữ “dân dã” thì đơn giản là: “Này React! mày có thể render cái Hello component kia vào thẻ div có id là root được không? Nếu được thì luôn và ngay đi. “. Và kết quả được như dưới đây.

react sample

Cú pháp mà nhìn ở trên : <h1><Hello/>, thực chất nó không phải là HTML mà chính xác là JSX (viết tắt của  JavaScript XML). Nghe quảng cáo thì nó mạnh mẽ hơn HTML rất nhiều. Sau này khi bạn làm nhiều về JSX thì quay lại bài viết này cho mình biết cảm nhận về JSX nhé.

Nhưng dù có cao siêu thế thì cuối cùng nó cũng phải chuyển về thẻ HTML bình thường thì trình duyệt mới hiểu được.

Phần tiếp theo, chúng ta sẽ cùng nhau tìm hiểu React xử lý data như thế nào nhé.

Xử lý data trong ReactJS (Handling data)

Có hai kiểu dữ liệu trong React, đó là Props và State. Với người mới học ReactJS mà để phân biệt chính xác hai loại này hơi khó khăn xíu. Nhưng cũng đừng lo lắng quá, dần dần bạn sẽ “chiêm nghiệm” và hiểu rõ nó thôi.

Sự khác biệt chính đó là: State là private, có thể thay đổi giá trị từ bên trong chính mỗi component. Còn Props là external, tức là không bị kiểm soát ở trên trong mỗi component. Nó được truyền từ component đang “bao bọc” nó trong cây hierarchy, hay nói chính xác là component cha của nó.

Một component có thể tự thay đổi state nhưng không thể thay đổi props chính nó được.

💓 Đọc thêm: Phân biệt props và State.

Chúng ta cùng nhau vừa thực hành vừa tìm hiểu nhé.

Props

Như trong ví dụ trên, Hello component là một component tĩnh, tức là nội dung mà nó hiển thị không bị thay đổi. Tuy nhiên, trên thực tế thì các ứng dụng React thường sẽ có khả năng tái sử dụng mã nguồn, nội dung hiển thị sẽ thay đổi khi dữ liệu thay đổi.

Ví dụ, mình muốn thay đổi nội dung câu chào trong Hello component.  Thay vì chỉ có thể “Chào các bạn độc giả VNTALKING“, thì mình có thể chào tất cả mọi người, kiểu như “Chào các bạn độc giả đẹp trai“…

class Hello extends React.Component {  
    render() {  
        return <h1>Chào các bạn độc giả {this.props.message}!</h1>;  
    }  
}

Sau đó lúc xuất ra màn hình thì truyền message vào props

ReactDOM.render(  
    <Hello message="đẹp trai" />,   
    document.getElementById("root")  
);

Kết quả sẽ được như này:

ReactJS props example

Trong JSX, bạn muốn viết một đoạn mã javascript thì phải để trong dấu ngoặc nhọn {}. Giống như ở ví dụ trên, mình cũng phải là như vậy:  <h1>Chào các bạn độc giả {this.props.message}!</h1>

Cái này thuật ngữ chuyên ngành gọi là escaping.

Từ giờ thì Hello component của chúng ta đã linh động hơn rồi, đã có thể “chào” bất kỳ ai, cứ truyền dữ liệu vào là “chào” được 🙂

Tuy nhiên, điều gì sẽ xảy ra nếu chúng ta muốn thay đổi dữ liệu ngay bên trong một component?

Đã đến lúc chúng ta sử dụng tới State rồi đấy.

State

Nếu bạn muốn dữ liệu trong ứng dụng của mình thay đổi. Ví dụ, dựa trên tương tác của người dùng, thì nó phải được lưu trữ trong state của component.

Để khởi tạo state, đơn giản là gọi hàm set: this.state trong hàm khởi tạo constructor().

Ví dụ như Hello component:

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
    }  
      
    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}
Lưu ý: Trước khi set giá trị cho state, bạn cần phải gọi hàm super() trước đã nhé.

Để thay đổi giá trị của state thì gọi hàm this.setState() và truyền state object vào. Trong ví dụ của Hello component, mình tạo thêm một hàm gọi là updateMessage() để thay đổi state.

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
        this.updateMessage = this.updateMessage.bind(this);   
   }

   updateMessage() {  
        this.setState({  
            message: "my friend (from changed state)!"  
        });  
    }

    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}

Event Handlers

Nói đến bất kỳ ứng dụng nào thì đều luôn phải xử lý các sự kiện, tương tác với người dùng. Ứng dụng ReactJS cũng vậy.

Để minh họa cho trường hợp này, chúng ta sẽ tạo một button và nếu người dùng click vào nó thì sẽ gọi hàm updateMessage().

  return (  
     <div>  
       <h1>Hello {this.state.message}!</h1>  
       <button onClick={this.updateMessage}\>Click me!</button>  
     </div>     
  )  
}

Tại đây, chúng ta thêm một event listener trong button, cụ thể là onClick event. Khi event được trigger, chúng ta sẽ gọi hàm updateMessage().

Kết quả thu được như sau:

ReactJS event handler

Vậy là xong rồi đấy! Các bạn có thể tham khảo mã nguồn đầy đủ tại đây.

Đọc đến đây, chắc hẳn bạn cũng đã hiểu phần nào về ReactJS rồi đúng không? Đây chỉ là những khái niệm cốt lõi, và còn nhiều điều thú vị khi học ReactJS. Cùng đón đọc trên VNTALKING nhé.

Đọc thêm:

Nguồn tham khảo: freecodecamp

Dịch vụ phát triển ứng dụng mobile giá rẻ - chất lượng

1
Bình luận. Cùng nhau thảo luận nhé!

avatar
  Theo dõi bình luận  
Mới nhất Cũ nhất Nhiều voted nhất
Thông báo
phamngoctuong1805@gmail.com
Guest
phamngoctuong1805@gmail.com

Bài viết rất chất lượng