目录
4.3.1、函数组件 接收 (函数是通过形参的方式传递过来的 )
学习目标:
- 能够使用react脚手架完成react项目构建
- 掌握函数组件和类组件的定义
- 能够实现父子组件传值
三、React脚手架
React团队主要推荐使用create-react-app来创建React新的单页应用项目的最佳方式。
React脚手架(create-react-app)意义
- 脚手架是官方推荐,零配置,无需手动配置繁琐的工具即可使用
- 充分利用 Webpack,Babel,ESLint等工具辅助项目开发
- 关注业务,而不是工具配置
create-react-app会配置你的开发环境,以便使你能够使用最新的 JavaScript特性,提供良好的开发体验,并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。
建议可以安装 js包管理工具 yarn (facebook开发的) --- 速度会快一些
npm i -g yarn
3.1、创建React项目
npx create-react-app myapp // 创建项目,时间会有点的久
cd myapp // 进入到安装项目中
npm start // 启动项目
四、React 组件
4.1、简介
组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。从概念上类似于 JavaScript 类或函数。它接受任意的入参(props),并返回用于描述页面展示内容的 React元素(jsx)。 定义好的组件一定要有返回值
react中定义组件的方式2种:
- 函数组件(无状态组件/UI组件)
- 类组件(状态组件/容器组件)
4.2、组件的创建方式
4.2.1、函数创建组件
- 函数组件(无状态组件):使用JS的函数创建组件
- 函数名称必须以大写字母开头,
- 函数组件必须有返回值(jsx),表示该组件的结构,且内容必须有顶级元素
import React from 'react'
// 函数名首字母必须大写
function Hello() {
return (
<div>这是第一个函数组件</div>
)
}
4.2.2、类组件创建
- 使用ES6语法的class创建的组件(状态组件)
- 类名称必须要大写字母开头
- 类组件要继承React.Component父类,从而可以使用父类中提供的方法或者属性
- 类组件必须提供 render 方法,用于页面结构渲染,结构必须要有顶级元素,且必须return去返回
import React from 'react'
// 创建class类,继承React.Component,在里面提供render方法,在return里面返回内容
class Hello extends React.Component{
render(){
return (
<div>这是第一个类组件</div>
)
}
}
4.3、父子组件传值(props[只读属性])
组件间传值,在React中是通过只读属性 props 来完成数据传递的。
props:接受任意的入参,并返回用于描述页面展示内容的 React元素。
props中的数据是不能被修改的,只能读取。
react中的数据不是双向,单向数据流。
4.3.1、函数组件 接收 (函数是通过形参的方式传递过来的 )
function Cmp(props) {
return (
<div>
<h3>{ props.name } -- 你好世界</h3>
</div>
)
}
4.3.2、类组件 接收 ( 类是通过成员属性去得到 )
class Cmp extends React.Component{
render(){
return (
<div>{ this.props.name } -- 我是一个类</div>
);
}
}