react 入坑笔记（一）

一些概念：

1.组件：概念等同于 vue 中的组件，字面意思，不过 vue 中组件是以 .vue 结尾，通过 vue-loader 编译成 js，而 react 组件就是 js。

2.jsx：js 语法扩展，编译器遇到 html 标签按照 html 编译，遇到 js(就是 { xxx }) 按照 js 规则编译，类型安全。

3.单项响应的数据流 - 这点暂时没明白。

一、核心库

import React from 'react';
import ReactDOM from 'react-dom';

react 包是核心中的核心，包括创建虚拟 dom 的方法，如 React.createElement ,以及  Component 这个类... 等；

react-dom 包是从 react 中分离出来的，是 虚拟DOM 和真实 dom 之间的粘合剂，也包括一些其他的方法。

二、项目结构（基于 create-react-app）

create-react-app 是 react 项目的 cli 脚手架，等同于 vue-cli。首先需要从 npm 上安装。

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

装完这个 cli 后，my-app 文件夹下的目录结构是：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html        // 入口 html
    manifest.json     // 这个文件不知道是干啥的，建议保留
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js          // 和 index.html 对应的入口 js
    logo.svg

目录结构很乱，可根据自己需求删除除 index.html 和 index.js 之外的文件。

简易版参照：狗屎一样的React（第二节，让目录结构变得更易懂）；

注意：可以通过 npm run eject 暴露更多细节。

三、组件

react 创建组件的方法有三种：

1.以 react 工厂的形式创建：

var HelloMessage = React.createClass({
    render: function() {            // 有 render 函数
        return (                    // return 一个 jsx
            <div>
                <h1>xxxx</h1>
                <h2>xxxxxx</h2>
            </div>
        )
    }
})

ReactDOM.render(                    // 渲染
    <HelloMessage />,
    document.getElementById('root')
)

2.以函数的形式创建：

function HelloMessage(props) {                  // 带一个参数
    return (                                    // 同样 return 一个 jsx
        <div>
            <h1>Hello,world~</h1>
            <h2>现在是 { props.date.toLocaleTimeString() }</h2>
        </div>
    )
}

ReactDOM.render(                                // 渲染
    <HelloMessage date={ new Date()}/>,
    document.getElementById('root')
)

3. es 6 中以 class 的形式创建：

class HelloMessage extends React.Component {
    render() {                            // 需要一个 render 函数
        return (                           // return jsx
            <div>
                <h1>Hello, world!</h1>
                 // 注意传参的时候需要使用 this.poops
                <h2>现在是 { this.props.date.toLocaleTimeString() }.</h2>
            </div>
        )
    }
}

ReactDOM.render(                   // 渲染
    <HelloMessage date={ new Date() }/>,
    document.getElementById('root')
)

16版本之后，创建组件的方式略有变化：

import React, { Component } from 'react';

class componentA extends Component {
    ...
}

三种方式都只是演示了最基本、最简单的组件形式。以 class 形式创建组件是目前版本最推荐的方式。

贴一个组件嵌套：

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="菜鸟教程" />
        <Url url="http://www.runoob.com" />
        <Nickname nickname="Runoob" />
    </div>
    );
}

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