react学习01---- 开发环境搭建之项目初始化-优快云博客

本文详细介绍了如何使用Webpack从零开始搭建一个React项目，包括安装必要的依赖、配置Webpack、编写基本的React组件等内容。

2019独角兽企业重金招聘Python工程师标准>>>

1、官方地址：

中文文档地址 http://reactjs.cn73.9K
GitHub地址 https://github.com/reactjs-cn/react-docs8.4K
2、利用webpack部署一个项目

第一步、安装全局包

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

第二部、创建项目目录

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

E:\localProject\react02>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (react02) react02-webpack
react02-webpack
version: (1.0.0)
description: 使用webpack构建react项目
entry point: (index.js)
test command:
git repository:
keywords:
author: liuxinzhou
license: (ISC)
About to write to E:\localProject\react02\package.json:

{
  "name": "react02-webpack",
  "version": "1.0.0",
  "description": "使用webpack构建react项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "liuxinzhou",
  "license": "ISC"
}


Is this ok? (yes) yes

E:\localProject\react02>

第三步、添加依赖包及插件

因为我们要使用 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

第四步、创建文件

index.html

App.jsx

main.js

webpack.config.js

第五步、设置编译器，服务器，载入器

配置webpack.config.js

var config = {
   entry: './main.js', //entry: 指定打包的入口文件 main.js。
   output: {
      path:'./',
      filename: 'index.js',
   },
	//output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称。
   devServer: {
      inline: true,
      port: 7777
   },
	//devServer：设置服务器端口号为 7777，端口号你可以自己设定 。
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',
			
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
	//module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。
   //当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
}

module.exports = config;

配置package.json

{
  "name": "react02-webpack",
  "version": "1.0.0",
  "description": "使用webpack构建react项目",
  "main": "index.js",
  "scripts": {
    //"test": "echo \"Error: no test specified\" && exit 1"
    "start": "webpack-dev-server --hot"
    //现在我们可以使用 npm start 命令来启动服务。
    //--hot 命令会在文件变化后重新载入，这样我们就不需要在代码修改后重新刷新浏览器就能看到变化。
  },
  "author": "liuxinzhou",
  "license": "ISC",
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

编写index.html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>利用WebPack 构建React 项目</title>
</head>
<body>
	  <div id = "app"></div>
      <script src = "index.js"></script>
</body>
</html>

main.js

var React = require('react');
var ReactDOM = require('react-dom');
var MainComponets = require('./components/mainComponets.js');
ReactDOM.render(
  <MainComponets/>,
  document.getElementById('app')
);

mainComponets.js

var React= require("react")
module.exports=React.createClass({
	render:function(){
		return(
			<div>
				<p>我的第一个webpack构建的react项目</p>
				<input type="text" />
				<button>确定</button>
			</div>
			)
	}
})