邢台网站开发,厦门网站开发公司找哪家,网站建设设计书任务书,新冠数据实时更新React
概述 :
React 是一个用于 构建用户界面 的 JavaScript 库因为框架是有一整套解决方案的#xff0c;React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux结合起来才叫框架#xff0c;而React本身只是充当一个前端…React
概述 :
React 是一个用于 构建用户界面 的 JavaScript 库因为框架是有一整套解决方案的React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux结合起来才叫框架而React本身只是充当一个前端渲染的库而已如果从 MVC 的角度来看, React 仅仅是视图层( V ), 也就是只负责视图的渲染, 而非并提供了完整的 M 和 C 的功能React 起源于 Fackbook 的内部项目, 后又用来架设 Ins 的网站, 并与 2013年 5 月开源
特点 声明式 你只需要描述UI (HTML) 看起来是什么样React 负责渲染UI , 并在数据变化时更新 UI h1Hello React! 动态变化数据{count}/h1Child/Child 基于组件 组件是 React 最重要的内容组件表示页面中的部分内容组合、复用多个组件可以实现完整的页面功能 学习一次, 随处使用 使用 React 可以开发 Web 应用使用 React 可以开发移动端混合应用react-native使用 React 可以开发 VR虚拟现实应用react 360 我们现在做的是web页面 app应用 原生app 混合app
- 原生app ios(苹果)/Android(安卓)
- 混合app 加一个壳子(开发一套前端代码生成的app ) ios/Android壳子(前端代码) ios/Android 开发的 原生应用app
ios(web页面) Android(web页面) 混合app 借助 react-nativeReact 的基本使用 包管理器/工具 npm cnpm yarn npm 最火的 淘宝镜像 cnpm 国内 (demo ok 项目 cnpm 不要弄) yarn : Facebook 使用前必须安装 yarn 的运行模块 npm i yarn -g yarn add xxxyarn remove xxxyarn --version React 的安装
命令 : yarn add react react-domreact 包 : 是核心包, 提供 创建元素、组件等功能react-dom包 : 渲染DOM功能
React 的基本使用 需求 : 我是h1 1-引入 react 和 react-dom 两个js 文件
script src./node_modules/react/umd/react.development.js/script
script src./node_modules/react-dom/umd/react-dom.development.js/script2-创建 React 元素
// 参数1 : 元素名称
// 参数2 : 属性 (对象)
// 参数3 : 内容
const h1 React.createElement(h1,
{title: 啊哈哈
} ,
我是h1 )3-渲染 React 元素
//3.1 准备一个容器div idroot/div// 3.2 开始渲染
// 参数1 : 需要渲染的react元素/react组件
// 参数2 : 指定页面中的DOM容器
ReactDOM.render(h1, document.getElementById(root))createElement方法说明
// 参数1 : 元素名称 , 表示要创建的标签名称 (html标签)
// 参数2 : 属性 (对象), 如果有就传对象,没有就传null
// 参数3 : 子节点
// 1-文本节点 字符串
// 2-元素节点 React.createElement() 创建)
const h1 React.createElement(div,null,// spanReact.createElement(span, null, 我是span),React.createElement(p, null, 我是p)
)属性的特殊要求
不推荐使用class, 而推荐使用 className : class className 因为class关键字用在创建组件类用了 不推荐使用for, 而推荐使用 htmlFor for htmlFor 遍历使用了 属性推荐使用 驼峰命名
// for 在 label 上的使用
label forapp姓名/label
input idapp typetext /小练习 :
ul idlist classredli苹果/lili香蕉/lili橘子/li
/ul总结 : 使用createElement创建react元素非常的麻烦推荐您后面使用 JSX因为 JSX 需要 通过 babel 转化,所以我们使用脚手架(集成babel插件)来初始化项目完成react 的开发工作
React 脚手架
使用脚手架的意义
脚手架是开发 现代Web 应用的必备。充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。零配置无需手动配置繁琐的工具即可使用。关注业务而不是工具配置。
安装脚手架-初始化项目-01-npm
安装脚手架 : npm i create-react-app -g 查看版本号 : create-react-app -V 初始化项目 : create-react-app demo1
安装脚手架-初始化项目- 02 - npx (官网推荐) 命令 : npx create-react-app demo2 格式 : npx 脚手架 项目名称 [官网] : npx 不是拼写错误 —— 它是npm 5.2 附带的 package 运行工具。 npx : 简化了工具包中命令的使用方法 原来1 先全局安装脚手架的包 2 再使用脚手架中提供的命令来初始化项目现在直接使用脚手架来初始化项目即可 npx 内部执行的操作 1 先临时安装脚手架 : npm i create-react-app2 使用脚手架的命令初始化项目 : create-creat-app demo3 使用完,删除临时安装的脚手架 : npm un create-react-app 我们推荐使用这一种, 因为以后实际上开发,不可能每天都要初始化一个项目, 而是从项目开始到结束只会初始化一个项目而已 运行 : yarn start补充说明 :以后react和yarn都是 facebook 出来的,所以以后可以多使用yarn
React 脚手架中使用 react 清理结构 : src/ : 内部文件全部 删除 , 重新创建一个 index.js 入口文件public/ : 内部 文件全部删除, 重新创建一个 index.html 入口页面 , 添加 容器 简单演示 :
// 1 导入 react 和 reac-dom
import React from react
import ReactDOM from react-dom// 2 创建 react 元素
const h1 React.createElement(h1, null, Hello React CLI)// 3 渲染 react 元素
ReactDOM.render(h1, document.getElementById(root))回忆小练习 :
const ul React.createElement(ul, {id : list,className : red
},
React.createElement(li,null,苹果),
React.createElement(li,null,香蕉),
React.createElement(li,null,橘子)
)JSX 改造 小练习
const ul ul idlist classNameredli苹果/lili香蕉/lili橘子/li/ulJSX
####JSX 的介绍 JSX 是 JavaScript XML 的简写, 是一个 JavaScript 的语法扩展。表示在 JS 中写 XMLHTML格式的代码 xml : html : 注意 , 它既不是 xml, 也不是html, 它就是 JSX 为什么要使用 JSX : 爽 1 简洁2 直观3 对开发人员友好4 几乎没有增加额外的学习成本
JSX 的基本使用和注意点
使用
// 使用 JSX 创建 react 元素
const h1 h1 classNameclsHello JSX!/h1// 渲染 react 元素
ReactDOM.render(h1, document.getElementById(root))注意点 注意点1 : JSX 也只能由一个根节点 可以使用 div 或者 / 包裹起来. (空标签)注意点2 : 如果 结构比较复杂, 建议使用 () 把代码块包裹起来注意点3 : JSX 其实底层还是转化成了 React.createElement() 运行的 , babel 中文网
const h1 (divdiv classNamecls 我是div/divdiv classNamecls 我是div/div/div)在 JSX 中嵌入表达式 语法 : div{ js 表达式 }/div {} 中可以使用 任意j表达式 可以使用表达式 读取变量 : div { name }/div运算 : div {12}/div三元 : div { true ? 真 : 假 }/div函数 : div { [1,4,7].join(-) }/div 不能使用 不能使用 语句 div { if(){} }/div 报错 注意点 : 属性内可以使用 {} div title{ name } /div
