从0构建react项目（react+webpack + react-redux + react-router）

最新推荐文章于 2023-02-20 17:20:02 发布

吃饱再多吃两口

最新推荐文章于 2023-02-20 17:20:02 发布

阅读量316

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_42977016/article/details/108868034

版权

本文详细介绍了如何在Windows环境下，使用Webstorm从零开始构建一个React项目，涵盖webpack、react、redux、react-redux及react-router的配置和使用。通过一步步的指导，帮助读者理解项目的基本构建过程，并提供了遇到问题的解决方案。

摘要由CSDN通过智能技术生成

一，环境与编译器

windows + webstorm

二，参考资源

1，react搭建步骤

https://segmentfault.com/a/1190000017945643

2，完整react后台管理项目（全家桶+ant）ps：新手入手较难，但是项目很完整，值得学习

https://github.com/duxianwei520/react.git

三，开始 webpack + react

1，创建文件夹react-demo
2，执行 npm init
在这里插入图片描述
按照步骤填写完毕后文件夹会出现package.json

3，npm install webpack webpack-cli webpack-dev-server --save-dev

创建webpack文件夹，在文件夹下创建webpack.config.js (ps: 创建文件夹的原因是因为可以还可以创建不同环境下的不通webpack文件，比如生产环境，测试环境，打包环境等)

webpack-dev-server: 作为dev启动的依赖项

npm install html-webpack-plugin

html-webpack-plugin: 将js代码通过<script>标签注入到html中;

在这里插入图片描述
webpack.config.js 文件内容是：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
   
    entry: './app.js', // 入口文件
    output: {
   
        path: path.resolve('dist'), // 定义输出目录
        filename: "bundle.js"
    },
    module: {
   
        rules: [
            {
   
                test: /\.js$/, // 匹配.js文件
                exclude: /node_modules/,
                use: {
   
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
   
            template: './index.html',
            filename: path.resolve( 'dist/index.html')
        })
    ]
};

tips：如果想具体学习，请移步到： https://www.webpackjs.com/guides/getting-started/#基本安装
要根据自己的具体的文件路径来适应文件中的文件名称与路径哦~
4，执行 npm intall react react-dom
5, 在目录下创建app.js和index.html
在这里插入图片描述
src下创建App目录，App下创建index.js

app.js里的文件内容：

import React from 'react';
import App from './src/views/App';
import ReactDom from 'react-dom';

ReactDom.render(<App />,
document.getElementById('root'));

index.html 内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minim-scale=1, user-scalable=no">
    <title>hello world</title>
</head>
<body>

最低0.47元/天解锁文章

吃饱再多吃两口

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从0构建react项目（react+webpack + react-redux + react-router）

一，环境与编译器windows + webstorm二，参考资源1，react搭建步骤https://segmentfault.com/a/11900000179456432，完整react后台管理项目（全家桶+ant）ps：新手入手较难，但是项目很完整，值得学习https://github.com/duxianwei520/react.git三，开始 webpack + react1，创建文件夹react-demo2，执行 npm init按照步骤填写完毕后文件夹会出现package
复制链接

扫一扫