CONTENTS
本文介绍如何使用 React 制作一个小项目：在线计算器，即能够支持登录的部署在云服务器上的项目。该项目比较能体现出 React 的优势，需要多个组件之间进行交互。
本文为上篇内容，主要为前端部分的开发，下篇可见：React 小项目-在线计算器（下）。
1. 项目初始化
我们先创建项目 calculator_react：
create-react-app calculator_react
项目的页面设置如下（在写网站之前一定要先设计好，从上往下写）：
- 根目录：
/ - 主页：
/home - 计算器：
/calculator - 登录：
/login - 注册：
/register - Not Found：
/404
我们可以创建一个 App 组件，该组件包含一个 NavBar 和一个 Content 组件，然后 Content 组件中再包含 Home、Calculator、Login、Register 和 NotFound。
打开项目根目录，安装相应的库：
npm i bootstrap
npm i react-router-dom
npm i redux react-redux @reduxjs/toolkit
2. 总体前端界面设计
我们先用 Bootstrap 组件实现导航栏 NavBar：
import React, {
Component } from 'react';
import {
Link } from 'react-router-dom'
class NavBar extends Component {
state = {
}
// container-fluid布局会靠在左右两边，把fluid去掉就会稍微靠中间一点
render() {
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container">
<Link className="navbar-brand" to="/">AsanoSaki's Calculator</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarText">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" to="/home">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/calculator">Calculator</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
</ul>
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" to="/login">Login</Link>
</li>
<li className="nav-item" style={
{
paddingTop: '8px'}}>
|
</li>
<li className="nav-item">
<Link className="nav-link" to="/register">Register</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default NavBar;
然后我们先创建出每个页面的组件，以 Home 为例：
import React, {
Component } from 'react';
class Home extends Component {
state = {
}
render() {
return (
<h1>Home</h1>
);
}
}
export default Home;
现在我们需要在 App 中写一下路由：
import React, {
Component } from 'react';
import {
Route, Routes, Navigate } from 'react-router-dom'
import NavBar from './navbar';
import Home from './content/home';
import Calculator from './content/calculator';
import About from './content/about';
import Login from './content/login';
import Register from './content/register';
import NotFound from './content/notfound';
class App extends Component {
state = {
}
render() {
return (
<React.Fragment>
<NavBar />
<div className='container'>
<Routes>
<Route path='/' element={
<Home />}></Route>
<Route path='/home' element={
<Home />}></Route>
<Route path='/calculator' element={
<Calculator />}></Route>
<Route path='/about' element={
<About />}></Route>
<Route path='/login' element={
<Login />}></Route>
<Route path='/register' element={
<Register />}></Route>
<Route path='/404' element={
<NotFound />}></Route>
<Route path='*' element={
<Navigate replace to='/404' />}></Route>
</Routes>
</div>
<h1>Hello App</h1>
</React.Fragment>
);
}
}
export default App;
然后我们更新一下 index.js 文件：
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap';
import {
BrowserRouter } from 'react-router-dom';
import App from './components/app';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
我们可以将每个页面的内容放到一个 Bootstrap 的卡片中，我们创建一个卡片组件 Card：
import React, {
Component } from 'react';
class Card extends Component {
state = {
}
render() {
return (
<div className="card" style={
{
marginTop: '20px'}}>
<div className="card-body">
{
this.props.children}
</div>
</div>
);
}
}
export default Card;
然后我们就可以对每个页面做一个小优化，以 Home 为例：
import React, {
Component } from 'react';
import Card from './card';
class Home extends Component {
state = {
}
render() {
return (
<Card>
<h3>Home</h3>
<hr />
<p>这是一个 React 项目：在线计算器</p>
<p>可以根据导航栏的指引跳转至相应的页面</p>
</Card>
);
}
}
export default Home;
3. 计算器前端界面设计
我们实现计算器的前端界面，在 Calculator 中进行修改：
import React, {
Component } from 'react';
import Card from './card';
class Calculator extends Component {
state = {
}
render() {
return (
<