一.安装全局包

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

二.创建根目录

创建一个根目录，目录名为：myApp，再使用npm init初始化，生成package.json文件：

$ mkdir myApp
$ cd myApp/
$ npm init
name: (myApp)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/tianqixin/www/reactApp/package.json:{"name": "react-runoob","version": "1.0.0","description": "cllgeek test","main": "index.js","scripts": {"start": "webpack-dev-server --hot"},"author": "","license": "ISC","dependencies": {"react": "^0.14.8","react-dom": "^0.14.8"}
}
Is this ok? (yes)

三.添加包及插件

因为我们需要使用React，所以我们需要先安装它，–save命令用于将包添加至package.json文件中

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

同时我们需要安装一些babel插件

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

四.创建文件

接下来我们创建一些必要文件：

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

五.设置编译器，服务器，载入器

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

var config = {entry:'./main.js',output:{path:'./build',filename:'index.js',},devServer:{inline:true,port:7777},module:{loaders:[{test:/.jsx?$/,exclude:/node_modules/,loader:'babel',query:{presets:['es2015','react']}}]}
}module.exports = config;

注：该配置适用于webpack1，使用webpack2如此配置会报错，默认安装高版本的插件，我们需要在前面安装webpack的时候指定版本号
安装方式如下：

$ npm install webpack@1.* -g

@1.*会安装1.X的最高版本

entry: 指定打包的入口文件 main.js。
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称。
devServer：设置服务器端口号为 7777，端口后你可以自己设定。
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
现在打开 package.json 文件，找到 “scripts” 中的 “test” “echo \”Error: no test specified\” && exit 1″ 使用以下代码替换：
“start”: “webpack-dev-server –hot”
替换后的 package.json 文件内容如下：

$ cat package.json
{"name": "myApp","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "webpack-dev-server --hot"},"author": "","license": "ISC","dependencies": {"react": "^15.5.4","react-dom": "^15.5.4","webpack": "^1.15.0","webpack-dev-server": "^1.16.4"}
}

现在即可使用npm start命令来启动服务了，–hot命令会在文件变化后重新载入，这样就不需要修改代码后重新刷新浏览器进行更新操作。

六.编写index.html

设置div id=”app” 为我们应用的根元素，并引入上面ouput指定的文件index.js脚本文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><script src="index.js"></script>
</body>
</html>

七.编写App.jsx 和main.js文件

这是第一个react组件，这个组件将输出Hello World!。
App.jsx文件代码：

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

我们需要引入组件并将其渲染到根元素App上，这样我们才可以在浏览器上看到它。
main.js文件代码：

import React from 'react';
import ReactDOM from 'react-dom'import App from './App.jsx'ReactDOM.render(<App/>,document.getElementById('app'));

注意：
如果想要组件可以在任何的应用中使用，需要在创建后使用export将其导出，在使用组件的文件使用 import将其导入。

文成上述配置，即可运行该服务。

$ npm start

通过浏览器访问：http://loaclhost:7777/

npm搭建React项目相关推荐

(二)使用npm搭建React项目
一.在内地npm预设是连线到国外的registry,我们可已更改为taobao代理的registry,这样安装包的速度可已加快 npm config set registry https://regi ...
react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
搭建React项目，超简单教程
步骤前言一.安装create-react-app 二.使用步骤 1.创建项目 2.运行项目 3.文件目录总结前言最近公司闲的无聊,刚好之前学的React,至今还未搭建过一个React项目,借 ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
创建react项目 Linux,idea2018 快速搭建react项目指南
react与angular和vue是截止2018年为止主流的前端框架.对于一些新手来说,想快速入门react,应该是搭建一个react最初的模板项目,然后在项目中添加一些自己喜欢的组件作为练手..今天 ...
create-react-app 搭建react项目中的小坑
刚买的电脑安装了 16.3的 node版本然后就装了一个 create-react-app 脚手架然后就出了个问题就是搭建react项目的时候一直报错一直报错就很奇怪后来我换了个 ...
搭建react项目教程（二）
搭建react项目教程(二) 一:概述二:配置 1:配置依赖包 2:添加与后台交互的配置文件 3:封装API调用方法 4:与后台交互 5:启动项目验证接口一:概述 1:书接上文搭建react项目教 ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
react打包后图片丢失_使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

npm搭建React项目