前端四react+redux脚手架搭建.docx资源-CSDN文库

版权申诉

65 浏览量 2021-12-31 10:21:36 上传评论收藏 31KB DOCX 举报

React+Redux脚手架搭建详解本文将详细介绍如何使用React和Redux搭建一个完整的前端项目，从项目初始化到最终的项目结构搭建。届时，我们将使用Express作为Web框架，Webpack作为模块打包工具，Babel作为JavaScript编译器。项目初始化我们需要使用Node.js作为我们的开发环境。在命令行中输入以下命令，创建一个新的项目目录： ``` cnpm init ``` 这将创建一个新的项目目录，并生成一个`package.json`文件。创建Express服务器接下来，我们将创建一个Express服务器，用于提供静态文件和API接口。创建一个新的文件`server.js`，并添加以下代码： ``` var app = new (require('express'))() var port = 9100 app.get("/", (req, res) => { res.sendFile(dirname + '/index.html') }) app.listen(port, error => { if (error) { console.error(error) } else { console.info("Open up http://localhost:%s/ in your browser.", port) } }) ``` 这个服务器将监听9100端口，并提供静态文件和API接口。创建Webpack配置接下来，我们需要创建一个Webpack配置文件，用于编译和打包我们的JavaScript代码。创建一个新的文件`webpack.config.js`，并添加以下代码： ``` module.exports = { devtool: 'cheap-module-eval-source-map', entry: ['./index'], output: { path: path.join(dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, plugins: [] } ``` 这个配置文件告诉Webpack将我们的JavaScript代码编译成ES5语法，并将其打包成一个名为`bundle.js`的文件。使用Babel编译JavaScript 为了使用最新的JavaScript语法，我们需要使用Babel将我们的JavaScript代码编译成ES5语法。创建一个新的文件`.babelrc`，并添加以下代码： ``` { "presets": ["es2015", "react"], "env": { "development": { "presets": ["react-hmre"] } } } ``` 这个配置文件告诉Babel使用ES2015和React预设来编译我们的JavaScript代码。创建React组件现在，我们可以创建我们的第一个React组件。创建一个新的文件`index.js`，并添加以下代码： ``` import React from 'react' import ReactDOM from 'react-dom' const rootEl = document.getElementById('root') rootEl.innerText = "haha!" ``` 这个组件将在页面上显示一个“haha!”的文本。使用Redux管理状态为了使用Redux管理状态，我们需要创建一个Redux store。创建一个新的文件`store.js`，并添加以下代码： ``` import { createStore } from 'redux' const initialState = { count: 0 } const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 } default: return state } } const store = createStore(reducer) export default store ``` 这个store将管理我们的应用程序状态。使用React和Redux搭建项目现在，我们可以使用React和Redux搭建我们的项目。创建一个新的文件`index.html`，并添加以下代码： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Redux</title> </head> <body> <div id="root"></div> <script src="bundle.js"></script> </body> </html> ``` 这个HTML文件将加载我们的JavaScript代码，并将其渲染到页面上。启动项目我们可以启动我们的项目。输入以下命令： ``` node server.js ``` 这将启动我们的服务器，并在浏览器中打开我们的应用程序。本文介绍了如何使用React和Redux搭建一个完整的前端项目，从项目初始化到最终的项目结构搭建。

资源推荐

资源详情

资源评论