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