Học React.js trong 5 phút

Giới thiệu nhanh về một thư viện javascript nổi tiếng nhất quả đất.

Bài viết này chỉ giới thiệu cho bạn về những thứ cơ bản nhất của thư viện javascript ReactJS.

Nếu bạn thích bài này hay có thắt mắt gì thì hãy gửi comment dến trang facebook Hội những người thích Node Js,Vue Js, React JS, Docker.

The setup

Khi bắt đầu với React, bạn nên sử dụng các cài đặt đơn giản nhất có thể: một tệp HTML có thêm vào ( import ) các thư viện React và ReactDOM bằng cách sử dụng các thẻ script, như sau:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.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>

Mình cũng đã thêm ( import ) thư viện Babel, vì React sử dụng một định dạng gọi là JSX để viết code. Chúng tôi sẽ cần phải biến JSX này thành JavaScript đơn giản để trình duyệt có thể hiểu nó.

Có hai điều ta cần chú ý:

Thẻ <div> với id là #root. Đây là điểm vào code Reactjs của ứng dụng này. Tất cả các code Html của react sẽ là con của thẻ div này.
Thẻ tag <script type="text/babel"> ở body. Đây là code JS của React.js.

Nếu bạn muốn thử code thì có thể check ở đây.

https://codepen.io/thi-n-nguyn-duy/pen/zmbqbB?editors=1010

Components

Mọi thứ trong React là một component, và chúng thường có dạng các lớp JavaScript. Bạn tạo một component bằng cách mở rộng trên lớp React-Component. Hãy tạo một component có tên Hello.

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

Sau đó bạn xác định các phương thức cho component. Trong ví dụ của mình thì chỉ có một phương thức và được gọi là render ().

Bên trong render() bạn sẽ trả về mô tả về những gì bạn muốn React vẽ trên trang của mình. Trong trường hợp trên, chúng tôi chỉ muốn hiển thị thẻ h1 với chữ Hello world! ở trong nó.

Để ứng dụng nhỏ của mình hiển thị trên màn hình, chúng tôi cũng phải sử dụng ReactDOM.render():

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

Vì vậy, đây là nơi chúng tôi kết nối Hello component với điểm vào cho ứng dụng (<div id="root"></div>).
Nó có kết quả như sau:

Cú pháp HTML mà chúng ta vừa xem (<h1> và <Hello/>) là mã JSX mình đã đề cập trước đó. Nó không thực sự là HTML, mặc dù những gì bạn viết ở đó sẽ kết thúc dưới dạng các thẻ HTML trong DOM.

Bước tiếp theo là để ứng dụng của chúng tôi xử lý dữ liệu.

Nếu bạn muốn thử code thì có thể check ở đây.
https://codepen.io/thi-n-nguyn-duy/pen/ZqPOzb?editors=1010

Xử lý dữ liệu

Có hai loại dữ liệu trong React: props và state. Sự khác biệt giữa hai có một chút khó hiểu, do đó, đừng lo lắng nếu bạn thấy nó hơi khó hiểu. Nó sẽ trở nên dễ dàng hơn khi bạn thực hành.

Điểm khác biệt chính là State là riêng tư và có thể được thay đổi từ bên trong chính component đó. Props ở bên ngoài và không được kiểm soát bởi component đó. Nó được truyền từ các component lên cấp bậc cao hơn, cũng như kiểm soát dữ liệu

Một component có thể thay đổi State bên trong của nó một cách trực tiếp. Nó không thể thay đổi Props của nó trực tiếp..

Chúng ta hãy xem xét kỹ hơn về Props trước.

Props

Hello component là rất đơn giản và nó hiển thị cùng một thông điệp không thay đổi. Một phần lớn của React là khả năng sử dụng lại, nghĩa là khả năng viết một component một lần, và sau đó sử dụng lại nó trong các trường hợp sử dụng khác nhau - ví dụ, để hiển thị các thông báo khác nhau.

Để đạt được khả năng sử dụng lại này, chúng tôi sẽ thêm Props. Đây là cách bạn truyền Props cho một component (được in đậm):

ReactDOM.render(
    <Hello message="bạn nào đang xem đẹp trai xinh gái" />, 
    document.getElementById("root")
);

prop này gọi là message và có giá trị “chào bạn”. Chúng ta có thể truy cập prop này bên trong component Hello bằng cách tham chiếu this.props.message, giống vầy:

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

Kết quả là, điều này được hiển thị trên màn hình:

Lý do chúng ta viết {this.props.message} với các dấu ngoặc nhọn là vì chúng ta cần nói với JSX rằng chúng ta muốn thêm một biểu thức JavaScript. Điều này được gọi là viết javascript trong Html.
Vì vậy, bây giờ chúng tôi có một component tái sử dụng có thể hiển thị bất kỳ thông điệp nào chúng tôi muốn trên trang. yeahhhhhh :vvv

Tuy nhiên, nếu chúng ta muốn thành phần có thể thay đổi dữ liệu của riêng nó thì sao? Sau đó, chúng ta phải sử dụng state thay vào đó!

Nếu bạn muốn thử code phần này thì có thể check ở đây.
https://codepen.io/thi-n-nguyn-duy/pen/qJvNbP?editors=1010

State

Cách lưu trữ dữ liệu khác trong React là component’s state. Và không giống như props - không thể thay đổi trực tiếp bởi thành phần - state có thể.

Vì vậy, 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 - dữ liệu phải được lưu trữ trong component’s state ở đâu đó trong ứng dụng.

Khởi tạo state

Để khởi tạo trạng thái, chỉ cần gọi this.state bên trong hàn constructor() của lớp. Trạng thái của chúng ta là một đối tượng mà trong trường hợp của chúng ta chỉ có một state gọi là message.

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "bạn tôi ơi hú hú (từ state)!"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

Trước khi chúng ta thiết lập state, chúng ta phải gọi super() trong hàm khởi tạo. Điều này là bởi vì điều này lànếu không bạn sẽ dính lỗi uninitialized trước khi super() đã được gọi.

Thay đổi state

Để sửa đổi state, chỉ cần gọi this.setState, truyền vào đối tượng là state mới làm đối số. Chúng ta sẽ làm điều này bên trong một hàm gọi là updateMessage.

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>;
    }
}

Lưu ý: Để thực hiện công việc này, chúng tôi cũng phải liên kết từ khóa this với hàm updateMessage. Nếu không, chúng tôi không thể truy cập vào hàm này.

Bước tiếp theo là tạo một nút để khi nhấn vào chúng ta có thể kích hoạt phương thức updateMessage().

vậy hãy thêm button vào hàm render():

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

Ở đây, chúng tôi đang gắn một trình xử lý sự kiện ở button, lắng nghe sự kiện onClick. Khi điều này được kích hoạt ( nhấn vào button ) , chúng ta gọi phương thức updateMessage.

Đây là toàn bộ component:

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 (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}

Phương thức updateMessage sẽ gọi this.setState () để thay đổi giá trị this.state.message này. Và khi mình nhấp vào nút, dưới đây là thay đổi

Nếu bạn muốn thử code phần này thì có thể check ở đây.
https://codepen.io/thi-n-nguyn-duy/pen/bmZeWX?editors=1010

Chúc mừng! Bây giờ bạn đã có kiến thức rất cơ bản về các khái niệm quan trọng nhất trong React.

Trong phần sau chúng ta sẽ đi sâu hơn về những hàm như render là gì khi chạy những dòng code này thì thật sự cái nào chạy trước cái nào chạy sau để hiểu rõ hơn về một vòng đời của một component trong ReactJS.

Search This Blog

Chia sẽ và học tập