react 基础

通过 npm 使用 React

开发环境

请确保已经正确安装了如下工具包:

1. node.jsv4+
2. npm
3. webpack

安装

npm install

开发环境编译及服务启动并开启热部署模式

npm start

服务已启动,请打开浏览器输入: http://localhost:8080/webpack-dev-server/

生产环境

直接运行index.html运行

‘npm webpack打包输出’

以下命令通过git 编写

第一步、安装全局包

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

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

$ mkdir reactApp
$ cd reactApp/
$ npm init

第三步、添加依赖包及插件
因为我们要使用 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:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 7777
   },

   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',

         query: {
            presets: ['es2015', 'react']
         }
      }]
   }

}

module.exports = config;

• entry: 指定打包的入口文件 main.js。
• output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称。
• devServer：设置服务器端口号为 7777，端口后你可以自己设定 。

• module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

  package.json

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

第六步、index.html

     <div id = "app"></div>
      <script src = "index.js"></script>

第七步、App.jsx 和 main.js

//App.jsx
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到菜鸟教程学习！！！
         </div>
      );
   }
}

export default App;

//main.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

第八步、运行服务

$ npm start