安装
使用create-react-app脚手架搭建
全局安装
npm i create-react-app -g
查看版本
create-react-app -V
查看命令
create-react-app --help
创建项目
create-react-app 项目名称
进入项目
cd 项目名称
启动项目
npm start
jsx
jsx是什么
jsx全称是JavaScript XML，在js中写XML标签，是JavaScript的一种扩展语法
jsx标签既不是字符串也不是HTML，编译后是一个对象，描述要显示UI信息
说明：XML是可扩展标记语言
- 可以写入的标签：
1.w3c规定的标签，浏览器端能解析
2.自定义标签，首字母大学，封装的组件
3.任意标签，不被浏览器解析
代码的话一般是放在src目录下
入口：index.js
import React from 'react'; //导入react
import ReactDOM from 'react-dom'; //导入reactDOM
//通过render函数，随便写点东西在我们的页面上
let h = <h2>
<span>hello React!</span>
</h2>;
console.log(h);//这是创建的h是一个react对象，用来描述UI的信息，经过render生成一个真实的DOM
ReactDOM.render(
h,
document.getElementById('root')
)
React.createElement
let span = React.createElement('span',null,'hello,react1')
let h = React.createElement('h2',{className:'red'},span)
ReactDOM.render(
h,
document.getElementById('root')
)
两者相比jsx的语法更清晰明了,所以建议使用jsx的方法;
jsx编译过程
- 使用jsx语法的优点：
- 符合写模板的习惯
- 程序结构更容易被直观化
- 抽象了ReactElement的创建过程
- 书写的依然是js，不需要学习心得模板语法
jsx语法只是为了React.createElement提供的语法糖
jsx标签结构->经过babel编译 -> 形成js对象结构（虚拟DOM） ->经过ReactDOM.render生成真实的DOM元素 -> 然后插入页面制定元素中
jsx语法规范
- jsx被编译成对象
- 可以当做值赋值给变量
- 可以当做函数的返回值
- 可以存在数组中
- 写任意表达式，使用一堆花括号{表达式}
- 订的组件必须首字母大写，否则会当成普通标签解析
- 定义在行间的props，如果不赋值，默认为true
- Boolean，Null和Undefined作为子元素会被忽略，需转成字符串
let h = <h2>
<span>hello,react!</span>
</h2>
<ul></ul>;
这样写会报错，需要包裹一个父级元素
let h = <>
<h2>
<span>hello,react!</span>
</h2>
<ul></ul>;
</>
建议使用这种方式React.Fragment
let h = <React.Framgent>
<h2>
<span>hello,react!</span>
</h2>
<ul></ul>;
</React.Framgent>
函数返回值的写法
function create(){
return <React.Fragment>
<h2>
<span>hello,react!</span>
</h2>
<ul></ul>;
</React.Fragment>
}
ReactDOM.render(
create(),
document.getElementById('root');
)
数组的方式
如果是数组需要手动提供一个key值,主要是代码优化，可以提高利用率
let arr = [
<h2 key="123">
<span>hello,react!</span>
</h2>,
<ul key="456"></ul>
];
ReactDOM.render(
h,
document.getElementById('root');
)
{}可以写任意表达式
let value = 'hello,react';
let data = [1,2,3,4,5,6,7];
let lis = data.map(item => {
return <li key={item}>{item}</li>
})
let h = <React.Framgent>
<h2 title={value}>
<span>{value}</span><br/>>
<span>{1+21}</span>
<span>{true ? 1 : 100}</span>
<span>{[1,2,3].map(item => item*2)}</span>
<span>{1>2}</span>
</h2>
<ul>{lis}</ul>;
</React.Framgent>
写jsx的注意事项
返回的结构只能有一个顶层标签
- 解决方式：
1.外层包裹一个元素
2.返回数组形式，每个元素需要添加不重复的key值
3.使用<></>或者<React.fragment></React.fragment>对结构进行包裹
组件
组件 components 让你可以将用户UI界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计
- 编写组件的好处：
- 提高可复用性，可维护性
- 组件结合构成UI界面，更方便删除和替换
- 方便对单独组件功能进行测试
组件的分类
- 函数式组件
- 类组件
函数式组件
输入：传入组件的参数 props定制组件的数据
输出：返回值，我们描述的UI信息
function CreateH(props){
return <h2>
<span>{props.title}</span>
</h2>
}
ReactDOM.render(
<div>
{h}
{CreateH({title:'hello,world!'})}
{CreateH({title:'hello,react!'})}
<CreateH title="123"/>
</div>,
document.getElementById('root')
)
类式组件
class Test extends React.Component{
render(){
console.log(this);//this指向实例,有一个props，存储了属性
return <h2>
<span>{this.props.title}</span>
</h2>
}
}
函数组件 vs 类式组件
函数组件 轻 输入数据输出显示UI信息， 用来做展示 没有生命周期
类式组件 重 有自己的状态 有生命周期
组件的特点
高内聚资源---组件资源内部高内聚，组件资源由自身加载控制
作用域独立---内部结构密封，不与全局或者其他组件产生影响
自定义标签---定义组件的使用方式
可相互组合---正是组件强大的地方，组件间组装整合
规范化接口---组件接口有统一规范，或者是生命周期的管理
组件模块化
将一个组件划分在一个文件中，需要时引入组件，将各个组件组合在一起，
各个组件之间是相互独立的，开始互不干扰
- 模块化的好处
1.提高开发效率，有利多人协同开发
2.避免命名冲突（减少命名空间污染）
3.方便代码的复用和后期维护
4.降低耦合度
写一个title组建
src 目录下创建一个components文件夹 ->title.js
import React from 'react'
class HTitle extends React.Components{
render(){
return <div>
<h2>这是H创建的title！</h2>
</div>
}
}
export default HTitle;
然后在index.js
import Htitle from '../src/components/title'
ReactDOM.render(
<div>
<Htitle/>
</div>,
document.getElementById('root')
)
网友评论