react 入坑笔记(一)

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 入坑笔记(一) 的全部内容, 来源链接: utcz.com/z/383014.html

回到顶部