React+webpack搭建环境Hello World

最新推荐文章于 2023-06-28 14:28:51 发布

转载最新推荐文章于 2023-06-28 14:28:51 发布 · 316 阅读

文章标签：

#React #webpack

web前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何从零开始搭建React项目，包括安装Node.js、使用npm安装依赖包如Babel、Webpack等，配置Webpack，以及编写第一个React组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先需要安装node.js,官网下载

利用npm安装各种资源,打开cmd,-g全局安装

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

创建项目文件夹testReact

cd testReact

npm init -y

安装react

$ npm install react react-dom --save

安装bable

$ npm install babel-core --save
$ npm install babel-loader --save
$ npm install babel-preset-react --save
$ npm install babel-preset-es2015 --save

创建文件index.html,main.jsx,webpack.config.js

在webpack.config.js中输入

var config = { entry: './main.jsx', output: { path: 'dist文件夹的绝对路径', filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] } } module.exports = config;

现在打开 package.json 文件，找到 “scripts”中的 “test” “echo \”Error: no test specified\” && exit 1″使用以下代码替换
"start": "webpack-dev-server --hot"

在index.html中加入id为'root'的div,并引入bundle.js文件 dist/bundle.js (后面再生成这个文件)

在main.jsx中写入

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
    render(){
        return (
            <div>Hello,world</div>
        )
    }
}
ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
)

最后在cmd输入

webpack

会生成bundle.js文件,这时候打开index.html就有hello world了

参考转载自:
作者：旧丶时候
链接：http://www.jianshu.com/p/f10babb8790d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。