React学习（一）

1.React环境安装

这里会直接使用 React.js 官网所推荐使用的工具 create-react-app 工具

1 npm install -g create-react-app
2 create-react-app hello-react
3 cd hello-react
4 npm startt

在安装之前可以修改npm 的源，会加速下载：

npm config set registry https://registry.npm.taobao.org

2.使用JSX结构描述UI信息

我们可以用JavaScript对象来描述多有能用HTML表示的UI信息，但是用JavaScript写起来太长了，结构看起来很不清晰，用HTML的方式写起来就方便许多，因此React.js把JavaScript的语法扩展了一下，就有了JSX。

如这样一个DOM元素的结构：

  

     
React 小书
  

用JSX语言表示为：

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

class Header extends Component {
  render () {
    return (
      

        
React 小书
      
    )
  }
}

ReactDOM.render(
  
,
  document.getElementById('root')
)

经过编译后：

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

class Header extends Component {
  render () {
    return (
     React.createElement(
        "div",
        null,
        React.createElement(
          "h1",
          { className: 'title' },
          "React 小书"
        )
      )
    )
  }
}

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById('root')
);

JSX语言经过Babel编译后，会生成如上图所示的React.createElement 结构，React.createElement会创建一个JavaScript对象来描述HTML结构的信息，包括标签、属性和子元素等，这样的代码就是合法的JS代码了。所谓的JSX其实就是JS对象。ReactDOM.render功能就是把组件渲染并且构造DOM树，然后插到页面上某个特定的元素上（这里是id为root的div元素）。

JSX转换图.png

总结

1. JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。

2. React.js 可以用 JSX 来描述你的组件长什么样的。

3. JSX 在编译的时候会变成相应的 JavaScript 对象描述。

4. react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

   ​

3.组件中的render方法

一个组件类必须实现一个render方法，这个render方法必须要返回一个JSX元素。这里要注意的是必须要用一个外层的JSX元素把素有内容能够包裹起来。返回并列的对个JSX元素是不合法的。

如这种是错误的做法：

render () {
  return (
    
第一个
    
第二个
  )
}

必须要用一个外层元素把里层元素包裹起来：

render () {
  return (
    

      
第一个
      
第二个
    
  )
}

表达式插入{}

在JSX当中可以插入JavaScript的表达式，返回的结果会相应的炫染道页面上。表达式用{}包裹。如在JSX中插入变量：

render(){
  const word='is good'
  return(
    

      
React {word}
    
  )
}

页面上就会显示“React is good”。也可以插入表达式计算{1+2}。也可以把它写成一个函数执行表达式返回：

render () {
  return (
    

      
React {(function () { return 'is good'})()}
    
  )
}

{}表达式插入除了可以卸载标签内部，也可以用在标签的属性上，比如插入一个类名：

render () {
  const className = 'header'
  return (
    

      
React
    
  )
}

这样可以给div添加一个header类名。

注意：

在react中用calssName给元素添加类名，因为class是JS中的关键字，用在类名上不合法。在JSX中用htmlFor替代for属性。其他的style、data-*等就可以像普通的HTML属性那样直接添加上去。

条件返回

在JSX内部除了可以放置任何表达式内容外，还可以放置JSX，在render函数内可以根据不同条件返回不同的JSX。比如：

render () {
  const isGoodWord = true
  return (
    

      

        React 
        {isGoodWord
          ?  is good
          :  is not good
        }
      
    
  )
}

上面的代码中定义了一个常量isGoodWord为true，在JSX中插入例如一个条件表达式{}，isGoodWord为true就返回 is good的JSX内容，否则返回 is not good。

如果在表达式中条件返回null，那么react就什么都不显示。

JSX元素变量

在react总可以直接定义JSX变量，如：

 const goodWord =  is good
 const badWord =  is not good

代码练习：见练习2

4.组件的组合、嵌套和组件树

组件可以和组件组合在一起、组件内部也可以使用别的组件。这样的组件嵌套构成了组件树。

例如：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
  render () {
    return (
      
React 小书
    )
  }
}

class Header extends Component {
  render () {
    return (