react-100-mil

Vì một tương lai 100 củ với React

Tạo một project sử dụng create-react-app

Create-react-app là một open-source của Facebook, giúp cho việc tạo một project sử dụng Reactjs một cách đơn giản nhất có thể.

Tham khảo tài liệu hướng dẫn từ Facebook: https://create-react-app.dev/docs/getting-started

Mình đã tạo sẵn một project bằng create-react-app ở trong folder create-react-app, bạn chỉ cần vào thư mục này và dùng dòng lệnh npm install & npm run start là có ngay một website sử dụng Reactjs

Áp dụng Webpack vào project sử dụng create-react-app

Webpack (version 5) là một thư viện hỗ trợ biên dịch các Javascript module, thường được nhiều người sử dụng để biên dịch các dự án dùng ReactJS

Mình đã tạo sẵn một project bằng create-react-app sau đó cấu hình để có thể sử dụng webpack để bundle được project này. Bạn có thể truy cập vào folder react-webpack sau đó dùng dòng lệnh npm install & npm run start là có thể sử dụng được.

Sự khác biệt giữa State và Props

Cách sử dụng state trong class component và function component

// Class component
class App extends Component {
    constructor() {
        super();

        // Khai báo state
        this.state = {
            x: false
        };
    }

    componentDidMount() {
        // Cách cập nhật state trong class component
        this.setState({
            x: true
        })
    }
}

// Function component
import React, {useEffect, useState} from "react";

function App() {
    // Khai báo state cho x, giá trị thứ 2 "setX" có thể đặt tên bất kỳ, nhưng thông thường người ta hay đặt tên với tiền tố "set" ở trước
    const [x, setX] = useState(false)

    // ~ componentDidMount
    useEffect(() => {
        // Cập nhật state cho x
        setX(true);
    }, [])
}

Cách sử dụng props trong class component và function component đều giống nhau:

// Ví dụ ta có một component "App" ở trên thì ta sử dụng và truyền props như sau:
<App propName1={true} propName2="hehe" />

Life cycle trong Reactjs

Ví dụ về life cycle trong Class component

class App extends Component {
    constructor() {
        super();

        this.state = {x: false};
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentDidUpdate(prevProps, prevState, snapshot) {

    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return true;
    }

    componentDidCatch(error, errorInfo) {

    }

    componentWillUnmount() {

    }

    render() {
        return (
            <div>Hello</div>
        )
    }
}

Cách ánh xạ Life cycle từ React class qua Function component

Ví dụ về life cycle trong function component

function App() {
    const [a, setA] = useState(false)

    // ~ componentDidMount
    useEffect(() => {

    }, [])

    // ~ componentDidUpdate
    useEffect(() => {

    }, [a])

    // ~ componentWillUnmount
    useEffect(() => {
        return () => {
            // will unmount            
        }
    }, [])

    return (
        <div>Hello</div>
    )
}

Bắt các sự kiện trong Reactjs

Việc bắt sự kiện trong React rất đơn giản, giống như cách bắt sự kiện trong Javascript

// Ví dụ bắt sự kiện click vào một button
<button onClick={() => onClickButton}>Hello</button>

// Ví dụ bắt sự kiện change của một input
<input onChange={() => onchangeInput}/>