初识react

如何创建react工程

• 参考Facebook的react创建工程：
  Create React App
  可能时间会稍微有点长耐心等待。
• 启动项目，使用npm start.

依赖安装和常用代码段

• 最好安装上eslint我觉得这个比较好，对语法格式有强制的要求，糟糕的是我目前操作有点问题，等我问问前端大神之后在列出来。
• 安装插件VS Code ES7 React/Redux/React-Native/JS snippets 会有很多快捷
  // rcc rccp rce 等等特别好用。

初探JSX语法

JSX语法其实很简单，简单理解就是使用{},举个例子：

render() {
    //JSX 语法
    // {}
    let helloWorld = 'yuxi';
    // array
    let arrs = ['a','b','c','d'];
    return (
      <span>
        <div className="App">
             helloWorld,{helloWorld};
        </div>
        <div>
          {arrs.map((e,i) => <h5 key={i}>{e}</h5>)}
        </div>
      </span>
    );
  }

需要注意的是，在{}可以使用三元运算符，二元运算符。但是不能使用if,else,while等。

原理简单探析

我的理解：

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

class App这个就是我们创建的组件

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    //JSX 语法
    // {}
    let helloWorld = 'yuxi';
    // array
    let arrs = ['a','b','c','d'];
    return (
      <span>
        <div className="App">
             helloWorld,{helloWorld};
        </div>
        <div>
          {arrs.map((e,i) => <h5 key={i}>{e}</h5>)}
        </div>
      </span>
    );
  }
}
export default App;

这句话的含义是把APP这个组件挂在到root这个节点下面。
先会用，至于原理慢慢的时间长了你就会了，就像学习开车，很多时候你都是跟着教练的操作，而不是先研究开车甚至造车的原理。