React (hay còn được gọi là React.js hoặc ReactJS) là một thư viện JavaScript để xây dựng giao diện người dùng. Được duy trì bởi Facebook và cộng đồng lập trình viên, React đang thay đổi cách mọi người trên toàn thế giới trải nghiệm internet.
Trong bài viết này, chúng ta sẽ khám phá cách tạo một ứng dụng React cơ bản, nhưng đã được tổ chức, có cấu trúc và sẵn sàng để triển khai. Bài viết này sẽ giúp bạn có một khung để bắt đầu dự án mới của mình.
Bạn đang xem: Cách bắt đầu với ReactJs
Contents
1. Điều kiện tiên quyết và giả định
Trước khi chúng ta bắt đầu, cần có kiến thức cơ bản về lập trình, phát triển web và JavaScript. Đảm bảo bạn đã cài đặt phiên bản mới nhất của Yarn cho hệ điều hành của bạn. Sử dụng trình chỉnh sửa văn bản yêu thích của bạn (ví dụ: Sublime Text) để làm việc.
2. Tạo ứng dụng ban đầu
Trong suốt quá trình hướng dẫn này, hãy kiểm tra thường xuyên để xem có lỗi nào xuất hiện trên terminal và trình duyệt của bạn.
Đầu tiên, hãy kiểm tra xem bạn đã cài đặt Yarn chưa bằng cách chạy lệnh sau trên terminal:
yarn -v
Nếu phiên bản của Yarn xuất hiện, điều này có nghĩa là bạn đã cài đặt thành công. Nếu không, hãy xem lại cấu hình cài đặt.
Bây giờ, chúng ta sẽ tạo một project mới bằng cách chạy lệnh sau:
yarn create react-app my-react-app
Lệnh này sẽ tạo ra một project React ban đầu. Để chạy ứng dụng, di chuyển vào thư mục dự án và chạy lệnh sau:
cd my-react-app
yarn start
Truy cập http://localhost:3000/ trong trình duyệt để xem ứng dụng ban đầu được tạo. Nó sẽ trông giống như hình sau:
Giờ đây, chúng ta có những thành phần ứng dụng cơ bản và có thể tùy chỉnh để phù hợp với nhu cầu của mình.
3. Tạo ứng dụng có cấu trúc
Trước khi bắt đầu triển khai, hãy tạo cấu trúc cơ bản cho ứng dụng. Bắt đầu bằng cách tạo ba thư mục trong thư mục src
:
components
: Thư mục này sẽ chứa các thành phần của bạn, các phần UI độc lập và có thể tái sử dụng.pages
: Đây là nơi chúng ta sẽ tạo các trang cho ứng dụng web này, bao gồm cả trang tĩnh và động. Sự khác biệt giữa các thành phần và các trang rất quan trọng. Mỗi trang sẽ là một chế độ xem mà người dùng sẽ thấy. Một trang được tạo nên từ các thành phần ghép lại.services
: Thư mục dịch vụ sẽ chứa các dịch vụ cho phép tìm nạp, chuyển đổi và lưu trữ dữ liệu. Chúng ta sẽ tạo các dịch vụ để xử lý các chức năng khác nhau trong ứng dụng.
Sau khi tạo cấu trúc thư mục, thư mục src
của bạn sẽ trông như sau:
Bây giờ, chúng ta đã có một cấu trúc cơ bản để tiếp tục. Một việc nữa cần làm là xóa những thành phần mặc định của React.
Xem thêm : Framework là gì? Những Framework nào nổi tiếng nhất hiện nay?
Đầu tiên, chúng ta có thể xóa logo.svg
vì chúng ta không cần logo React lớn. Tiếp theo, hãy mở App.js
và xóa mã trong đó. Sau khi xóa, App.js
sẽ trông như sau:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Xin chào các bạn!</h1>
</div>
);
}
export default App;
Nếu bạn kiểm tra ứng dụng của mình lúc này, nó sẽ hiển thị như sau:
4. Triển khai ứng dụng của riêng bạn
4.1. Router
Chúng ta sẽ cài đặt và cấu hình router cho ứng dụng để người dùng có thể dễ dàng điều hướng giữa các trang.
Dừng server và chạy lệnh sau trong thư mục gốc của dự án để cài đặt React Router:
yarn add react-router-dom
Với cài đặt này, hãy cập nhật file index.js
như sau để cấu hình router trong ứng dụng:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
4.2. Các thành phần cơ bản
Trước khi tạo trang, chúng ta sẽ tạo hai thành phần trong thư mục components
. Thành phần Header
sẽ hiển thị trong mỗi trang và thành phần Main
sẽ chứa nội dung chính của từng trang.
Cập nhật App.js
như sau để thêm hai thành phần vào:
import React from 'react';
import './App.css';
import Header from './components/Header/Header';
import Main from './components/Main/Main';
function App() {
return (
<div className="App">
<Header />
<Main />
</div>
);
}
export default App;
Tiếp theo, tạo hai thành phần Header
và Main
. Trong thư mục components/Header
, tạo một file có tên Header.js
với mã sau:
import React from 'react';
import './Header.css';
function Header() {
return (
<header>
<h1>Our React Starter</h1>
</header>
);
}
export default Header;
Trong thư mục components/Main
, tạo một file có tên Main.js
với mã sau:
import React from 'react';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from '../../pages/Home/Home';
import UserPage from '../../pages/UserPage/UserPage';
import './Main.css';
function Main() {
return (
<main>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users/:id" component={UserPage} />
</Switch>
</BrowserRouter>
</main>
);
}
export default Main;
Cuối cùng, chạy lại ứng dụng của bạn bằng cách chạy lệnh yarn start
. Kết quả sẽ hiển thị như sau:
4.3. Tạo trang
Trong phần này, chúng ta sẽ tạo hai trang: Trang chủ và trang hiển thị thông tin người dùng. Trang chủ sẽ hiển thị danh sách người dùng lấy từ một API cụ thể. Khi người dùng nhấp vào một người dùng, chúng ta sẽ điều hướng đến trang hiển thị thông tin người dùng.
Đầu tiên, chúng ta sẽ tạo cấu trúc cơ bản của hai trang này và tạo đường dẫn tương ứng cho mỗi trang. Trong thư mục pages/Home
, tạo một file có tên Home.js
với mã sau:
import React from 'react';
import { Link } from 'react-router-dom';
import UserService from '../../services/UserService/UserService';
class Home extends React.Component {
constructor() {
super();
this.state = {
users: [],
};
this.userService = new UserService();
}
componentDidMount() {
this.userService.getAllUsers().then((response) => {
this.setState({ users: response });
});
}
renderUsers = () => {
return this.state.users.map((user, key) => {
return (
<li key={key}>
<Link to={`/users/${user.id}`}>{user.name}</Link>
</li>
);
});
};
render() {
return (
<div>
<ul>{this.renderUsers()}</ul>
</div>
);
}
}
export default Home;
Trong thư mục pages/UserPage
, tạo một file có tên UserPage.js
với mã sau:
import React from 'react';
import UserService from '../../services/UserService/UserService';
class UserPage extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {},
};
this.userService = new UserService();
}
componentDidMount() {
const id = this.props.match.params.id;
this.userService.getUser(id).then((response) => {
this.setState({ user: response });
});
}
render() {
const user = this.state.user;
return (
<div>
<h2>Name: {user.name}</h2>
<p>Username: {user.username}</p>
<p>Email: {user.email}</p>
<p>Phone: {user.phone}</p>
</div>
);
}
}
export default UserPage;
Xem thêm : Giáo trình Cấu trúc dữ liệu và giải thuật – Đinh Mạnh Tường
Sau khi tạo các trang, chúng ta cần cập nhật thành phần Main
để có thể tạo đúng đường dẫn cho từng trang. Trong file Main.js
, cập nhật mã như sau:
import React from 'react';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from '../../pages/Home/Home';
import UserPage from '../../pages/UserPage/UserPage';
import './Main.css';
function Main() {
return (
<main>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users/:id" component={UserPage} />
</Switch>
</BrowserRouter>
</main>
);
}
export default Main;
4.4. Tạo một dịch vụ và triển khai nó
Khi chúng ta bắt đầu tạo trang, chúng ta nói rằng chúng sẽ hiển thị một số dữ liệu lấy từ một nguồn nào đó. Để làm điều đó, chúng ta sẽ tạo một dịch vụ để xử lý các yêu cầu và sau đó liên kết chúng trong các trang. Đầu tiên, cài đặt Axios – một thư viện phổ biến để gửi và nhận dữ liệu HTTP cho React:
yarn add axios
Sau khi cài đặt Axios, tạo một thư mục UserService
trong thư mục services
. Trong thư mục này, tạo một file có tên UserService.js
với mã sau:
import axios from 'axios';
const API_URL = 'https://jsonplaceholder.typicode.com';
class UserService {
async getAllUsers() {
const url = `${API_URL}/users/`;
return axios.get(url).then((response) => response.data);
}
async getUser(id) {
const url = `${API_URL}/users/${id}`;
return axios.get(url).then((response) => response.data);
}
}
export default UserService;
Trong file này, chúng ta đã tạo một class chứa các phương thức liên quan đến người dùng. Hai phương thức đã được triển khai, một để lấy tất cả người dùng và một phương thức khác để lấy thông tin của một người dùng cụ thể.
Bây giờ, chúng ta có thể sử dụng các phương thức này trong các trang của mình để lấy và hiển thị dữ liệu. Dưới đây là cách cập nhật trang Home
:
import React from 'react';
import { Link } from 'react-router-dom';
import UserService from '../../services/UserService/UserService';
class Home extends React.Component {
constructor() {
super();
this.state = {
users: [],
};
this.userService = new UserService();
}
componentDidMount() {
this.userService.getAllUsers().then((response) => {
this.setState({ users: response });
});
}
renderUsers = () => {
return this.state.users.map((user, key) => {
return (
<li key={key}>
<Link to={`/users/${user.id}`}>{user.name}</Link>
</li>
);
});
};
render() {
return (
<div>
<ul>{this.renderUsers()}</ul>
</div>
);
}
}
export default Home;
Đồng thời, cập nhật trang UserPage
như sau:
import React from 'react';
import UserService from '../../services/UserService/UserService';
class UserPage extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {},
};
this.userService = new UserService();
}
componentDidMount() {
const id = this.props.match.params.id;
this.userService.getUser(id).then((response) => {
this.setState({ user: response });
});
}
render() {
const user = this.state.user;
return (
<div>
<h2>Name: {user.name}</h2>
<p>Username: {user.username}</p>
<p>Email: {user.email}</p>
<p>Phone: {user.phone}</p>
</div>
);
}
}
export default UserPage;
Sau khi hoàn thành, hãy chạy lại ứng dụng của bạn và kiểm tra kết quả!
4.5. Tạo giao diện ưa thích
Mặc dù chúng ta không tạo nhiều kiểu dáng trong bài viết này, nhưng có thể import một số kiểu dáng để ứng dụng của chúng ta trở nên hấp dẫn hơn. Hãy tạo các tệp của bạn và thêm kiểu dáng vào chúng.
Trong thư mục components/Header
, tạo một tệp có tên Header.css
với nội dung sau:
header {
color: white;
background-color: #c1c1c1;
height: 100%;
}
h1 {
text-align: left;
margin: 0 5px 5px 5px;
}
Trong thư mục components/Main
, tạo một tệp có tên Main.css
với nội dung sau:
li {
list-style-type: none;
}
.link {
text-decoration: none;
color: black;
cursor: auto;
}
.link:hover {
text-decoration: none;
color: #1192d3;
cursor: auto;
}
.link:visited {
text-decoration: none;
cursor: auto;
}
Cuối cùng, hãy cập nhật các thành phần tương ứng để import các tệp kiểu dáng mới:
- Trong file
Header.js
, cần importHeader.css
:
import React from 'react';
import './Header.css';
...
- Trong file
Main.js
, cần import cảMain.css
vàLink
từreact-router-dom
:
import React from 'react';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';
import Home from '../../pages/Home/Home';
import UserPage from '../../pages/UserPage/UserPage';
import './Main.css';
...
Sau đó, bạn cần áp dụng các lớp kiểu dáng vào mã JSX tương ứng. Ví dụ:
<h1 className="header-title">Our React Starter</h1>
...
<ul>
{this.state.users.map((user, index) => (
<li key={index}>
<Link to={`/users/${user.id}`} className="link">
{user.name}
</Link>
</li>
))}
</ul>
Cuối cùng, hãy xem kết quả của bạn!
Mặc dù bài viết này chỉ trình bày những điều cơ bản ban đầu để tạo ra ứng dụng React, nhưng cách tiếp cận này sẽ giúp bạn dễ dàng thêm, sửa đổi và xóa các tính năng trong ứng dụng của riêng bạn. Bạn có thể thêm các thư mục Test với Jest, SCSS, TypeScript và nhiều thứ khác để nâng cao chất lượng và mở rộng ứng dụng của mình.
Nguồn: medium.com
Nguồn: https://laptrinhc.edu.vn
Danh mục: Tài liệu IT