首页 > 代码库 > React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)
React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)
摘 要
刚接触React 开发, 在摸索中构建react 运行环境，总会遇到各种坑；本文，将用最短时间解决webpack+react 环境搭建问题.
1、如果你还没有React基础 看这里.
2、如果不知道webpack是啥？请 看这里.
3、如果你还没有装npm 看这里.
目 录
一、webpack+react 运行实例.
二、webpack 运行环境配置分析.
三、如何手动搭建一个webpack+react 运行环境.
一、webpack+react 运行实例
1、实例代码
源代码下载地址：https://github.com/xiangxiong/React/tree/blog-react/blogs
2、目录结构
│ index.html # 输出文件│ package.json # 项目信息│ webpack.config.js # webpack 打包配置│└─src bundle.js # 打包输出文件 index.js # 入口文件3、快速运行
1 npm install2 npm run dev
二、webpack 运行环境配置分析
1、 Index.html 首页入口文件
将项目中全局的样式和打包压缩的文件引入到该页面，React会寻找root节点，将子模块渲染到首页。
<html><head></head><body> <div id="root"></div> <script src="src/bundle.js"></script></body></html>
2. package.json 项目引用组件管理文件
此文件配置重点注意如下节点：main 指的是入口文件的Js，Scripts 指npm运行的命令， dependencies 配置项目依赖的组件.
{ "name": "mall-admin", "version": "1.0.0", "description": "Hello React", "main": "index.js", "scripts": { "dev": "webpack-dev-server --hot --inline" }, "dependencies": { "react": "^15.5.4", "react-dom": "^15.5.4", "webpack": "^1.13.2", "webpack-dev-server": "^1.16.1" }, "author": "Shawn", "license": "ISC"}3.webpack.config.js
该文件为webpack 打包输出文件，entry 入口文件目录设置，output 为打包之后输出bundle.js， loaders 配置为文件加载配置.
var webpack = require(‘webpack‘);var path = require(‘path‘);module.exports = { context:path.join(__dirname), // 目录 entry:"./src/index.js", // 入口文件 module:{ loaders:[ // 将ES6 转换为 ES5 { test: /\.js?$/, exclude: /(node_modules)/, loader: ‘babel-loader‘, query: { presets: [‘react‘, ‘es2015‘] } } ] }, output:{ // 输出文件配置 path:__dirname, filename:"./src/bundle.js" // 输出文件（打包压缩文件） }};三、三步搭建运行环境
- 搭建好文件结构目录, 编写index.js index.html 运行代码.
- 配置package.json 文件，运行npm install.
- 配置webpack.config.js 文件，运行 npm run dev.
React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。