ReactJS - Tạo Ứng dụng React

Xin chào các nhà phát triển React tương lai! Tôi rất vui mừng được hướng dẫn bạn trên hành trình thú vị của việc tạo ra ứng dụng React đầu tiên của bạn. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể đảm bảo với bạn rằng React không chỉ mạnh mẽ mà còn rất thú vị để học. Hãy cùng bắt đầu nào!

ReactJS - Creating a React Application

React là gì?

Trước khi chúng ta bắt đầu lập mã, hãy hiểu React là gì. React là thư viện JavaScript phổ biến để xây dựng giao diện người dùng. Nó được phát triển bởi Facebook và hiện được nhiều công ty lớn như Netflix, Instagram và Airbnb sử dụng. Hãy tưởng tượng React như một bộ Legos mà bạn có thể sử dụng để dễ dàng xây dựng các ứng dụng web phức tạp.

Bắt đầu

Để tạo một ứng dụng React, chúng ta cần một số công cụ. Đừng lo lắng nếu bạn chưa từng sử dụng chúng trước đây - chúng ta sẽ cùng nhau qua từng bước!

Yêu cầu

Node.js và npm (Node Package Manager)
Một trình soạn thảo mã (Tôi khuyến nghị Visual Studio Code)

Nếu bạn chưa cài đặt chúng, hãy dành một chút thời gian để làm điều đó. Điều này giống như chuẩn bị nhà bếp trước khi nấu một bữa ăn ngon!

Sử dụng Rollup bundler

Hãy bắt đầu bằng cách tạo một ứng dụng React sử dụng Rollup. Rollup là một bộ gộp module cho JavaScript giúp biên dịch các mảnh mã nhỏ thành một thứ lớn hơn và phức tạp hơn.

Bước 1: Thiết lập dự án

Trước tiên, hãy tạo một thư mục mới cho dự án của chúng ta và khởi tạo nó:

mkdir my-react-app
cd my-react-app
npm init -y

Điều này tạo ra một thư mục mới và khởi tạo một dự án Node.js mới. Điều này giống như đặt nền móng cho ngôi nhà của chúng ta!

Bước 2: Cài đặt các phụ thuộc

Bây giờ, hãy cài đặt các gói cần thiết:

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

Đừng lo lắng về những tên dài như vậy. Hãy nghĩ chúng như những nguyên liệu cho công thức React của chúng ta!

Bước 3: Tạo các tệp cấu hình

Hãy tạo hai tệp quan trọng:

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

Tệp này告诉 Rollup cách gộp ứng dụng của chúng ta. Điều này giống như đưa ra hướng dẫn cho đầu bếp về cách chuẩn bị một món ăn.

.babelrc:

{
"presets": ["@babel/preset-react"]
}

Tệp này cấu hình Babel, giúp dịch JavaScript hiện đại thành phiên bản mà các trình duyệt cũ có thể hiểu.

Bước 4: Tạo các thành phần React

Bây giờ, hãy tạo thành phần React đầu tiên của chúng ta! Tạo một tệp mới src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>Chào mừng bạn đến với ứng dụng React đầu tiên của tôi!</p>
</div>
);
}

export default App;

Đây là thành phần chính của chúng ta. Nó giống như ngôi sao của chương trình của chúng ta!

Tiếp theo, tạo src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Tệp này chịu trách nhiệm渲染 thành phần App của chúng ta vào HTML.

Bước 5: Tạo tệp HTML

Tạo một tệp mới public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

Đây là nơi ứng dụng React của chúng ta sẽ được gắn.

Bước 6: Thêm các script vào package.json

Cập nhật package.json của bạn để bao gồm các script sau:

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

Các script này sẽ giúp chúng ta xây dựng và chạy ứng dụng.

Bước 7: Xây dựng và chạy ứng dụng

Bây giờ, hãy mang tác phẩm của chúng ta đến cuộc sống! Chạy:

npm run build

Điều này sẽ tạo tệp JavaScript gộp của chúng ta. Để xem ứng dụng của bạn, mở public/index.html trong trình duyệt web. Chúc mừng! Bạn vừa tạo xong ứng dụng React đầu tiên của mình sử dụng Rollup!

Sử dụng Parcel bundler

Bây giờ, khi chúng ta đã xem cách sử dụng Rollup, hãy thử một bộ gộp phổ biến khác: Parcel. Parcel được biết đến với cách tiếp cận không cần cấu hình, giúp dễ dàng bắt đầu.

Bước 1: Thiết lập dự án

Hãy tạo một dự án mới:

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

Bước 2: Cài đặt các phụ thuộc

Cài đặt React và Parcel:

npm install react react-dom
npm install --save-dev parcel-bundler

Bước 3: Tạo các thành phần React

Tạo src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>Ứng dụng này được gộp bằng Parcel.</p>
</div>
);
}

export default App;

Tạo src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Bước 4: Tạo tệp HTML

Tạo src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Parcel React App</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

Lưu ý rằng chúng ta đang liên kết trực tiếp với tệp index.js. Parcel sẽ lo liệu việc gộp cho chúng ta!

Bước 5: Thêm các script vào package.json

Cập nhật package.json của bạn:

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

Bước 6: Chạy ứng dụng

Bây giờ, hãy khởi động ứng dụng của chúng ta:

npm start

Parcel sẽ tự động mở ứng dụng của bạn trong trình duyệt. Bất kỳ thay đổi nào bạn thực hiện sẽ được phản ánh ngay lập tức!

Để xây dựng cho sản xuất:

npm run build

Điều này sẽ tạo các tệp tối ưu hóa trong thư mục dist.

So sánh Rollup và Parcel

Dưới đây là một so sánh nhanh giữa hai bộ gộp chúng ta đã sử dụng:

Tính năng	Rollup	Parcel
Cấu hình	Cần tệp cấu hình	Không cần cấu hình
Tốc độ	Nhanh	Rất nhanh
Kích thước gộp	Nói chung nhỏ hơn	Nhỉnh hơn một chút
Độ khó học	Dốc hơn	Dễ dàng
Độ linh hoạt	Rất tùy chỉnh	Ít tùy chỉnh

Cả hai bộ gộp đều có những ưu điểm riêng, và sự lựa chọn giữa chúng thường phụ thuộc vào nhu cầu cụ thể của dự án của bạn.

Kết luận

Chúc mừng! Bạn đã tạo ra các ứng dụng React sử dụng cả Rollup và Parcel. Hãy nhớ rằng, hành trình của ngàn dặm bắt đầu từ một bước, và bạn đã bước những bước đầu tiên vào thế giới thú vị của phát triển React.

Khi bạn tiếp tục học hỏi và phát triển, bạn sẽ khám phá ra rằng React mở ra một thế giới mới đầy khả năng trong phát triển web. Điều này giống như học vẽ - ban đầu, bạn có thể struggle với các hình dạng cơ bản, nhưng sớm bạn sẽ tạo ra các kiệt tác!

Tiếp tục thực hành, giữ vững sự tò mò và quan trọng nhất, hãy vui vẻ! React là một công cụ mạnh mẽ, nhưng nó cũng rất thú vị để sử dụng. Chúc bạn vui vẻ khi lập mã!

Credits: Image by storyset