React项目环境搭建demo

最新推荐文章于 2024-01-05 17:11:29 发布

irhino

最新推荐文章于 2024-01-05 17:11:29 发布

阅读量4.9k

点赞数 1

分类专栏：计算机文章标签： react react环境搭建

本文链接：https://blog.csdn.net/qq_40621718/article/details/79979897

版权

计算机专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、新建一个文件夹，ctrl + R 打开cmd 控制台，进入该文件夹，运行npm init；下面是我的目录

c:\Users\Administrator\Desktop\three\练习\React\webpack\webpack009>npm init

然后一直enter默认到最后一步，初始化一个package.json文件

2、npm安装需要用到的依赖模块：

npm install webpack webpack-dev-server babel babel-core babel-loader babel-preset-react babel-preset-env
 css-loader style-loader --save-dev

说明：

webpack模块主要是用来打包开发及依赖的各模块为一个js，比如打包成src文件夹中的bundle.js文件

webpack-dev-server模块在这里主要作为web服务器作用

babel相关模块主要是用来转换编译的，把用新标准写的js转化成随处可用的版本

css-loader和style-loader模块是在js文件中import了css文件，css-loader用于在js中加载css，style-loader把加载的css作为style标签内容插入到html中。

3、安装React本身依赖模块，代码如下：

npm install react react-dom react-router react-router-dom  --save

为什么上面的--save-dev 而下面的用--save；-dev的是开发（devlopment）用到的依赖模块，而正式的不会用到，而直接--save的代码是发布到正式环境还需要的依赖的。

4、新建一个public文件夹，一个app文件夹，public文件夹下面新建一个index.html，代码如下：

<html>
    <head>
        <title>reactDemo</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script src="./bundle.js"></script>
</html>

5、在app文件夹下面新建一个main.js，主要是进行路由配置的：

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Redirect, Link, Switch } from "react-router-dom";

export class App extends React.Component {
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

const routes = (
    <Router>
        <div>
            <Switch>
                <Route path='/' render={(props) => (
                    <App>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/demo" component={Demo} />
                        </Switch>
                    </App>
                )} />
                <Route render={() => (<Redirect to="/" />)} />
            </Switch>
        </div>
    </Router>
)

render(routes, document.getElementById("root"))

这里的路由配置中引入了两个依赖模块，Home和Demo，但这两个模块还没有建立，下面新建这两个模块的文件，

6、在app文件夹下面再新建一个home文件夹，一个demo文件夹；在home文件及下面新建一个home.jsx文件，代码如下：

import React from "react";
import { Link } from "react-router-dom";

class Home extends React.Component {
    render() {
        return (
            <div>
                <header>
                    <h3>首页</h3>
                </header>
                <div style={{display: "flex"}}>
                    <div>home</div>
                </div>
            </div>
        )
    }
}

export default Home

7、demo文件夹下面新建下面新建一个demo.jsx文件，代码如下：

import React from "react";

class Demo extends React.Component{
    render() {
        return (
            <div>demo</div>
        )
    }
}

export default Demo

8、将这两个模块在之前的main.js中引入

import Home from "./home/home.jsx";
import Demo from "./demo/demo.jsx";

9、在public文件夹的同级新建一个webpack.config.js，代码如下：

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + '/public',
        filename: "bundle.js"
    },
    devServer: {
        contentBase: "./public",
        historyApiFallback: true,
        inline: true
    },
    module: {
        rules: [
            {
                test: /(\.js|\.jsx)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                       presets: ["react", "env"]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

10、修改package.json配置启动，代码如下

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }

11、npm run server 启动程序。

注意：如果由于安装的依赖模块版本升级，比如说下面这个错误，可以依照提示重新安装一个webpack-cli模块解决。

The CLI moved into a separate package: webpack-cli

irhino

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React项目环境搭建demo

1、新建一个文件夹，ctrl + R 打开cmd 控制台，进入该文件夹，运行npm init；下面是我的目录c:\Users\Administrator\Desktop\three\练习\React\webpack\webpack009&gt;npm init然后一直enter默认到最后一步，初始化一个package.json文件2、npm安装需要用到的依赖模块：npm install webpa...
复制链接

扫一扫