创建react项目比较难着手的原因之一就是项目的架构，这里我以一个博客系统的搭建为例
当然，create-react-app 这个工具可以帮你快速创建一个react项目，但我个人觉得还是自己搭建一个模板比较好理解
我们的博客系统目录结构
- node_modules是自动生成的存放npm引入的模块文件
- public用来存放静态文件
- server存放数据库的相关文件
npm5.0版本的新变化
- 使用npm install xxx命令安装模块时，不再需要--save选项，会自动将模块依赖信息保存到 package.json 文件；
- 安装模块操作（改变 node_modules 文件夹内容）会生成或更新 package-lock.json 文件
- 发布的模块不会包含 package-lock.json 文件
- 如果手动修改了 package.json 文件中已有模块的版本，直接执行npm install不会安装新指定的版本，只能通过npm install xxx@yy更新
重新安装模块之所以快，是因为 package-lock.json 文件中已经记录了整个 node_modules 文件夹的树状结构，甚至连模块的下载地址都记录了，再重新安装的时候只需要直接下载文件即可
这里踩了一个坑
项目中有package-lock.json文件，再添加其他的npm包会报错
删除package-lock.json文件，重新运行npm install 命令就可以了
- server.js为服务器文件
- webpack.config.js 为 webpack的配置文件
整个项目开发中，public中的文件结构每个人创建的可能都不一样，以下为我们的项目示例
dist中为webpack打包的出口文件
优化之前的代码action是包含在components中，componemts中的文件调用自身的action，这种写法不利于后期维护，将代码重构后，提取action放在一個新的文件夹中，在components中调用相应的action，实现了状态与展示分离．
JS目录
action为页面产生的动作，以登陆为例其action为
export const signIn = (signInInfo) => ({
type: 'SIGN_IN',
signInInfo
});
components是静态组建，只负责展示页面内容
import React from 'react';
import PropTypes from 'prop-types';
export default class Login extends React.Component {
render() {
const {onClickSignIn} = this.props;
return (
<div>
<form>
<label htmlFor="name">用户名：</label>
<input type="text" name="name" id="name"/>
<br />
<label htmlFor="password">密码：</label>
<input type="password" name="password" id="password" />
<input type="button" value="登录" onClick={onClickSignIn} />
</form>
</div>
);
}
};
Login.propTypes = {
onClickSignIn: PropTypes.func.isRequired
};
containers为容器组件负责管理数据和业务逻辑，不负责 UI 的呈现，其中包含两个重要函数 mapStateToProps 和 mapDispatchToProps
具体用法可以参考http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
middlewares是中间件，在页面出发action之后，重新渲染页面之前可以在中间件中进行操作，一般用来向后台发送ajax请求
reducers用来返回一个新的状态，用来重新渲染界面
main.js文件引入前边的containers和middlewares中的文件，渲染进静态文件index.html中
dbs中为数据库的连接文件及SQL语句，这里把数据库连接文件贴出来供小可爱们参考
const mysql = require('mysql');
var connection = mysql.createConnection(
{
host: 'localhost',
user: 'root',
password: "yourpassword",
database: 'yourdatabaseName',
port: 3306
});
connection.connect((err)=> {
if (err) {
console.log('err' + err.stack);
return;
}
console.log('connected success!!!');
});
module.exports = connection;
routers为后台文件，用来接收ajax请求，对数据库进行操作，并返回相应的数据，在这里返回之后就可以得到数据对页面重新渲染啦
网友评论