《怎样构建一个react项目》由会员分享，可在线阅读，更多相关《怎样构建一个react项目（43页珍藏版）》请在金锄头文库上搜索。
1、怎样构建一个react项目从零开始构建一个基于react的web项目假设项目需求如下：一个单页面应用，包含有”首页”，”信息”，”关于”三个页面。其中，信息页面需要通过ajax请求api接口，获取数据保存到 redux的store中，并显示在页面上。需求UI图第一阶段创建项目目录，添加package.json来管理依赖包。1.在磁盘根目录创建一个learn目录。2.打开cmd，定位到learn目录中，执行npm init创建package.json 文件(可以执行npm init y生成一个默认选项的package.json)。步骤一安装依赖包。1.安装目前必须的依赖包，其他的依赖包需要时再安
2、装。 npm install react -save npm install react-dom save npm install react-router save npm i redux S (简写) npm install webpack save-dev npm install webpack save-dev npm i babel-core D(简写) 步骤二(1)安装依赖包。1.安装到dependencies中 react, react-dom, react-router, redux, react-router-redux, react-redux1.安装到devDepende
3、ncies中 babel-core, babel-loader, babel-preset-es2015, babel-preset-react, babel-preset-stage-0, webpack步骤二(2)注：如果依赖包安装缓慢，可以使用国内镜像安装。推荐使用nrm来切换镜像，建议选择cnpm，或taobao镜像。安装nrm(从镜像安装): npm install nrm -g -registry=http:/pmjs.org/ 使用方法： https:/ React from react; import ReactDOM from react-dom;class App exte
4、nds React.Component constructor(props) super(props);render() return (hello wolrd! new Date().toLocaleString(); ReactDOM.render(, document.getElementById(reactapp);步骤三(3)配置dev环境1.在myLearn/中创建webpack.config.js并添加以下内容步骤四(1)module: loaders: test: /.jsx?$/,loaders: babel,include: path.join(_dirname, src)
5、 ;var path = require(path); var webpack = require(webpack);module.exports = entry: ./src/js/index,output: path: path.join(_dirname, build),filename: js/bundle.js,publicPath: /,配置dev环境1.在myLearn/中创建.babelrc并添加以下内容步骤四(2)“presets“: “es2015“, “stage-0“, “react“ 2.在myLearn/package.json的scripts项中添加以下内容“sc
6、ripts“: “build“: “webpack“,“test“: “echo “Error: no test specified“ class App extends React.Component constructor(props) super(props);render() return (child pages); export default App;编码(2)编码风格：建议统一采用es6的方式来定义组件。home/index.js import React from react;/ home页面 class Home extends React.Component constr
7、uctor(props) super(props);render() return (这里是首页页面。); export default Home;info/index.js about/index.js这两个js中的内容类似于 home/index.js，需要修改注释中的 home，组件名Home，以及render返 回的内容。在页面上展示App根组件1.修改js/index.js为 import React from react; import ReactDOM from react-dom; import App from ./components/App;ReactDOM.render
8、(, document.getElementById(reactapp) );2.执行npm run build，刷新查看效果。编码(3)配置webpack-dev-server1.目前为止每次修改了代码都需要执行npm run build，借助webpack-dev-server，可以实现修改后 自动编译。(参考：https:/ http:/webpack.github.io/docs/webpack-dev-server.html)1.1安装webpack-dev-server：npm i webpack-dev-server D1.2修改myLearn/package.json，在scr
9、ipts中添加“dev“: “webpack-dev-server -inline -history-api-fallback“1.3修改myLearn/index.html中的script标签为：1.4在cmd执行npm run dev，浏览器访问localhost:8080。1.5尝试修改App.js的render方法返回的内容，浏览器会自动刷新。注：以后发现这种修改代码后自动刷新也不是很方便时，可以试试react-hot-loader。 https:/ 引入home, info, about这三个组件，然后通过state中的状态来决定在render中返回哪个组件。 但是这样对于页面多了之
10、后管理起来很麻烦，而且不能保存书签，我们希望能够通过url的方式来导 航到指定的页面，因此可以引入react-router来帮我们管理。在阶段一中应该已经安装了react-router，配置参考：https:/ Routes，建议采用Plain Routes方式，这样便于应对以后需 要做按需加载的情况。3.在src/js/routes目录中新建index.js。因为这个项目子页面比较少，暂时采用一级路由。对于页面比 较多的项目，可以采用两级路由，为每个模块再建一个目录。编码(5)路由配置(2)1.在src/js/routes/index.js中添加以下内容 import App from /c
11、omponents/App; import Home from /components/home; import Info from /components/info; import About from /components/about;const routes = path: /,component: App,indexRoute: component: Home,childRoutes: path: /home, component: Home,path: /info, component: Info,path: /about, component: About export defa
12、ult routes;编码(6)路由配置(3)1.修改src/js/index.js为以下内容 import React from react; import ReactDOM from react-dom; import Router, browserHistory from react-router; import routes from ./routes;ReactDOM.render(, document.getElementById(reactapp) );2.执行npm run dev，访问http:/localhost:8080/info查看效果编码(7)添加公共header和导
13、航按钮1.修改src/js/App.js为以下内容 import React from react; import Link from react-router;class App extends React.Component constructor(props) super(props);render() return (首页信息编码(8)关于this.props.children) export default App;效果：添加样式(使用sass/scss做css预处理)(1)1.安装依赖包到devDependencies中 sass-loader, node-sass, style-
14、loader, css-loader, url-loader, file-loader2.配置webpack.config.js，在loaders中添加以下内容 test: /.scss$/,loaders: “style“, “css“, “sass“ , test: /.(png|jpg|woff|woff2|eot|ttf|svg)(?v=0-9.0-9.0-9)?$/,loader: url?limit=512padding: 0; html, body height: 100%;font-family: Arial,“Microsoft YaHei“,“5b8b4f53“;font-size: 14px; .header padding: 0 10px 0 60px;height: 40px;line-height: 40px;background: url(/image/logo.jpg) 10px center no-repeat;background-size: 40px auto;background-color: #333;编码(10)a margin: 0 5px;color: #ccc;text-decoration: none; 添加样式(使用sass/scss做css预
