React脚手架项目示例

1 create-react-app的使用
- 1.1 使用cmd创建
- 1.2 使用WebStorm创建
2 安装依赖：react-bootstrap模块
3 【案例】在前端显示后台的数据表（在React中使用bootstrap库）
- 3.1 效果展示
- 3.2 编写后端代码
- 3.3 编写前端代码

1 create-react-app的使用

1.1 使用cmd创建

1、全局安装

npm install -g create-react-app

2、创建项目：

# 方法1
npm init react-app 项目名称
# 方法2
create-react-app 项目名称
# 方法3
npx create-react-app 项目名称
# 方法4
yarn create react-app 项目名称

3、启动项目：
（1）进入项目所在的目录

cd 项目名称

（2）运行项目

# 方式1
npm start
# 方式2
yarn start

同时会打开以下网页：

4、查看目录结构

5、启动测试

# 方式1
npm test
# 方式2
yarn test

6、构建生产版本

# 方式1
npm run build
# 方式2
yarn build

1.2 使用WebStorm创建

打开WebStorm，选择最上面的File—>New—>Project。

按照以下步骤创建即可。

2 安装依赖：react-bootstrap模块

React-Bootstrap是一款基于ReactJS对Bootstrap进行封装的库，是一个可重用的前端组件库。react-bootstrap的样式组件依赖于bootstrap。

1、安装bootstrap

npm install bootstrap@3.3.7 --save

2、安装react-bootstrap（版本不宜太高，否则有些样式不识别）

npm install react-bootstrap@0.33.0 --save

3、安装css-loader astyle-loader url-loader

npm install css-loader style-loader
npm install url-loader

4、在App.css文件中引入bootstrap.css

@import "~bootstrap/dist/css/bootstrap.css";

3 【案例】在前端显示后台的数据表（在React中使用bootstrap库）

3.1 效果展示

将info数据库中的stu表显示在页面上，stu表具体如下：

案例效果展示：

3.2 编写后端代码

在WebStorm中新建一个Express项目my-app2-server，首先安装一些库：

# 安装mysql2
npm install mysql2
# 安装sequelize
npm install sequelize
# 安装cors
npm install cors

1、在bin文件夹下的www.js文件中第15行代码修改端口号，默认是3000，修改为8089，修改后代码如下：

var port = normalizePort(process.env.PORT || '8089');

2、在当前项目中创建文件夹config，在该文件夹下创建dbconfig.js文件

该文件用来创建数据库连接池，具体代码如下：

// 导入sequelize模块
const Sequelize = require("sequelize");
// 配置数据库连接对象（默认带有数据库连接池）：数据库名，用户名，密码，配置
let sequelize = new Sequelize("info", "root", "123456", {host: "localhost", // 本机地址port: 3306, // 数据库端口号dialect: "mysql", // 数据库类型，mysql|sqlite|postgres|mssqlpool: { // 数据库连接池max: 5, // 连接池中最大连接数量min: 0, // 连接池最小连接数量idle: 10000, // 如果某个线程10秒内没有被使用，则释放该线程}
})
module.exports = sequelize; // 导出模块

3、在当前项目下新建model文件夹，在文件夹中创建studentModel.js文件

在该文件用来创建数据库模型，将数据库中的列名进行映射，代码如下：

const Sequelize = require("sequelize");
const DB = require("../config/dbconfig")const Student = DB.define("stu", {id: {type: Sequelize.STRING,primaryKey: true, // 作为主键field: "sid" // 该属性名映射数据库中列名},name: {type: Sequelize.STRING,allowNull: false,// 不允许为空field: "sname"},age: {type: Sequelize.INTEGER,allowNull: false},gender: {type: Sequelize.STRING,allowNull: false}
}, {freezeTableName: true, // 映射表的名字timestamps: false // 不生成时间戳
})module.exports = Student; // 导出配置文件

4、在routes文件夹下有两个文件，接下来通过修改users.js文件部分代码来实现数据查询的操作，代码如下：

var express = require("express");
var router = express.Router();
var Student = require("../model/studentModel");// http://localhost:8089/users/student
router.get("/student", (req, res) => {Student.findAll({raw: true // 显示时间戳}).then(result => {res.json(result); // 发送查询的结果}).catch(err => {console.log(err); // 如果查询失败显示错误})
})module.exports = router;

5、最后一步，到app.js文件中进行配置跨域模块cors

// 引入cors模块
var cors = require("cors");
// 使用cors模块
app.use(cors());

3.3 编写前端代码

首先需要安装模块：

# 1、安装bootstrap
npm install bootstrap@3.3.7 --save
# 2、安装react-bootstrap（版本不宜太高，否则有些样式不识别）
npm install react-bootstrap@0.33.0 --save
# 3、安装css-loader astyle-loader url-loader
npm install css-loader style-loader
npm install url-loader
# 4、在App.css文件中引入bootstrap.css
@import "~bootstrap/dist/css/bootstrap.css";
# 5 安装axios
npm install axios

1、在src目录下新建config文件夹，在其中新建apiconfig.js文件，在该文件中将本机地址以及端口号导出，这样便于修改端口号和服务器地址，改一处就可以全部修改。

代码如下：

export const HOST = "http://localhost"; // 服务器地址
export const PORT = 8089; // 端口号

在编写代码时WebStorm可能会弹出以下提示，这时点击第三个ESLint settings…

默认选择的是第二个，表示最严格的格式检查，这时我们选择第一个Disable ESLint，点击OK即可关闭。

2、在src目录下新建文件夹components，用来存放编写的组件。在其中新建文件夹home.js（扩展名也可以为.jsx）

代码如下：

import React from "react";
import {Table, Button, Glyphicon} from "react-bootstrap";
import {HOST, PORT} from "../config/apiconfig";
import "./home.css"; // 引入表格的CSS样式
import axios from "axios"; // 或者写成import $http from "axios";// 创建类组件
class UserTable extends React.Component {constructor(props) {super(props);// 定义状态机this.state = {data: []}}componentDidMount() { // 执行完render执行该函数const _this = this;axios.get(`${HOST}:${PORT}/users/student`).then(res => {_this.setState({data: res.data // 从后端接收到的result存放在数组data中})}).catch(err => {console.log(err);})}// render函数中编写表格render() {const {data} = this.state; // 将状态机中的data通过解构赋值取出来，便于后续操作遍历data中的数据return (<div>{/*bordered表示带边框，striped表示隔行变色，hover表示鼠标悬停效果*/}<Table bordered striped hover><thead><tr><th width={100}>学号</th><th width={100}>姓名</th><th width={100}>年龄</th><th width={100}>性别</th><th width={200} colSpan={2}>操作</th></tr></thead><tbody>{/*由于取到的数据不止一个，使用{}可以将数据挨个遍历出来*/}{// 先将数据遍历出来，然后添加到表格中// map表示数组中的每一个元素都要执行回调函数data.map((user) => {return (// 多行数据需要有一个key属性，否则会报错<tr key={user.id}>{/*参数值与后台相对应，而不是与数据库对应*/}<td>{user.id}</td><td>{user.name}</td><td>{user.age}</td><td>{user.gender}</td><td>{/*link表示超链接按钮，small表示为小按钮*/}<Button bsStyle={"link"} bsSize={"small"}>{/*Glyphicon表示图标*/}<Glyphicon glyph={"edit"}/>编辑</Button></td><td><Button bsStyle={"link"} bsSize={"small"}><Glyphicon glyph={"remove"}/>删除</Button></td></tr>)})}</tbody></Table></div>)}
}export default UserTable; // 导出组件

3、在App.js文件中导入刚刚编写的类组件，删除一部分文件中已经编写好的代码，将编写好的类组件写进去，代码如下：

import logo from './logo.svg'; // 原本React的logo
import './App.css';
import UserTable from "./components/home"; // 自己编写的类组件function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo"/><UserTable/></header></div>);
}export default App;

4、由于当前页面展示效果不太好看，因此我们还需要对CSS样式做一些调整。在components文件夹下新建文件home.css，为刚刚编写的表格做一些样式上的修改，代码如下：

/*为表格头部编写样式*/
tr > th {/*文本居中*/text-align: center;/*文字颜色为黑色*/color: black;/*修改字体大小*/font-size: 20px;
}/*为普通单元格编写样式*/
td {color: red;font-size: 15px;
}

这时将该文件引入到home.js文件中，刷新网页就可以看到效果。

5、最后一步，将该网页目前的效果稍作修改，找到App.css文件，修改后代码如下：

@import "~bootstrap/dist/css/bootstrap.css";.App {text-align: center;
}.App-logo {height: 20vmin;pointer-events: none;
}.App-header {background-color: white;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: calc(10px + 2vmin);color: white;
}

启动服务器，启动React项目，就可以看到当前页面的效果：

React脚手架项目示例相关推荐

React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物为何学习 React React 初体验来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
React学习笔记---React脚手架
React脚手架一.使用create-react-app创建react应用 1.react脚手架 2.创建项目并启动 3.react脚手架项目结构 4.功能界面的组件化编码流程(通用) 5.用脚手架 ...
React学习笔记3：React脚手架
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServe ...
【Recat 应用】之 React 脚手架
Visual Studio Code 安装 React 插件 ES7 React/Redux/GraphQL/React-Native snippets 插件使用 create-react-app ...
React脚手架案例
React脚手架一初始化 react 脚手架需要理解的概念有: 脚手架的作用是什么脚手架的支持技术是什么?webpack(入口.出口.加载器.模式.插件) 脚手架将会做哪些工作 JSX的预解析 ...
React进阶 - React脚手架
创建项目并启动全局安装:npm i -g create-react-app 切换到要创建项目的文件夹,使用命令:create-react-app hello-react 进入项目文件夹:cd hel ...
React（二）react脚手架的搭建
目录一.搭建本地开发环境二.创建 React 脚手架项目三.VS Code 启动脚手架项目 React脚手架我们所用的其中一个是Create React App,Create React App ...
【React】React全家桶（四）React脚手架
文章目录 1 使用create-react-app创建react应用 1.1 React脚手架 1.2.创建项目并启动 1.3 react脚手架项目结构 1.4 组件化编码流程 2 脚手架版 Hell ...
使用create-react-app创建react脚手架
一. react脚手架项目的整体技术架构为: react + webpack + es6 + eslint 参考网址 :https://zhuanlan.zhihu.com/p/299208218# ...
react脚手架运用
3.1. 使用create-react-app创建react应用 3.1.1. react脚手架 1.xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1.包含了所有需要的配置(语法检 ...

React脚手架项目示例

React脚手架项目示例

1 create-react-app的使用

1.1 使用cmd创建

1.2 使用WebStorm创建

2 安装依赖：react-bootstrap模块

3 【案例】在前端显示后台的数据表（在React中使用bootstrap库）

3.1 效果展示

3.2 编写后端代码

3.3 编写前端代码

React脚手架项目示例相关推荐

最新文章

热门文章