Hướng dẫn những react vào html

Nội dung trên có nghĩa là file



  
    
    React App

2 lấy nội dung từ function

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

function App() {
  return (
    
      
        [email protected]/umd/react.development.js">

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ẻ
```
npm install -g create-react-app
```
1 với id là
```
npm install -g create-react-app
```
2: Đây là thẻ
```
npm install -g create-react-app
```
1 bao trùm cả giao diện ứng dụng. Sau này, mọi thứ sẽ được tạo bên trong thẻ
```
npm install -g create-react-app
```
1 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ẻ
```
npm install -g create-react-app
```
5 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 nhanh hơn.

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.

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 React nhé.

Chờ chút xíu! Bọn mình vừa hoàn thành một cuốn sách học ReactJS đặc biệt dành cho bạn đây. Cuốn sách này sẽ giúp bạn từng bước học ReactJS từ con số 0 tới khi deploy ứng dụng lên Internet để khoe với crush. Ngại gì mà không thử!
☛ Đọc sách ngay

Components

Tất cả mọi thứ trong ReactJS đều là component. Component có hai cách viết: class component hoặc functional component.

Bạn tạo mới một component bằng cách extend từ

npm install -g create-react-app

6 class. Chúng ta thử tạo một component đơn giản nhé.

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

Bên trong mỗi component, bạn có thể định nghĩa các hàm 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 hàm

npm install -g create-react-app

7. Nhiệm vụ của hàm này là render ra thẻ

npm install -g create-react-app

8 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

npm install -g create-react-app

ReactDOM.render(  
    ,   
    document.getElementById("root")  
);

Theo như ngôn ngữ “dân dã”, đoạn code trên đơ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.

Cú pháp bạn nhìn ở trên :

npm install -g create-react-app

8 và

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

1, thực chất nó không phải là HTML đâu. Thực ra đó 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ế nào, 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 mỗ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 Chào các bạn độc giả {this.props.message}!;  
    }  
}

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

ReactDOM.render(  
    ,   
    document.getElementById("root")  
);

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

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:

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

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

Từ giờ, 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:

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

3 trong hàm khởi tạo

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

4. Hoặc không, bạn khai báo một đối tượng state như mọi đối tượng khác (không cần hàm khởi tạo).

Ví dụ như Hello component:

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

Lưu ý: Trước khi set giá trị cho state, bạn cần phải gọi hàm

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

5 trước đã nhé.

Để thay đổi giá trị của state thì gọi hàm

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

6 và truyền đối tượng state vào. Trong ví dụ của Hello component, mình tạo thêm một hàm gọi là

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

7 để 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 Hello {this.state.message}!;  
    }  
}

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, khi người dùng click vào nó thì sẽ gọi hàm

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

  return (  
       
       Hello {this.state.message}!  
         
          
  )  
}

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

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

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

Vậy là xong rồi đấy!

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

💦 Đọc thêm:

React vs Angular vs Vue.js: Lựa chọn nào cho năm 2020
Tài liệu học ReactJS tiếng việt – 2020
Câu hỏi phỏng vấn tuyển dụng React developer phổ biến

Nguồn tham khảo: freecodecamp

Nhận sách Java Advanced Features

Java là ngôn ngữ lập trình phổ biến nhất thế giới, là hình mẫu của tư tưởng OOP. Nếu bạn muốn bắt đầu với Java thì đây là cuốn sách không thể bỏ qua. Với 63 ví dụ thực hành, cùng với cách viết ngắn gọn dễ hiểu sẽ giúp bạn hiểu rõ bản chất của Java.

Hiện Amazon đang bán với giá 16$, nhưng với VNTALKING thì miễn phí cho bạn. Còn chờ gì nữa?

DOWNLOAD

TAGS
học react native
hướng dẫn react native
javascript cơ bản
react
reactjs

Facebook

Twitter

Bài trướcBán hàng trên Tiktok Shop – Cơ hội thành ông chủ triệu đô

Bài tiếp theoTìm hiểu Nextjs – Web framework tuyệt vời dựa trên React

Sơn Dương

Tên đầy đủ là Dương Anh Sơn. Tốt nghiệp ĐH Bách Khoa Hà Nội. Mình bắt đầu nghiệp coder khi mà ra trường chẳng xin được việc đúng chuyên ngành. Mình tin rằng chỉ có chia sẻ kiến thức mới là cách học tập nhanh nhất. Các bạn góp ý bài viết của mình bằng cách comment bên dưới nhé !

programming html

Hướng dẫn những react vào html

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

Components

Xin chào các bạn độc giả VNTALKING!

Xử lý data trong ReactJS (Handling data)

Props

Chào các bạn độc giả {this.props.message}!

State

Hello {this.state.message}!

Hello {this.state.message}!

Event Handlers

Hello {this.state.message}!

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội