React小项目-在线计算器（上）

本文介绍如何使用 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 (
            <