React 基础组件
react概述
npm i react react-dom
- react包 是核心，提供创建元素、组件等功能
- react-dom包 提供 DOM 相关功能等
首先在html中引入 js 文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
// 创建 react 元素, 其参数一是元素名称，参数二是元素属性，参数三个及其以后的参数是元素的子节点:
const title = React.createElement('h1', null, 'Hello React')
// 渲染react 元素, 其参数一是要渲染的react元素，参数二是挂载点:
ReactDOM.render(title, document.getElementById('root'))
image
react 脚手架的使用
使用react脚手架初始化项目：
- 初始化项目： npx create-react-app my-app
- 启动项目，在项目根目录执行: yarn start / npm start
// 初始化项目： npx create-react-app my-app 推荐使用npx，除此之外还可以使用npm init react-app my-app 或者 yarn create react-app my-app
// npx 是npm 版本5.2.0引入的一条命令，目的是提升包内提供的命令行工具的使用体验，即npx之前需要先安装脚手架包，再使用这个包中提供的命令，有了npx之后无需安装脚手架包，就可以直接使用这个包提供的命令
// yarn 是 Factbook发布的包管理器，功能和npm相同，可以看作是npm的替代品；yarn具有快速、可靠和安全的特点；初始化新项目:yarn init；安装包：yarn add 包名称；安装项目依赖项：yarn
image
在脚手架中使用 React
1，导入 react 和 react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'
2, 调用 React.createElement() 方法创建 react 元素
3，调用 ReactDOM.render() 方法渲染 react 元素到页面中
打开项目，我们在src下的index.js中写入以下代码：
// 引入
import React from 'react'
import ReactDOM from 'react-dom'
// 创建
const title = React.createElement('h1', null, 'Hello React jiaoshoujia!!')
// 渲染
ReactDOM.render(title, document.getElementById('root'))
image
JSX
React.createElement('div',
{
className: 'content'
},
React.createElement('h1', null, 'h1 title'),
React.createElement(
'ul', null, React.createElement('li', null, 'li-01'),
React.createElement('li', null, 'li-02')
)
)
等价于：JSX结构
<div className="content">
<h1>h1 title</h1>
<ul>
<li>li-01</li>
<li>li-02</li>
</ul>
</div>
以上代码可以看出，React.createElement()存在的问题
- 1，繁琐不简洁
- 2，不直观
- 3，不优雅，用户体验不爽
JSX 是 JavaScript XML的简写，表示在 JavaScript代码中 XML(HTML)格式的代码。
接下来我们使用JSX创建react元素：
const title = <h1>Hello JSX! <span>span 标签</span></h1>
ReactDOM.render(title, document.getElementById('root'))
image
推荐使用JSX语法创建React元素。
为什么脚手架中可以使用 JSX 语法？
1，JSX不是标准的ESMAScript语法，他是ESMAScript的语法扩展
2，需要使用babel编译处理后，才能在浏览器环境中使用, 这就说明脚手架内部其实是有bable 的配置的
3，create-react-app 脚手架中已经默认有该配置，无需手动配置
JSX基本使用：
- 1，React元素的属性名使用驼峰命名法
- 2，特殊属性名：class -> className, for -> htmlFor, tabindex -> tabindex
- 3,没有子节点的React元素可以使用 /> 结束
- 4，推荐：使用小括号包裹 JSX，从而避免 JS中的自动插入分号陷阱
// 使用小括号包裹JSX
const dv = (
<div> Hello JSX </div>
)
在JSX中嵌入JS表达式
- 数据存储在JS中
- 语法： {js表达式}
const name = 'Jerry'
const dv = (
<div>Hi, my name is {name}</div>
)
ReactDOM.render(dv, document.getElementById('root'))
JSX的条件渲染
const isLoading = true
const loading = () => {
return isLoading ? (<div>Loading.....</div>) : (<div>数据加载完成，此处是加载完的数据</div>)
}
const dv = (
<div>条件渲染：{loading()}</div>
)
ReactDOM.render(dv, document.getElementById('root'))
JSX的列表渲染
如果要渲染一组数据，应该使用数组的map()方法，注意：渲染列表时，应该添加key属性，key属性的值要保证唯一, map遍历谁给谁加key
const songs = [
{id: 1, name: '像我这样的人'},
{id: 2, name: '成都'},
{id: 3, name: '谢谢你的爱'}
]
const dv = (
<ul>
{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)
JSX 等样式处理
- 1，行内样式
- 2，类名 - className(推荐)
行内：
const dv = (
<h1 style={{color: '#ccc', backgroundColor: 'red'}}>JSX的样式</h1>
)
image
类名：
import './index.css'
const songs = [
{id: 1, name: '像我这样的人'},
{id: 2, name: '成都'},
{id: 3, name: '谢谢你的爱'}
]
const dv = (
<h1 className="title">JSX的样式</h1>
)
JSX总结：
1，JSX是React的核心内容
2，JSX表示在JS代码中写HTML结构，是React声明式的体现
3，使用JSX配合潜入的JS表达式、条件渲染、列表渲染，可以描述人意UI结构
4，推荐使用className的方式给JSX添加样式
5，React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能
网友评论