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')

);

巴特西

react 入坑笔记（一）

一些概念：

一、核心库

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

三、组件

最新文章

热门文章