React - 初始化项目的步骤

1，使用 create-react-app 快速构建 React 开发环境

create-react-app 自动构建的项目是基于 Webpack + ES6

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app
$ npm start

在浏览器中访问 http://localhost:3000/

2，JSX

React 使用 JSX 来替代常规的 javascript
JSX 的优点：

• JSX 的执行更快，因为它是在编译为 javascript 代码后进行优化
• 它的类型是安全的，在编译过程中就能发现错误
• 使用 JSX 编写模板更加简单快捷

可以在 JSX 中时候用 javasript 表达式，使用 {} ，但不能使用 if else 语句，使用conditional（三元运算）

var myStyle = {
    fontSize: 100,
    color: '#ff0000'
}
ReactDOM.render(
    /*标签外的注释不需要花括号，只能使用一个外层 div 包裹*/
    <div>
        <p>aaa</p>
        {/*这里是一个标签内的注释*/}
        <h1>{i== 1 ? 'True' : 'False'}</h1>
        <p style={myStyle}>外部样式</p>
        <p style={{fontSize: 12}}>内联样式</p>
    </div>,
    document.getElementById('example')
)

3，HTML 标签 和 React 组件

React 可以渲染 HTML 标签 或 React 组件
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById)

渲染 React 组件，只需要创建一个大写字母开头

var MyComponent = React.createClass({/*...*/);
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'))

React 的 JSX 使用大、小写的约定来区分本地组件和 HTML 标签
注意：由于 JSX 就是 javascript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性

4，React State（状态）

React 把组件看成是一个状态机。通过与用户的交互，实现不同的状态，然后渲染UI，让用户界面和数据保持一致。
React 中，只需更新组件的 state，然后根据新的state 重新渲染用户界面（不需要操作 DOM）。
以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 Render() 方法中使用 this.state 来修改当前时间。
添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = { data: new Date() }
    }
    render() {
        return (
            <div>
                <h1>Hello world</h1>
                <h2>现在是：{this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('example')
)

5，React 事件处理

5.1 React 元素的事件处理和 DOM 类似

• React 事件绑定【属性】的命名采用【驼峰式命名】，而不是小写
• 如果采用 JSX 语法，你需要传入一个函数作为事件处理函数，而不是一个字符串（DOM 元素的写法）

HTML 写法

<button onclick="funcName()">激活按钮</button>

React 写法

<button onClick={funcName}>激活按钮</button>

你不能通过【return false】的方式【阻止浏览器的默认行为】，需要明确使用【e.preventDefault()】

5.2 React 事件传参

class App extends React.Component{
    constructor(){
    }

    // 使用箭头函数，确保函数内 this 指向组件 App
    func1 = (a,b) => {
        console.log(a, b)
    }
    render() {
        return (
            <div>
                {/*没有参数时*/}
                <button onClick={this.func1}>激活按钮</button>
                {/*有参数时*/}
                <button onClick={this.func1.bind(a, b)}>激活按钮</button>
            </div>
        )
    }
}

5.3 切换元素的显示和隐藏

class App extends React.Component {
    constructor(props) {
        super(props)
        state: {isShow: true}
    }

    toggleShow = () => {
        this.setState(prevState => ({
            isShow: !prevState.isShow
        }))
    }

    render() {
        return (
            <div>
                <button onClick={this.toggleShow}>点击切换显示隐藏</button>
                <p>
                    {this.state.isShow ?
                        'true'
                    :
                        'false'
                    }
                </p>
            </div>
        )
    }
}

6，列表循环（map）

这里 key 属性的值应该时【唯一的】

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = { lists: [] }
    }
    // 挂载
    componentDidMount = () => {
        this.setState({
            lists: [1,2,3,4,5]
        })
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.lists.map(item => {
                        return (
                            <li key={item.toString()}>{item}</li>
                        )
                    })}
                </ul>
            </div>
        )
    }
}