Viblo CTF
-4

Tôi đã bắt đầu với ReactJs như thế nào?

Chắc hẳn nhìn thấy dòng này thì bạn đã biết React là gì rồi nhỉ ✌️

Nói chung, React là thư viện JavaScript(là thư viện :v) được phát triển bởi Facebook dùng để xây dựng, xử lý giao diện người dùng.

Những thứ mà mình đã bắt đầu

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

Vào đây để setup và new app nha ae

Component là gì?

  • Component hoạt động giống như các hàm trả về các thành phần HTML
  • Là các thành phần độc lập có thể tái sử dụng thông qua các hàm render

Định nghĩa 1 component trong React

Thử định nghĩa 1 form search 🎮

Mình đặt tên là FormSearch.js nha

import React, { Component } from 'react';

class FormSearch extends Component {
    render() {
        return (
            <div className="col-12">
                <div className="form-group">
                    <div className="btn-group">
                        <input type="text" className="form-control" placeholder="Nhap tu khoa" />
                        <div className="btn btn-info">Search</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default FormSearch;

Tương ứng giao diện như component định nghĩa, tất nhiên thì nó sẽ được import và dùng trong App.js

App.js được định nghĩa như là, có import FormSearch.js component để sử dụng

import React from 'react';
import './../App.css';
import FormSearch from './FormSearch';

function App() {
  return (
    <div className="SearchForm">
      <div className="container">
        <div className="row">
          <FormSearch />
        </div>
      </div>
    </div>
  );
}

export default App;

Lưu ý: Chỉ return được về 1 khung div duy nhất, và bla vla thứ nữa là phải được bao trong thẻ div duy nhất đó, không là bị lỗi =))

JSX là gì?

Xem 2 file được define bên trên, chúng được viết bằng JSX đó, nhìn như html ghê. Thì cơ bản JSX (viết tắt của cụm từ JavaScript XML) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML. Code viết bằng JSX sẽ được chuyển sang JavaScript để trình duyệt có thể hiểu được. Thì cơ bản mình nêu sương sương kiểu mình hiểu như vậy thôi hehe

Chúng ta có thể chuyển đổi nhanh cú pháp từ html qua JSX nhanh bằng cách vào đây

Props, state là gì?

  • Props: theo mình hiểu 1 cách đơn giản, nó là 1 đối tượng, nó được sử dụng như là để giữa các component tương tác với nhau. Component con sẽ nhận được các giá trị của thuộc tính truyền vào từ bên ngoài vào(có thể là cha) để thực hiện những thứ bên trong nó mà nó cần.

Mình ví dụ luôn: Mình định nghĩa 1 component có tên HomeContent.js

import React, { Component } from 'react';
import NewsItem from './NewsItem';
import dl from './dulieu.json';

class HomeContent extends Component {
    render() {
        return (
            <div>
                <div className="container mt-3">
                    <div className="row">
                        {
                        dl.map((value, key) => {
                            return (
                                <NewsItem anh={value.anh} tieuDe={value.tieuDe} trichDan={value.trichDan}></NewsItem>
                            )
                        }
                        )}
                    </div>
                </div>
            </div>
        );
    }
}

export default HomeContent;

Note: Các bạn thấy trong component này có sử dụng data từ file dulieu.json(có thể xem trong repo mình để cuối bài nha).Mình giả lập như là data thiệc gọi từ 1 api nào đó

Thì cơ bản, trong component này sẽ có gọi đến 1 component tên là NewsItem và dùng dữ liệu của file dulieu.json để render.

Ta định nghĩa 1 component tên NewsItem.js, và tsẽ truyền vào dữ liệu để xem props được sử dụng như nào.

import React, { Component } from 'react';

class NewsItem extends Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div className="col-md-4 mt-3 mb-3">
                <div className="card-deck">
                    <div className="card">
                        <div className="card-body">
                            <img className="card-img-top" src={this.props.anh} alt="" />
                            <h4 className="card-title">{this.props.tieuDe}</h4>
                            <p className="card-text">{this.props.trichDan}</p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default NewsItem;

Mình lại liên tưởng tới component như là 1 partial =))

Khuyến cáo: Không nên thay đổi dữ liệu của props

  • State: State cũng thực hiện lưu dữ liệu, nó lưu trong 1 component sinh ra nó và có thể thay đổi bằng this.setState(). Khi nào trong 1 component có dữ liệu thay đổi thì mình nên dùng state

Lấy 1 ví dụ cho dễ hiểu :v

Dùng state để ẩn hiện form new -->>>>

import React, { Component } from 'react';

class AddUser extends Component {
    constructor(props) {
        super(props);
        this.state = {
            trangThai: true
        }
    }

    displayButton = () => {
        if(this.state.trangThai === true) {
            return <div className="btn btn-block btn-outline-info" onClick={this.changeStatus}>New</div>;
        } else {
            return <div className="btn btn-block btn-outline-secondary" onClick={this.changeStatus}>Close</div>;
        }
    }

    displayForm = () => {
        if(this.state.trangThai === false) {
            return (
                <div>
                    <div className="card-body text-primary">
                        <div className="form-group">
                        <input type="text" className="form-control" placeholder="Username" aria-describedby="helpId" />
                        </div>
                        <div className="form-group">
                        <input type="text" className="form-control" placeholder="PhoneNumber" aria-describedby="helpId" />
                        </div>
                        <div className="form-group">
                        <select className="form-control">
                            <option value="admin">Admin</option>
                            <option value="user">User</option>
                        </select>
                        </div>
                    </div>
                    <div className="text-center">
                        <button type="submit" className="btn btn-primary text-center">Submit</button>
                    </div>
                </div>
            )
        }
    }

    changeStatus = () => {
        this.setState({
            trangThai: !this.state.trangThai
        })
    }
    
    render() {
        return (
            <div className="col-3">
                <div className="card text-left">
                    <div className="card">
                        {this.displayButton()}
                        {this.displayForm()}
                    </div>
                </div>
            </div>
        );
    }
}

export default AddUser;
  • 1 status trangThai: true được khởi tạo
  • function displayButton để hiển thị button New hay Close
  • function changeStatus sẽ thay đổi phủ định theo trạng thái state hiện tại là gì khi được gọi
  • function displayForm hiển thị form new theo trạng thái của state

Đọc kĩ và suy ngẫm, hay ghê ae nhỉ :v

Ứng dụng mẫu

Mình có demo trên 2 ứng dụng mẫu, ae clone về xem qua nhé.

Đâyđây he ✌️

Kết

Đây là trải nghiệm ban đầu của mình về reactjs, bài viết có thể mang tính chủ quan nhiều. Anh em đọc thấy chỗ nào hiểu sai hoặc có vấn đề thì cứ góp ý để mình cải thiện bài viết hoàn thiện hơn cho bạn đọc sau. Cám ơn đã lướt qua bài viết của mình =))


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.