react基础（1）

在 react入门系列里面，介绍了一些react的基础知识，在react基础部分，会结合手脚架工具进行更多的总结。

关于webpack我在这里就不讲解了，有需要的小伙伴可以自己去百度一下学习资料，我这里会贴出来现成的东西供大家使用。

关于es6的内容，在写案例的时候会有涉及，我会贴出来相应的教程，没有了解过es6的小伙伴可以去看一下。

创建项目

1. 创建一个项目文件夹（我是在D盘创建了一个react文件）

2. 进入react文件夹，新建两个文件package.json和webpack.config.js，新建一个src文件夹，如下所示：

下面为了方便大家知道是什么文件夹下的什么文件，我都会以react/xx/xx.xx这样的方式来标明是哪个文件或文件夹，例如上图中的package.json，我就会写成react/package.json

package.json和webpack.config.js内容如下

react/package.json

{
  "private": true,
  "entry": {},
  "dependencies": {
    "antd": "^1.1.0",
    "atool-build": "0.7.x",
    "babel-plugin-antd": "0.4.x",
    "babel-plugin-transform-runtime": "^6.8.0",
    "babel-runtime": "^6.6.1",
    "classnames": "^2.2.3",
    "es3ify-loader": "^0.2.0",
    "history": "^2.0.1",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.1.1",
    "react": "^15.3.2",
    "react-dom": "^15.0.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.0.1",
    "spmhandlebars-loader": "^0.1.0"
  },
  "devDependencies": {
    "atool-test-mocha": "^0.1.4",
    "babel-eslint": "^6.0.0",
    "dora": "0.3.x",
    "dora-plugin-browser-history": "^0.1.1",
    "dora-plugin-hmr": "0.6.x",
    "dora-plugin-livereload": "0.3.x",
    "dora-plugin-proxy": "0.6.x",
    "dora-plugin-webpack": "0.6.x",
    "eslint": "^2.7.0",
    "eslint-config-airbnb": "6.x",
    "eslint-plugin-react": "4.x",
    "expect": "^1.20.1",
    "glob": "^7.0.3",
    "pre-commit": "1.x",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "pre-commit": [
    "lint"
  ],
  "scripts": {
    "build": "atool-build",
    "lint": "eslint --ext .js,.jsx src",
    "start": "dora -p 8001 --plugins \"webpack,hmr,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
    "test": "atool-test-mocha ./src/**/__tests__/*-test.js"
  }
}

react/webpack.config.js

// Learn more on how to config.
// - https://github.com/ant-tool/atool-build#配置扩展

const webpack = require('atool-build/lib/webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');

module.exports = function(webpackConfig) {
  webpackConfig.babel.plugins.push('transform-runtime');
  webpackConfig.babel.plugins.push(['antd', {
    style: 'css',  // if true, use less
  }]);

  // Enable this if you have to support IE8.
  // webpackConfig.module.loaders.unshift({
  //   test: /\.jsx?$/,
  //   loader: 'es3ify-loader',
  // });

  // Parse all less files as css module.
  webpackConfig.module.loaders.forEach(function(loader, index) {
    if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
      loader.test = /\.dont\.exist\.file/;
    }
    if (loader.test.toString() === '/\\.module\\.less$/') {
      loader.test = /\.less$/;
    }
  });
  
  webpackConfig.module.loaders.push({
    test: /\.handlebars$/,
    loader: 'spmhandlebars-loader'
  });

  // Load src/entries/*.js as entry automatically.
  const files = glob.sync('./src/entries/*.js');
  const newEntries = files.reduce(function(memo, file) {
    const name = path.basename(file, '.js');
    memo[name] = file;
    return memo;
  }, {});
  webpackConfig.entry = Object.assign({}, webpackConfig.entry, newEntries);

  return webpackConfig;
};

这里对上面两个文件不做讲解，在下面会对package.json做一些讲解。（关于webpack的一些内容不会讲很多，大家可以去ant-design学习一下，也可以自己去网上找webpack的资料学习。）

3. 进入src文件夹，创建entries文件夹，在entries文件夹里新建index.html、index.css、index.js三个文件

index.html、index.css、index.js三个文件的内容如下（很简单的代码，这里暂时不做讲解，先把项目正常运行了）

react/src/entries/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>

<div id="root"></div>

<script src="common.js"></script>
<script src="index.js"></script>

</body>
</html>

react/src/entries/index.css

html, body, #root {
  height: 100%;
}
.box{
    background:red;
}

react/src/entries/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function App() {
  return (
    <div className="box">
      demo
    </div>
  );
}

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

4. 安装依赖

上面的文件都创建好了，返回到react文件夹下，按住shift键，同时点击鼠标右键（如下图所示）

点击“在此处打开命令窗口”，就可以看到如下图所示（注意要在react文件下）

我这里用的是cmd，大家也可以用git进行操作

下一步：$ npm install，如下图所示

如果装了淘宝镜像，则用 $ cnpm install（淘宝npm镜像--教程）

安装不成功的就多安装几次

安装成功了，在react文件夹下，就可以看到node_modules文件夹

5. 运行/开发调试项目

在react文件夹下启用cmd(或git)，$ npm start，如下图所示

在你的浏览器访问 http://localhost:8989/ 看到下图所示的效果就成功了

6. 构建

$ npm run build，如下图所示

这个时候，你会发现react文件夹里多了一个dist文件夹（里面是压缩后的代码）

现在项目已经创建成功了，下面就进入正题了。

首先要讲的是和 react入门系列里面不一样的一些写法和注意事项。

JSX

jsx语法和注意事项在 react入门（1）讲过，这里不再多讲。

组件

在react入门里面，我们也讲了创建组件的写法（react入门1），这里再来介绍几种（包含es6的内容，大家可以去先去了解一下es6）

这里我只对entries文件夹里的index.js里的内容进行修改，其他两个文件不做修改

修改完文件，如果没有看到效果，可以刷新一下http://localhost:8989/ 这个页面，还没有看到效果的，可以重新 $ npm start

案例1：

react/src/entries/index.js（index.html和index.css不变）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 方法1
function One() {
  return (
    <div className="box">demo1</div>
  );
}

// 方法2
const Two = () => {
  return (
    <div>demo2</div>
  );
};
 

// 方法3
class Three extends Component{
    render(){
        return (
            <div>demo3</div>
        )
    }
}

// 方法4
const Four=React.createClass({
  render:function(){
    return (
      <div>
         <One />
         <Two />
         <Three />
         demo4
      </div>
    )
  }
});

ReactDOM.render(
  <Four />,
  document.getElementById('root')
)

效果如下

分析一下

下面这张图，结合上面的效果图里用绿色勾出来的部分一起看

将Four组件渲染到id名为root的div里去。这个id名为root的div，在react/src/entries/index.html里可以找到，如下图所示

（react入门1 有讲过具体的原理，这里不再多说）

下面再来看一下引入，都是用import来引入的，如下图所示

前面两个是我们引入下载的的依赖（react/node_modules这个文件夹里可以看到我们下载了哪些依赖，这里不细讲），最后一个是引入css样式。

这里贴一个关于import的教程（原文地址）

下面主要说一下组件的写法，上面我列举了四种写法，我一一来分析

方法1，这种写法我就不多说，相信大家都能看懂

方法2，这个是es6的箭头函数，类似方法1，只是换成了es6的写法。

更加简洁的写法如下

const Two = () => <div>demo2</div>;

贴一个箭头函数的教程帮助大家理解（原文地址）

接下来看一下方法3

方法3，class是es6的内容，如下图所示，可以这么理解

Component是从react里面来的，如下图所示

这里我们的render(){}是直接这么写的，而以前我们都是写的render:function(){}，这也是es6的内容。除了render(){}可以写成这样，其他的function都可以这么写，在下面的例子中大家继续看。

贴一个class的教程帮助大家理解（原文地址）

再来看一下方法4

方法4，和我们之前在 react入门系列里面写的是一样的，这里不再多说。

CSS

在 react入门（1）也介绍了css的写法，这里再来介绍一些不同的写法。

在react/src/entries文件夹里，新建一个文件index.less，如下所示

react/src/entries/index.less内容如下（less教程，这里先不讲less，不懂less的小伙伴就直接在里面写普通的css即可）

.blue{
    color:blue
}
.bg{
    background:grey
}

案例2：

react/src/entries/index.js（index.html、index.css和index.less不变）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import styles from './index.less'

class App extends Component {
  render(){
    return(
      <div>
        <p className='box' style={{color:'#fff'}}>轻音乐</p>
        <p className={styles.blue}>摇滚乐</p>
        <p className={styles.blue+' '+styles.bg}>抒情音乐</p>
        <p className={'box '+styles.blue}>老情歌</p>
      </div>
    )
  }
}

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

效果如下

下面来分析一下

如上图所示，引入了一个css和一个less文件（这里styles可以自定义取名，abc什么的都可以）

下面来看一下css的几种写法

如上图所示，有两种写法

className='box'，这个box是在index.css里的，这也是我们之前在 react入门1 里就讲过的写法

style={{color:'#fff'}}，这种写法相当于是行内样式，要注意：必须写两个花括号

如上图所示，这个styles是从index.less来的（import styles from './index.less'），这种写法要注意，需要写一个花括号，在blue前要加styles.

如上图所示，当你写多个className时，要注意中间用空格隔开

事件

在 react入门2 里介绍了事件的写法，这里结合es6来介绍几种写法

案例3：

react/src/entries/index.js（index.html、index.css和index.less不变）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends Component {
  clicks(){
    alert(1)
  }
  render(){
    return(
      <div>
        <button onClick={this.clicks.bind(this)}>按钮1</button>
        <button onClick={ ()=>alert(2) }>按钮2</button>
      </div>
    )
  }
}

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

效果如下：

分析一下

如上图所示，当点击button的时候，触发onClick事件，然后调用clicks方法。这里要注意的是，格式this.xxx.bind(this)。

如上图所示，在花括号里面写的是 es6的箭头函数（箭头函数在案例1 贴过教程了）。

props

在子组件通过this.props.xxx来获取父组件传递的信息，在 react入门(2) 讲过，这里不再详细讲解

State

在 react入门3 里面介绍了state，都是在getInitialState里设置初始状态，如下

getInitialState:function(){
     return {
         val:'red'
     };
}

es6的写法又会有所不同，下面来看一个例子

案例4：

react/src/entries/index.js（index.html、index.css和index.less不变）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends Component {
  constructor() {
      super();
      this.state = {
          val:123
      };
  }

  render(){
    return(
      <div>
        {this.state.val}
      </div>
    )
  }
}

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

下面来分析：

如上图所示，在设置初始值的时候，是这样写的。

这里说几个注意点：

1. 在constructor(){}里设置state的初始状态。

这里贴一个constructor的教程（原文地址）

2. 初始状态的设置，在 react入门系列里面，都是在getInitialState里直接return的，而这里要写在this.state{}里

3. super关键字很重要，如果要在constructor里用到this，那么我们必须要写super()，否则会报错。值得一提的是，必须先调用super，才可以使用this，否则也会报错

贴一个关于super的教程（原文地址）

4. 和 react入门系列里面是一样的，都是通过this.state.xx来获取状态

refs

在 react入门3 里也介绍了的refs的相关知识，这里再总结一下。

案例5：

react/src/entries/index.js（index.html、index.css和index.less不变）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Parent extends Component {
  constructor() {
      super();
      this.state = {
          val:321
      };
  }

  changes(){
    this.setState({
      val:this.refs.inputs.value
    })
  }

  render(){
    return(
      <div>
        <input ref="inputs" value={this.state.val} onChange={this.changes.bind(this)} />
        <Child txt={this.state.val} />
      </div>
    )
  }
}
class Child extends Component{
  render(){
    return(
      <span>
        {this.props.txt}
      </span>
    )
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
)

效果如下

下面来分析一下

在constructor里设置val初始值

input里首先通过this.state.val获取val的值，当input值发生改变的时候，触发onChange事件，调用changes方法。这里ref属性，就相当于给input取了一个名，叫inputs

在changes里，通过this.setState重新给val赋值，值为this.refs.inputs.value。this.refs.inputs就相当于获取了ref属性值为inputs的input；this.refs.inputs.value就相当于获取了这个input的value值

在子组件Child里，通过this.props.txt获取父组件Parent上Child标签上txt的属性值，即为input的value值

package.json

关于package.json这里讲一下下图列表的东西都是怎么来的吧。

看到上面红色框勾出来的，这里就以react为例来讲解。

"react": "^15.0.2"，冒号前面是名字，冒号后面是版本号。

上面列表里的内容都是怎么来的呢？

先将上面红色框勾出来的这一行删除（如下图所示）。

在react文件夹下启动cmd或者git：$ npm install react --save（如下图所示）

完成之后，就可以看到，列表里面又有了react这一行（版本号可能不一样，如下图所示）

当有了上面红框这一行，就表示你成功了，除了这里，还可以在react/node_modules文件夹里也会找到react这个文件夹，如下图所示

有了react/package.json这个文件，你可以把react/node_modules文件夹删除，然后在react文件夹下启动cmd或者git：$ npm i，如下图所示

又会重新安装这些依赖，重新生成node_modules文件夹

关于package.json那些列表里的东西都是做什么的、怎么用，大家可以去npm或者cnpm去查一下

mock数据

在讲解ajax之前，先说一下怎么mock数据吧

在react/src文件夹下新建一个mock文件夹，如下图所示

在react/src/mock文件夹下，新建一个music.json文件，如下图所示

react/src/mock/music.json 文件内容如下

{
    "success":true,
    "data":[
        {
            "id":1,
            "music":"rock"
        },
        {
            "id":2,
            "music":"pop"
        },
        {
            "id":3,
            "music":"classical"
        }
    ]
}

在react文件夹下新建proxy.config.js，如下图所示

react/proxy.config.js 内容如下

module.exports = {
  '/users': function(req, res) {
      res.json({
        success: true,
        data: [
          {
            "id":1,
            "username":"sam"
          },
          {
            "id":2,
            "username":"amy"
          },
          {
            "id":3,
            "username":"kim"
          }
        ],
      });
  },

  'GET /music': './src/mock/music.json'
};

下面来分析

在这里我就写了这两种mock数据的方式，更多的方法戳这里去看：规则定义。

写到这里，我顺带粘贴一下我的文件目录

ajax

关于ajax，我们需要借助别的库、插件、依赖，例如像jquery、zepto、fetch、superagent等等，可以去npm搜索一下ajax挑选自己喜欢的一种。

这里我们用的是isomorphic-fetch（isomorphic-fetch教程），在package.json里可以找到，如下图所示

react/package.json

案例6：

react/src/entries/index.js（index.html、index.css和index.less不变）

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import fetch from 'isomorphic-fetch';

class Parent extends Component {
  componentWillMount(){
    var self = this;
    fetch('/users')
      .then(function(response) {
          if (response.status >= 400) {
              console.log("Bad response from server");
          }
          return response.json();
      })
      .then(function(data) {
          self.setState({users:data.data})
      });
  }

  constructor() {
      super();
      this.state = {
          users:[]
      };
  }

  render(){
    return(
      <ul>
        {
          this.state.users.map(function(user, index){
            return (
              <li key={index}>{user.username}</li>
            )
          })
        }
      </ul>
    )
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
)

在react文件夹下启动服务器：$ npm start，在浏览器打开http://localhost:8989/，效果如下

下面来分析一下

componentWillMount，组件即将加载，这时候可以用ajax获取初始化页面需要用到的数据。

下面来分析上面的map循环（在 react入门2 里有讲过map循环），先写一个for循环做对比

var arr = [1,2,3,4];
for(var i=0;i<arr.length;i++){
   console.log(arr[i])
}

当然除了isomorphic-fetch，还有其他实现ajax的方法，这里就不讲了。

这次就讲解这么多，有疑问的地方欢迎大家给我留言~~~

react基础（1）

创建项目

JSX

组件

CSS

事件

props

State

refs

package.json

mock数据

ajax

推荐阅读