react开发环境搭建

最新推荐文章于 2024-07-24 11:09:48 发布

「已注销」

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量483

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/caphpca/article/details/121292560

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了两种方法来搭建React开发环境。方案一是手动使用Webpack配置，包括创建项目目录、安装依赖、配置webpack.config.js、创建src文件夹及入口文件，最后运行webpack-dev-server启动服务。方案二是利用create-react-app脚手架快速创建项目，避免手动配置。两种方式都详细列出了步骤和所需代码。

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

方案一、基于webpack搭建react开发环境

1.mkdir webpack-react && cd webpack-react && npm init

2.在package.json中添加依赖项
"devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^4.5.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }

3.npm install 在当前项目目录下安装依赖项

4.webpack.config.js 配置webpack

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    mode:'development',
    devtool:'none',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:path.resolve('dist'),
    },
    devServer:{
        port:3000,
        hot:true,
    },
    module:{
        rules:[
            {
                test:/\.js|jsx$/,
                exclude:/node_modules/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:['@babel/preset-env','@babel/preset-react']
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}


5.创建src目录,并在src目录中创建index.html,index.js工程文件,
至此基于webpack的react开发环境搭建完成，
在命令行脚手架工具中包含了webpack的配置，不用再单独编写web.config.js文件了。


6.最后执行  npx webpack-dev-server 便可查看执行index.js中的代码.

7.index.js中代码如下:
import React from "react";
import { render } from "react-dom";
//自定义组件
function App(){
    return <div>React</div>
}
render(<App/>,document.getElementById('root'));


8.index.html中的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

方案二、基于命令行脚手架搭建react开发环境

1.npm i -g create-react-app

2.create-react-app react-app //通过脚手架工具create-react-app 创建react项目react-app

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录