ppt中仿网站链接怎么做,网站开发与维护 专业,微信开放平台小程序开发文档,wordpress 云共享文章目录 1. React基础1.1 React 概述1.1.1 什么是React1.1.2 React 的特点声明式基于组件学习一次，随处使用1.2 React 的基本使用1.2.1 React的安装1.2.2 React的使用1.2.3 React常用方法说明React.createElement()ReactDOM.render()1.3 React 脚手架的使用1.3.1 React 脚手架… 文章目录 1. React基础1.1 React 概述1.1.1 什么是React1.1.2 React 的特点声明式基于组件学习一次，随处使用 1.2 React 的基本使用1.2.1 React的安装1.2.2 React的使用1.2.3 React常用方法说明React.createElement()ReactDOM.render() 1.3 React 脚手架的使用1.3.1 React 脚手架的意义1.3.2 使用React 脚手架初始化项目另：npx命令介绍 1.3.3 在脚手架中使用React 2. JSX2.1 JSX的基本使用2.1.1 React.createElement()的问题2.1.2 JSX简介2.1.3 JSX使用步骤2.1.4 思考：为什么脚手架中可以使用JSX语法？2.1.5 JSX的注意点 2.2 JSX中使用Javascript表达式2.3 JSX的条件渲染2.4 JSX的列表渲染2.5 JSX的样式处理2.5.1 行内样式 -- style2.5.2 类名 -- className 2.6 JSX总结 3. React组件基础3.1 React组件的介绍3.2 React组件的两种创建方式3.2.1 使用`函数`创建组件3.2.2 使用`类class`创建组件3.2.3 把创建好的组件，`抽离成独立的JS文件` 3.3 React事件处理3.3.1 事件绑定3.3.2 事件对象 3.4 有状态组件 和 无状态组件3.5 组件中的state 和 setState()3.5.1 state的基本使用1. `初始化state` / 初始化状态2. `获取状态` / 在组件中使用状态 3.5.2 setState()修改状态state3.5.3 从JSX中`抽离`事件处理程序 3.6 事件绑定this指向3.7 表单处理 参考： React 入门实例教程 - 阮一峰–太早，不推荐React 官网React 官网 -中文React入门看这篇就够了 加微信1124692 领取资料 1. React基础 React基础目标： 能够说出react是什么能够说出react的特点能够掌握react的基本使用能够使用react脚手架 1.1 React 概述
1.1.1 什么是React
React是一个用于构建用户界面的javascript库。用户界面：对前端来说就是HTML页面， 所以，React 主要用来写HTML页面，或构建Web应用。 如果从MVC的角度看，React仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的M 和 C的功能。React 起源于Facebook的内部项目，后又用来假设Instagram的网站，并与2013年5月开源。React简介 React 是Facebook用来创建用户界面的JS库，在2013年开源。React 不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具，所以很多人认为React 是MVC中的V(视图view)。React的存在能够很好的解决“构建随着时间数据不断变化的大规模应用程序” – 相当于一个组件化的思想，把一个大应用拆分成很多小的组件，所以React能够引导我们重新思考如何构建应用程序。React的核心就是封装可复用性高的组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。 学习React前了解： 目前前端的主流框架由Vue、React、Angular组成。Angular因为革命性太高（每次发布新版本，都会颠覆前面版本的语法与使用，所以维护成本比较高），所以Vue、React 比较受欢迎Vue、React 都是一个MVVM框架，为什么需要MVVM框架？ – 以往用js 或者jquery 来操作大量的dom，会导致渲染的时间很慢，但是MVVM这种设计模式不会直接操作dom，而是用model来代替dom，用js形成一个虚拟的dom树，只会在最后一次进行渲染（什么时候数据不修改了，确定了dom了，才会对dom进行渲染，不像实际dom，操作一次渲染一次） 1.1.2 React 的特点
声明式基于组件学习一次，随处使用声明式
只需要描述UI（HTML）看起来是什么样，就跟写HTML一样我们负责用React代码来描述结构，React负责渲染UI，并在数据变化时更新UI//比如我们在页面中响应一个标题，我们只需要写一个h1标签
const jsx = div className = "app"h1Hello React! 动态变化数据:{count}/h1
/div基于组件
组件是React最重要的内容组件表示页面中的一部分内容组合、复用多个组件，可以实现完整的页面功能学习一次，随处使用
React的必杀技使用React 不仅可以开发Web应用，还可以开发移动端（安卓/苹果）原生应用（react-native），还可以开发VR（虚拟现实）应用（react 360）React 特性 React 是声明式、组件化的，非常灵活。 声明式组件化灵活 ： 支持单页面（一个html，由路由方式去进行分发） / 多页面（多个html）支持服务端渲染，可以把react 放到node服务器中渲染页面出来，一些官网、商城的项目，react 写的是单页面，但需求是多页面，这时可以用next.js来生成多个视图，这样方便做seo优化，提高网站排名可以做react native ，还可以做app开发，所以react 应用非常广泛。 组件化 和 模块化的区别： 组件化侧重于UI,把前端一个独立的UI模块，开发成一个小的组件，然后在不同的页面进行嵌套、拼接，就像积木一样。模块化侧重于功能，比如get、post请求这个功能要在很多地方用到，我们就把它做成一个独立的模块，在其他地方使用。 1.2 React 的基本使用
1.2.1 React的安装
安装命令：npm i react react-domreact 包是核心，提供了创建元素、组件等功能react-dom 包提供DOM相关功能等安装完成后可在package.json中查看 node_modules中有相应的包，且可在package.json中查看具体信息 1.2.2 React的使用
1. 引入react 原生的html中引react库的方法：
!-- React --
script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"/script
!-- React DOM --
script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"/script或者，像上面用npm 安装后，引入
script src="./node_modules/react/umd/react.development.js"/script
script src="./node_modules/react-dom/umd/react-dom.development.js"/script2. 创建react元素
scriptconst title = React.createElement('h1',null,'Hello React') // React是由核心库react.js提供的
/script渲染创建好的react元素到页面中ReactDOM.render(title,document.getElementById('app')) //ReactDOM 是由react-dom提供的完整代码如下：
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"titlelxz20231103/title
/head
bodydiv id="app"/div!-- 1.引入js文件 --script src="./node_modules/react/umd/react.development.js"/scriptscript src="./node_modules/react-dom/umd/react-dom.development.js"/scriptscript// 2. 创建react元素// React.createElement('元素名称',元素属性,'元素子节点（文本节点或者元素节点）')const title = React.createElement('h1',null,'Hello React') //声明一个常量title来接收创建好的React元素// 3. 渲染react元素到页面某元素中// ReactDOM.render(要渲染的react元素，要把元素渲染、挂载在哪位位置（挂载点）)ReactDOM.render(title,document.getElementById('app'))/script
/body
/html1.2.3 React常用方法说明
React.createElement()
了解即可，因为这个方法用起来不是特别友好，在创建复杂结构的时候会很繁琐，后面会有一种简单友好的方法来创建react元素参数： 参数1：元素名称，也就是html元素的名字，字符串，eg: ‘p’，'h1’等 参数2：元素属性，没有属性写null，有属性写对象,eg： {title:‘我是标题’} 参数3及以后的参数：元素的子节点，所以这个方法不知有3个参数，可能有很多参数情况1： 没有属性，文本子节点 const title = React.createElement('h1',null,'Hello React') // 没有属性的h1标签，子节点是文本 Hello React情况2：有属性，文本子节点
const title = React.createElement('p',{id:'p1',title:'我是标题'},'Hello React'
)情况3：
const title = React.createElement('p', // 元素1：创建元素的 标签名称{id:'p1',title:'我是标题'}, // 元素2： 创建元素的 属性'Hello React', // 元素3 及以后 ： 创建元素的子节点，子节点1：文本React.createElement('span',null,'加油！') // 元素3 及以后 ： 创建元素的子节点，同级子节点2：元素
)类似上图这样一个简单的结构也要很多代码，所以这个方法用起来并不是很方便，了解即可
ReactDOM.render()
作用：用来将创建好的react元素渲染到页面中参数： 参数1：创建好的react元素或者组件 参数2:dom对象，通常用 document.getElementById('app') 来获取根节点1.3 React 脚手架的使用
1.3.1 React 脚手架的意义
脚手架是开发现代web应用的必备现代web应用不再像传统的方式去创建页面写css，js那样现在web应用写代码只是其中的一环，除此之外还有代码规范、项目打包上线、预编译等等问题要考虑。所以我们需要一套完整的解决方案来帮我们开发项目，如果手动一个个处理，就很繁琐，因此我们需要这么一套工具，这个工具就是脚手架。另外我们还可以充分的利用webpack、babel、eslint等工具来辅助我们进行项目的开发。 使用react 完全不用考虑webpack等的配置问题，react脚手架是开箱即用的，我们可以用更多的时间来关注业务，而非配置。 1.3.2 使用React 脚手架初始化项目
初始化项目：推荐使用： npx create-react-app my-app-name方式2：npm init react-app my-app-name方式3：yarn create react-app my-app-name happy hacking – 快乐黑客 启动项目，在项目根目录执行命令： npm start项目根目录-- 有p
