Getting Started with React

min read

Hôm này mình sẽ chia sẻ với các bạn về React, mình cũng mới tìm hiểu thôi, thấy khá là thú vị, nên viết bài chia sẻ để đó, lúc nào cần thì xem thôi
Để cài được React ta cần làm những bước sao đây:
+ Install Node.js, bạn nào chưa tải thì vào trang chủ Node.js tải nhé
+ Tải phần mềm Visual Studio Code, để viết cho nhẹ, cài 1 số plugin hổ trợ React trong Visual Studio Code 
  - ES7 React/Redux/GraphQL/React-Native snippets
  - Auto Rename Tag 

Installing the create-react-app Package

npx create-react-app name_project

//State the development server
cd name_project
npm start

//Build project 
# npm run build 

Ok, sau khi ta cài xong, ta sẽ được cấu trúc thư mục project như sau:

Getting Started with React

+ public/html: Nó chứa các tiệp (Html/Javascript) của ứng dụng, để hiển thị trên trình duyệt
+ src/index.js: Đây là file chịu trách nhiệm cấu hình ứng dụng của React. Bạn có thể add thư viện Bootstrap CSS framework vào file này
+ src/App.js: Đây là một Compnent của React. Ta cấu hình nội dụng HTML cho người dùng và mã Javascript cho HTML

Adding the Bootstrap CSS Framework

cd name_project
npm install bootstrap@4.1.2

Sau khi cài đặt xong, bạn có thể import file Bootstrap CSS vào src/index.js như sau:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Ok, giờ ta có thể khởi chạy ứng dụng

cd create-app-react
npm start 
Tag: React