如何创建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这个节点下面。
先会用，至于原理慢慢的时间长了你就会了，就像学习开车，很多时候你都是跟着教练的操作，而不是先研究开车甚至造车的原理。
