React【React是什么？、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

文章目录

       React是什么？

为什么要学习React 

React开发前准备 

创建React项目 

React项目结构简介 

React组件化

初识JSX 

渲染JSX描述的页面

 JSX语法

JSX的Class与Style属性

JSX生成的React元素

条件渲染（一）

条件渲染 （二）

列表渲染

 事件处理

---

React是什么？

React 起源于 Facebook 的内部项目，于2013年5月公开发布。
用于构建用户界面的 JavaScript 库。

React 特点

1、声明式 − 以声明式编写 UI，我们只需要编写代码描述UI，当数据变动时 React 能高效更新并渲染合适的组件

2、JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

3、高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

4、组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

5、单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

为什么要学习React 

1、React是目前前端最火的框架之一

2、React是目前企业技术栈中要求的知识点

3、React可以提升开发体验

4、...

React开发前准备 

 React官方参考文档：https://zh-hans.reactjs.org/

创建React项目 

使用集成的工具链，以实现最佳的用户和开发人员体验。

Create React App工具链

Create React App 是用 React 创建新应用的最佳方式，它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验。

npx create-react-app my-app 

温馨提示 

1、需要在你的机器上安装 Node >= 14.0.0 和 npm >= 5.6

2、项目名称不能存在大写字母，可以使用横杠(-)连接多个词汇

运行项目

项目创建完成之后，启动方式也是有他的专属方式

// 第一步：进入项目的根目录
cd my-app
// 第二步：启动项目
npm start

启动成功效果：

 VSCode快捷键

vsCode有很多针对React快捷键，这里我推荐： ES7

React/Redux/GraphQL/React-Native snippets

React项目结构简介 

 了解React项目的项目结构对我们继续开发是很有必要的

node_modules：React项目需要的依赖包，注意：此文件夹不可以移动压缩复制等操作public：React项目静态资源文件夹，包含 index.html 入口文件、图片、 manifest.json 配置文件等src：源码文件夹，我们开发主要在这里编写代码 .gitignore：git忽略文件package-lock.json：完整依赖包的信息文件package.json：定义项目所需要的各种模块名称、版本信息等README.md：markdown文件，项目的注释或描述文件

src 文件夹下的文件

App.css：App组件对应的css文件App.js：App组件，主入口组件App.test.js：App组件测试文件index.css：index主入口文件对应css文件，也是公共css文件logo.svg：logo图片reportWebVitals.js：检测文件。包含三个关键指标（CLS、FID、LCP）和两个辅助指标（FCP、TTFB）setupTests.js：测试文件，针对项目编写测试用例使用

React组件化

 组件

在React应用中，我们把一个页面看作是由一个个组件构成的。每一个组件可以包含自己的页面结构（HTML）与页面逻辑（JavaScript）

 组件化

组件化开发，带来了全新的开发体验，也带来了全新的编码方式。
在React中，构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。
比如：App组件

初识JSX 

 JSX的作用

 我们使用JSX来实现组件中的页面结构。

什么是JSX

一个 JavaScript 的语法扩展，JSX 可以生成 React “元素”，React元素用来描述页面应该长什么样子。

 index.js

 App.js

 

渲染JSX描述的页面

 应用渲染界面的过程：

index.js

 App.js

这段jsx描述了界面长什么样子

 最终生成的页面DOM

 尝试自己写一段JSX，代替App组件的界面

<h1>hello，xiaotong</h1> 

观察最终生成的DOM结构 

 JSX语法

 最简单的一段jsx

<h1>Hello, xiaotong</h1>

在JSX中嵌入表达式

在 {} 大括号内放置任何有效的 JavaScript 表达式

const name = 'xiaotong';
const element = <h1>Hello, {name}</h1>;

JSX中指定属性

如果是静态值，则直接使用引号，如果是动态值，则使用 { js表达式 }

const element = <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"></img>;

const avatarUrl='https://www.baidu.com/img/flexible/logo/pc/result.png'
const element = <img src={avatarUrl}></img>;

JSX子元素嵌套

<div><h1>Hello!</h1><h2>小童</h2></div>

JSX的Class与Style属性

 设置元素的类名

提示：
在jsx中，需要将 class 修改为 className

import React, { Component } from 'react'
import "./App.css"
export default class App extends Component {render() {return (<div className='box'></div>)}
}

.box{width: 200px;height: 200px;background-color: red;
}

设置元素的style

JSX中style的值是一个对象。

import React, { Component } from 'react'
export default class App extends Component
{render() {return (<div style={{width:"200px",height:"200px",background:"green" }}></div>)}
}

JSX生成的React元素

 1、JSX最终生成一个React元素。

const element=<h1 className="con">hello，xiaotong</h1>

JSX被编译后变成这样一段JS代码：

const element = React.createElement('h1', {className: 'con'},'hello，xiaotong'
);

React.createElement 返回的对象长这个样子，这个对象用来描述界面应该长什么样子，我们就把这个对象称为 React元素 。

//简化版
const element = {type: 'h1',props: {className: 'con',children: 'hello，baizhan'}
};

可以打印一下，查看完整的React元素

console.log(<h1 className="con">hello，xiaotong</h1>)

 之后 React DOM 会根据这个对象描述的信息生成 真正的DOM元素 。

条件渲染（一）

 我们可以根据不同的条件，渲染不同的界面。

1、使用 if

const flag=trueif(flag){return <div>生存吧</div>
}return <div>毁灭吧</div>

2、三目运算符 condition ? true : false

const flag = true
return flag ? <div>生存吧</div> : <div>毁灭吧</div>

或者

const flag = true
const element=flag ? <div>生存吧</div> : <div>毁灭吧</div>
return element

条件渲染 （二）

 1、与运算符 &&

const flag=true
return flag && <div>生存吧</div>

const flag=true
return <div> {flag && "生存吧"} </div>

提示：
在 JavaScript 中， true && expression 总是会返回 expression , 而 false && expression 总是会返回 false 。
因此，如果条件是 true ， && 右侧的元素就会被渲染，如果是 false ，React 会忽略并跳过它。

2、使用 null 

如果返回 null ，则React什么都不渲染

const flag=true
return {flag ?<div>生存吧</div> :null}

列表渲染

 列表是页面常见的展示效果

 可以通过使用 {} 在 JSX 内构建一个元素集合。

return  <ul>{["前端团队","后端团队","设计团队"].map((item,index) =>{return <li key={ index }>{ item } </li>})}</ul>

复杂数据列表渲染

const list = [{"id": 2208287,"desc": "鄞州：家有富矿，博物馆的美好力量，你get到了吗？ “21世纪的博物馆拥有巨大的","title": "果小桃"},{"id": 2208760,"desc": "梅里雪山北坡|我的第二次重装徒步·附攻略1 篇1? \t 字数限制🚫详细攻略会分","title": "小蘑猪zcy"},{"id": 2208882,"desc": "☀ 巴塞罗那观赏日落的好去处 巴塞罗那，一座地中海城市，融合了罗马、中世纪的风格","title": "Go旅城通票"}
]return <ul>{list.map((item, index) => {return (<li key={item.id}><h3>{item.title}</h3><p>{item.desc}</p></li>)})}</ul>

提示：
key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

 事件处理

 React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

1、React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。