01 React初步认知、React元素、渲染、工程化

定义

  • react:用于构建用户界面的 JavaScript 库 (仅负责View层渲染、应在视图上体现交互逻辑)
  • vue:渐进式JavaScript 框架(MVVM)

使用

  1. 引入CDN脚本
  2. 添加根容器 div #app
  3. 创建React组件

ReactDOM.render

  • ReactDOM → render → 虚拟DOM → 真实DOM(放入容器)

React.create

  • 创建React元素 → 虚拟节点 → 真实节点
const oSpan = React.createElement('span', {className: 'text'
}, '子节点span')
ReactDOM.render(React.createElement('h1', {// 属性'data-tag': 'h1'}, [oSpan]),// 容器document.getElementById('app')
)

React组件

  1. React.Component
  2. 渲染视图必须放入render函数,且return视图
// 继承 使用React提供的关于组件的api
class MyButton extends React.Component {constructor(props) {super(props)this.state = {openStatus: false}}// 渲染视图必须放入render函数,且return视图render() {return '视图'}
}
class MyButton extends React.Component {constructor(props) {super(props)this.state = {openStatus: false}}render() {// 渲染视图必须放入render函数,且return视图const oP = React.createElement('p', {key: 2}, this.state.openStatus ? 'open状态' : "close状态")const oBtn = React.createElement('button', {key: 1,onClick: () => {this.setState({openStatus: !this.state.openStatus})}}, this.state.openStatus ? '关闭' : "打开")const wrapper = React.createElement('div', {}, [oP, oBtn])return wrapper}
}

工程化

npx create-react-app my-first-react-app
// npx:npm5.2 + 的包运行工具
create-react-app
// 脚手架工具:内部的工程化 → babel/webpack
cd my-first-react-app
yarn start/npm start

初始化目录

  • 不必要的可以删除
    在这里插入图片描述

App.js

function App() {return (<div className="App"></div>);
}export default App;
import { Component } from 'react'
class App extends Component {render() {return (<div className="App" >11111</div>);}
}export default App;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node --- 在express中配置使用模板引擎(art-template)

下载依赖: npm install --save art-template express-art-template配置: // app.js const express require("express"); const app express(); app.engine("html", require("express-art-template"));使用: 例如处理浏览器GET请求 /students…

PAM认证机制

一、PAM简介 Sun公司1995年开发的一种与认证相关的通用框架机制&#xff0c;PAM只关注如何为服务验证用户的API&#xff0c;通过提供一些动态链接库和一套统一的API&#xff0c;将系统提供的服务和该服务的认证方式分开&#xff1b;PAM只是一个框架而已&#xff0c;自身不做认证…

02 JSX学习

使用vite处理jsx vite引入的脚本必须是ESM的 npm init -y yarn add vite package.json 添加vite命令 index.html引入jsxJSX是什么 一种标签语法&#xff0c;在JS基础上进行的语法扩展不是字符串、也不是HTML是描述UI呈现与交互的直观的表现形式JSX被编译后会生成React元素 &am…

使用FreeCookies 控制浏览器cookies及修改http响应内容

FreeCookies 插件安装 1&#xff1a;您的计算机需要已经安装Fiddler &#xff08;如未安装&#xff0c;请至官网下载安装 http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler&#xff09; 2&#xff1a;进入Fiddler安装目录下的Scripts目录下&#xff…

node --- 使用node连接mysql

1.确保下载了mysql,且mysql处于打开状态. 2.确保下载了node,并成功安装:https://nodejs.org/en/ (小黑窗 node -v 查看) 3.安装node操作mysql的依赖包: # 命令行 npm install --save -mysql# 注:如果没有package.json 建议先使用 npm init -y 初始化正题 // app.js// 1. 引…

03 渲染元素ReactDOM.render

React与ReactDOM是2个不同的库&#xff0c;根节点内的所有内容&#xff08;和DOM更新、渲染相关&#xff09;由ReactDOM来管理一个React应用只有一个根节点用ReactDOM.render将React元素渲染到根节点 ReactDOM.render 参数1 React元素&#xff08;React.createElement(类组件/…

javascript --- 异步按顺序执行

使用promise可以很优雅的封装一个异步函数,使其按指定顺序执行: // 异步读取文件操作 const fs require("fs"); function promiseReadFile(url) {return new Promise(function (resolve, reject) {fs.readFile(url, function(err, data) {if(err) {reject(err);} e…

web提高:负载均衡

1、集群 1、为什么建议在阿里云购买负载均衡 非常便宜&#xff0c;又好用&#xff0c;有稳定&#xff0c;有简单。自己搭建不了负载均衡&#xff0c;因为共有云不支持组播跑不了vrp协议。你不会集群的概念&#xff0c;你还是蒙蒙的。2、为什么使用集群&#xff1f; 1、小规模 …

node --- 一个很好用的包json-server

这个第三方包,可以将json文件暴露出来,用http获取. (data.json如下) 下载依赖: npm install --g json-server查看是否含有json-server json -sever --version启动json-server 参考:https://www.npmjs.com/package/json-server

04 组件与Props

一些概念 组件&#xff1a;视图的片段、内部管理数据集合&#xff08;state&#xff09;外部传入配置结合&#xff08;props&#xff09;包含&#xff1a; 1. 视图标记&#xff08;React的JSX、Vue的template&#xff09;需要经过转换而成为真实的DOM 事件 数据 逻辑&#x…

利用ionic3进行上一行和左一行不动,中间移动的功能

首先在html中的写法是 <ion-header><ion-navbar><ion-title>历史数据</ion-title></ion-navbar></ion-header><ion-content ><div style"display:flex;width:625px;"><div class"head">地区</di…

05 state与setState、单向数据流

声明周期与组件卸载 props配置&#xff1a;使用组件时传入数据state私有数据&#xff1a;组件内部使用的数据 state的使用注意事项 必须使用setState方法来更改state多个setState会合并调用props和state更新数据要谨慎&#xff08;有可能在异步程序中更新&#xff09;setState…

HDU 3342 Legal or Not(拓扑排序)

描述 ACM-DIY is a large QQ group where many excellent acmers get together. It is so harmonious that just like a big family. Every day,many "holy cows" like HH, hh, AC, ZT, lcc, BF, Qinz and so on chat on-line to exchange their ideas. When someone…

jquery --- 阻止表单默认的提交行为,标准化表单的数据

表单如下: // .html <form id"topics_new_form" method"post" action"/topics/new"><div class"form-group"><label for"exampleInputEmail1">选择模块</label><selecet class"form-contr…

javascript --- spa初体验

首先使用express创建一个简单的服务器 创建文件夹 be-project # (确保安装了node,并配置好了环境) 在be-project目录下(命令行执行) npm init -y npm install --save express body-parse npm install --global nodemon// app.js const express require("express");…

vuex复习笔记

npm install vuex --save 进行安装 vuex import Vuex from vuex 新建一个vuex文件夹&#xff08;这个不是必须的&#xff09;&#xff0c;并在文件夹下新建store.js文件&#xff0c;文件中引入我们的vue和vuex。 转载于:https://www.cnblogs.com/jinsuo/p/8508699.html

python学习HTML之CSS(2)

1、边框的属性设置 PS&#xff1a;边框的高度和宽度可以采用百分比&#xff0c;但是高度方向的百分比基本无用&#xff0c;因为基数没定&#xff0c;参考没意义&#xff01;&#xff01; 2、内边距和外边距 3、在右下角添加一个“回顶部”的标签。 <div></div>中的…

06 事件处理函数绑定与事件对象

事件处理函数绑定 DOM事件处理 addEventListener or onclick function(){} 纯小写React元素也采用了类似DOM0标准中的事件属性定义的方法 小驼峰 JSX <button onClick{ this.doSth }></button>直接创建React元素 React.createElement(button,{onClick: { this.…

css -- 两种方法实现流式布局

Bootstrap将屏幕分为4个等级: 1.超小屏幕 (宽度小于768 px), 显示宽度 100%; 2.小屏幕 (宽度在768px ~ 992px), 显示宽度 750px; 3.中等屏幕 (宽度在992px ~ 1200px), 显示宽度 970px; 4.大屏幕 (宽度大于1200px), 显示宽度 1170px. js实现: window.addEventListener("r…

python文件名匹配

待匹配文件&#xff1a;#FY3D_IPMNT_GBAL_L1_20180516_0003_030KM_MS.HDF 干扰文件&#xff1a;#FY3D_IPMNT_GBAL_L1_20180516_0003_030KM_MS_uuu.HDF 1.正则表达式import reif re.findall(FY3D_IPMNT_GBAL_L1_\d_\d_030KM_MS.HDF,fileEvery): fileList.append(os.path.join(in…