Share Bắt đầu viết những dòng lệnh React đầu tiên

filiallion · 03/10/2020

Ở bài viết "Tạo ứng dụng React đơn giản đầu tiên" tôi đã hướng dẫn các bạn sử dụng công cụ Create React App để khởi tạo ứng dụng React chỉ với vài dòng lệnh đơn giản. Sau khi tạo ứng dụng thì các bạn sẽ nhận được website với giao diện mặc định của React mà không cần phải can thiệp bất kỳ dòng mã lệnh JavaScript nào. Bài viết này tôi sẽ hướng dẫn các bạn can thiệp vào mã lệnh và tuỳ chỉnh ứng dụng web theo mục đích của các bạn.

Mặc định, Create React App khi tạo ứng dụng sẽ có một tập tin src/App.js chứa nội dung JavaScript, đây chính là tập tin quan trọng quyết định giao diện của ứng dụng. Các bạn có thể mở tập tin src/App.js lên để xem nội dung mã lệnh JavaScript mà ứng dụng Create React App phát sinh tự động. Các bạn sẽ thấy có một hàm App trả về một khối nội dung khá giống với HTML nhưng thực sự thì không phải, khối mã lệnh này chính là JSX.

Các bạn có thể tuỳ chỉnh khối mã lệnh JSX này như ví dụ sau:

JavaScript:

function App() {
    return (
        <h1>Welcome to Gextend</h1>
    );
}

Các bạn cũng có thể thay thế hàm App ở trên bằng một lớp App như sau:

JavaScript:

class App extends React.Component
{
    render() {
        return (
            <h1>Welcome to Gextend</h1>
        );
    }
}

Các bạn cũng cần phải nhập thư viện React vào đầu tập tin src/App.js như sau:

JavaScript:

import React from 'react';

Trên đây chỉ là một vài dòng lệnh JavaScript trong React khá đơn giản, các bạn có thể tìm hiểu thêm về React tại địa chỉ https://reactjs.org/tutorial/tutorial.html.

Share Bắt đầu viết những dòng lệnh React đầu tiên

filiallion

Administrator