八步亲手用npm开发React

最新推荐文章于 2025-07-22 15:30:00 发布

原创最新推荐文章于 2025-07-22 15:30:00 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react #webpack

javascript 同时被 2 个专栏收录

1 篇文章

订阅专栏

react

1 篇文章

订阅专栏

本文详细介绍了如何使用npm来开发React应用，包括配置Node环境、初始化项目、安装React及Webpack等依赖、设置脚本、创建项目文件、配置Webpack、编写代码、运行开发服务器和打包输出。通过这个过程，读者可以了解现代前端开发的基本流程。

亲手用npm开发React

来自https://vicyu.com

一个简单的部署开发过程, 需要已经了解npm, react和有一定terminal知识, 通过此文可以简单了解到现代前端的开发过程, 亲手配置一个开发过程, 体会是难以言表的.

第零步配置Node

第一步初始化开发目录

创建一个根目录, 名为: ReactNpm, 并用npm init初始化, 根据你的需求改变默认配置

$ mkdir ReactNpm
$ cd ReactNpm
$ npm init

package name: (reactnpm) 
version: (1.0.0) 
description: 
entry point: (index.js) main.js
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/vic/Documents/react/ReactNpm/package.json:

{
  "name": "reactnpm",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

第二步安装开发所需依赖

运行所需依赖React

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

开发所需依赖Webpack

npm install --save-dev webpack
npm install --save-dev webpack-dev-server

开发所需依赖babel

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

这时候, package.json应该是这样的

{
  "name": "reactnpm",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

第三步为项目增加两个脚本

在package.json, scripts值下添加:

"build": "webpack",
"start": "webpack-dev-server --hot"

build选项是为了打包出生成后的js
start选项是为了hot-reload开发, hot-reload好处就在于不用刷新浏览器, 可以直接查看新代码的改变

使用方法是

$ npm run start

所以, 这时的package.json是这样的:

{
  "name": "reactnpm",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack",
     "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

第四步为项目创建必要文件

让我们创建index.html用于入口HTML, App.jsx是一个简单的Component组建, main.js作为我们的入口js, webpack.conf.js是webpack的配置文件

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

此时目录应该是这样的:

$ tree -L 1
.
├── App.jsx
├── index.html
├── main.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js

1 directory, 6 files

第五步配置webpack

打开webpack.config.js文件, 添加以下代码:

var path = require('path')

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, './'),
        filename: 'bundle.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        rules: [{
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
}

说明:
entry: webpack打包的入口 main.js
output：webpack打包输出，path为输出的文件夹，filename为打包输出文件名
devServer：开发服务器配置
module：定义了对模块的处理逻辑, 当需要加载文件时, webpack会匹配test的正则，匹配成功就会调用其配置对文件进行处理

第六步编辑页面代码

打开index.html, 添加下列代码:

<!DOCTYPE html>
<html>

<head>
    <title>React With npm</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <script src="bundle.js">
    </script>
</body>

</html>

其中, bundle.js为webpack打包输出js的名字

打开App.jsx, 添加下列代码:

import React from 'react'

export default class App extends React.Component {
    render () {
        return (<div> Hello World!</div>)
    }
}

打开main.js, 添加下列代码:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'

ReactDOM.render(
    <App/>,
    document.body.appendChild(document.createElement('div'))
)

第七步运行开发服务器

$ npm run start

通过浏览器访问 http://localhost:8080/, 就可以看到我们激动人心的Hello World!!!

第八步打包,生成bundle.js

$ npm run build

你就可以发现根目录下生成了bundle.js, 然后你就可以大摇大摆那index.html和bundle.js去部署了,当然, 这里还有很多工作没有做,我们下次在论.

后言

完成后, 目录应该是这个样子的:

vic@$ tree -L 1
.
├── App.jsx
├── bundle.js
├── index.html
├── main.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js

1 directory, 7 files