成都专业网站设计公司,国家城乡和建设厅特殊工种网站,洛江网站建设报价,我做网站推广文章目录 React是什么#xff1f;
为什么要学习React
React开发前准备
创建React项目
React项目结构简介
React组件化
初识JSX
渲染JSX描述的页面 JSX语法
JSX的Class与Style属性
JSX生成的React元素
条件渲染#xff08;一#xff09;
条件渲染 #xff0… 文章目录 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_modulesReact项目需要的依赖包注意此文件夹不可以移动压缩复制等操作publicReact项目静态资源文件夹包含 index.html 入口文件、图片、 manifest.json 配置文件等src源码文件夹我们开发主要在这里编写代码 .gitignoregit忽略文件package-lock.json完整依赖包的信息文件package.json定义项目所需要的各种模块名称、版本信息等README.mdmarkdown文件项目的注释或描述文件
src 文件夹下的文件
App.cssApp组件对应的css文件App.jsApp组件主入口组件App.test.jsApp组件测试文件index.cssindex主入口文件对应css文件也是公共css文件logo.svglogo图片reportWebVitals.js检测文件。包含三个关键指标CLS、FID、LCP和两个辅助指标FCP、TTFBsetupTests.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组件的界面
h1helloxiaotong/h1
观察最终生成的DOM结构 JSX语法 最简单的一段jsx
h1Hello, xiaotong/h1
在JSX中嵌入表达式
在 {} 大括号内放置任何有效的 JavaScript 表达式
const name xiaotong;
const element h1Hello, {name}/h1;
JSX中指定属性 如果是静态值则直接使用引号如果是动态值则使用 { js表达式 } const element img srchttps://www.baidu.com/img/flexible/logo/pc/result.png/img;
const avatarUrlhttps://www.baidu.com/img/flexible/logo/pc/result.png
const element img src{avatarUrl}/img;
JSX子元素嵌套
divh1Hello!/h1h2小童/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 classNamebox/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 elementh1 classNameconhelloxiaotong/h1
JSX被编译后变成这样一段JS代码
const element React.createElement(h1, {className: con},helloxiaotong
);
React.createElement 返回的对象长这个样子这个对象用来描述界面应该长什么样子我们就把这个对象称为 React元素 。
//简化版
const element {type: h1,props: {className: con,children: hellobaizhan}
};
可以打印一下查看完整的React元素
console.log(h1 classNameconhelloxiaotong/h1) 之后 React DOM 会根据这个对象描述的信息生成 真正的DOM元素 。 条件渲染一 我们可以根据不同的条件渲染不同的界面。
1、使用 if
const flagtrueif(flag){return div生存吧/div
}return div毁灭吧/div
2、三目运算符 condition ? true : false
const flag true
return flag ? div生存吧/div : div毁灭吧/div
或者
const flag true
const elementflag ? div生存吧/div : div毁灭吧/div
return element
条件渲染 二 1、与运算符
const flagtrue
return flag div生存吧/div
const flagtrue
return div {flag 生存吧} /div 提示 在 JavaScript 中 true expression 总是会返回 expression , 而 false expression 总是会返回 false 。 因此如果条件是 true 右侧的元素就会被渲染如果是 false React 会忽略并跳过它。 2、使用 null
如果返回 null 则React什么都不渲染
const flagtrue
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}/h3p{item.desc}/p/li)})}/ul 提示key 帮助 React 识别哪些元素改变了比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 事件处理 React 元素的事件处理和 DOM 元素的很相似但是有一点语法上的不同 1、React 事件的命名采用小驼峰式camelCase而不是纯小写。 2、使用 JSX 语法时你需要传入一个函数作为事件处理函数而不是一个字符串。
