React 语法基本使用介绍
前面的文章我们已经配置好了环境，接下来熟悉一下 react 的基础语法：
一、认识入口文件
React 中，app/main.js 叫做入口文件，这个文件是 webpack.congifg.js 的 entry 标识的文件。任何项目入口文件只能有 1 个。
入口文件写法：
import React from "react";
import ReactDom from "react-dom";
import App from "./App";
ReactDom.render(
<App />,
document.querySelector("#app")
);
React 库就是 React 核心库，ReactDOM 库专门用于入口文件，调用ReactDOM.render() 方法 ，负责将根组件上树。
引入React 的作用，是因为 React 使用了 jsx 语法，jsx 语法简单理解就是不加引号的 HTML 语法裸写在 JS 文件里面，jsx 是英语 JavaScript Extension（JavaScript增强版）的意思，自称是世界上将 HTML 和 JS 融合的最好的语言。jsx 语法会被 babel 翻译为字符串拼接。但是，React 规定，一个有 jsx 语法的 js 文件，必须引入 React 包，否则babel 不予翻译。
根组件上树的语法：
ReactDOM.render(JSX , 挂载点);
二、初识组件
组件（component）：将页面中的一部分区域的 HTML 结构、CSS 样式、交互效果、数据等进行封装，封装到独立的一个文件中开发，叫做组件。
React 中组件是类，定义一个继承 React.Component 类的类，就是一个组件。
React 规定，所有的组件都是一个类，首字母必须严格大写。
在 app 文件夹中创建 App.js，然后书写标准的类的“壳子”：
import React,{Component} from "react";
export default class App extends Component {
// 构造函数
constructor(){
//必须调用超类（父类）
super();
}
render(){
return (
<div>
<h1>我是 App.js 根组件，早上好！</h1>
</div>
);
}
}
类的名字尽可能和文件的名字一样。
官方手册上对 render 函数的描述：The render method returns a description of what you want to see on the screen. In particular, render returns a React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write.
翻译：render函数返回了你想要在屏幕上呈现的东西。一般来说，render 函数要 return一个 React 元素，这个元素描述了组件长什么样子。绝大部分 React 的开发者，使用了一个叫做 JSX 的语法让结构更易于书写。
return 后面直接跟的是 jsx 语法，没有任何的引号的 HTML。注意不能在 return 后面换行的，因为换行就默认 return undefined 了。如果你非要换行必须像我一样在上面加个圆括号在圆括号里面换行。
定义完一个类之后，其他的 js 文件就能够引入它，然后使用它的名字当做标签名，从而使用实例化这个类：
import App from "./App";
所以使用组件非常简单：① 引包 ② 变成标签对 或 单标签
每当我们写了一个组件的标签对之后，就相当于实例化了一次。
三、JSX 语法
JSX 是 facebook 公司为了 React 专门打造的语言，并且已经申请了专利，JSX 确实好用。JSX = JavaScript Extension，也有说法叫做 JavaScript + XML。
专门解决 JavaScript 和 HTML 结合的问题。因为我们原来经常写：
"<div>我爱你" + year + "年</div>"
JSX 彻底解决了这个问题。
<div>我爱你{year}年</div>
- JSX 要求标签严格封闭，尤其是单标签，单标签必须写末尾反斜杠，比如：
//img 的路径以 index.html 文件为准
<img />
<br />
必须这么写，要不然报大错。
-
表格标签必须添加 tbody 标签。
-
class 要避讳为变为 className，因为 class 在 JS 里面是关键字。
-
JS 生命之源，单大括号插值语法
可插入语法
- JS简单的计算
<h1>我爱你{5000 * 2}年</h1> - JS 内置的函数
<h1>我爱你{parseInt(10000.6)}年</h1> - 插入变量
const year = 10000;<h1>我爱你{year}年</h1>
注意，变量可以存储 JSX 语法：
const a = <span>我爱你<em className="spec">10000</em>年</span>; - 插入函数的执行
{sum()}和 允许插入IIFE。 - 插入三元运算符
<h1>我爱你{3 > 8 ? 9 : 10000}年</h1> - 插入自定义组件
{<App><App/>}
不可插入语法
- 不能插入 for 循环
- 不能插入if语句
- 不能插入while语句
- 不能插入函数的声明
- 不能插入对象
- src 动态属性值
基本使用请记住 "大包引" ，大括号包住引号。
var star = 0 ;<img src = {`images/${star}.png`} />
- 行内样式
口诀：双大括号，标准JSON，省略 px，属性驼峰。
注意：即使不需要将style属性变动态，也需要写成这样，这是规定。
<p style={{
"width" : 200,
"height" : 200,
"backgroundColor" : "red"
}}></p>
- 动态类名
我们需要安装一个依赖：
npm install --save classnames
靠布尔值来决定这个类名是否生效：
<p className={classnames({
"cur" : true,
"pure" : true,
"color" : 3 > 8,
"red" : 0
})}>你好</p>
- JSX 中使用数组（很关键，同时也是难点、重点）
注意： JSX的单大括号中如果出现数组，数组会被自动展开。
var arr = ["点绛唇·梅","宋代：朱翌","流水泠泠，断桥横路梅枝亚。","雪花飞下，浑似江南画。","白璧青钱，欲买春无价。","归来也，风吹平野，一点香随马。"];
//================
<ul>
{arr.map((item,index)=> <li key={index}>{item}</li>)}
</ul>
React 中，JSX 数组项，每项都必须有独一无二的 key 属性。key 简单来说，react 利用 key 来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个 key 对应一个组件，相同的 key react 认为是同一个组件，这样后续相同的 key 对应组件都不会被创建. react 中的 key 属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置 key 之后不能获取组件的这个key props），而是给 react 自己用的。
key的使用场景？基本基本就是数组。
官方：在项目开发中，key 属性的使用场景最多的还是由数组动态创建的子组件的情况，需要为每个子组件添加唯一的 key 属性值。
注意：index 作为 key 是一种反模式。
在数组中生成的每项都要有 key 属性，并且 key 的值是一个永久且唯一的值，即稳定唯一。key 值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的 key 都要保持唯一。
了解更多参考博客：React 之 key详解 ：https://segmentfault.com/a/1190000009149186
对数组操作用到的最多的两个 ES 方法，就是上面 Map 和 filter。俗称：删 filter 改 Map 。
四、九九乘法表
九九乘法表
render(){
var arr = [];
for(let i = 1;i <= 9; i++){
let temp = [];
for(let j = 1;j <= i;j++){
temp.push(<td style={{border:"1px solid #353"}} key = {j}>{i} X {j} = {i*j}</td>)
}
arr.push(<tr key = {i}>{temp}</tr>);
}
return(
<div>
<table style={{
borderCollapse:"collapse"
}}>
<tbody>
{arr}
</tbody>
</div>
);
}
