</div>

这样，就会在页面中的这个div容器上添加这个h1.

JSX基础语法 两种创建虚拟DOM的方式 1.使用JSX创建虚拟DOM const VDOM = (

<span className = "sss" style = {{fontSize:'50px'}}>sss

) 这个在上面的案例中已经演示过了 ，下面看看另外一种创建虚拟DOM的方式

2.使用JS创建虚拟DOM // 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容) const VDOM = React.createElement('h1',{id:"title"},"nihao") 1 2 使用JS和JSX都可以创建虚拟DOM，但是可以看出JS创建虚拟DOM比较繁琐，尤其是标签如果很多的情况下，所以还是比较推荐使用JSX来创建。

jsx语法规则 定义虚拟DOM，不能使用“”

标签中混入JS表达式的时候使用{}

样式的类名指定不要使用class，使用className

内敛样式要使用双大括号包裹

不能有多个根标签，只能有一个跟标签

标签必须闭合

如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

模块与组件、模块化与组件化的理解 模块 理解：向外提供特定功能的js程序, 一般就是一个js文件 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。 作用：复用js, 简化js的编写, 提高js运行效率 组件 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 为什么要用组件： 一个界面的功能更复杂 作用：复用编码, 简化项目编码, 提高运行效率 模块化 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

函数式组件

类式组件

一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io 评论6条写评论 m0_65552846

热评 这不是尚硅谷的教学视频吗 React(总结)_魔术师ID的博客 1-23 全局安装npm i -g create-react-app 在通过脚手架的命令来创建 React 项目 现在:npx 调用最新的 create-react-app 直接创建 React 项目总结create-react-app是react官方提供一个脚手架工具,用于创建react项目 通过npx create-react-app... 什么是React?_专职八阿哥的博客 1-17 JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。 可以通过以下三个方面了解J... 十分详细的React入门实例 王浴昊 8万+ 学习React不是一蹴而就的事情，入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例，实例并不难，但对于初学者而言，足够认清React的思考和编写过程。认真完成这个实例的每一个细节会让你受益匪浅。接下来我们开始吧！代码下载预览首先说明一下，本例究竟做了什么。本文实现了一个单页面人员管理系统的前台应用。包括以下功能： 人员基本信息列表； 人员的录入及删除； 人员详细信息的 史上最全的React学习总结，保你一看就会。(一) m0_62201566的博客 1448 一.首先介绍一下React： 用于动态构建用户界面的JavaScript 库(只关注于视图)。 由Facebook开源。 二.React的特点： 声明式编码 组件化编码 React Native 编写原生应用 高效（优秀的Diffing算法） 三.React高效的原因： 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 DOM Diffing算法, 最小化页面重绘。 四.React的基本使用： 1.React中相关js库： ... React介绍_cbyr的博客_react介绍 1-7 React 还可以使用 Node 进行服务器渲染,或使用React Native开发原生移动应用。 代码展示: 创建方式一: 1. 先全局安装脚手架工具包 命令:npm i -g create-react-app 2. 用脚手架工具来创建项目 命令:create-react-app +脚手架的名... React简介_Han_Zhou_Z的博客_react简历 1-14 ReactDOM.render(reactSpan,reactDiv) ②render函数:渲染函数,将react的虚拟DOM元素渲染到页面 2、脚手架开发:搭建React项目,根据不同的需求开发组件 (1)create-react-app:属于FacdBook,快速的、不做任何配置的构建React开发环境 np... react 入门_React入门（2019版） culiu9261的博客 382 react 入门React is the uber popular JavaScript library that is almost everywhere you look these days. Learning React opens up a whole new way to build front-end experiences like websites, mobile apps, a... react快速开始(一)-入门基础 西京刀客 1814 react快速开始-入门基础 在前端框架框架方面，其中的佼佼者React和AngularJS均出名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。 React 简单介绍_夹心小饼干 的博客_react介绍 1-11 一、React的认识 1.用于构建用户界面的JavaScript库 2.由Facebook开源 3.原生js操作Dom繁琐,并且效率低,使用js直接操作Dom,浏览器会大量重排,没有组件化编码方案,代码复用率低。而react使用jsx和虚拟Dom 会相较于原生js的方式得到优化... React是什么,React的优点、缺点_小林搞前端的博客_react有什... 1-22 组件化:vue和react都建议将应用拆分成多个组件,每个组件负责不同的工作,组件之间通过特殊的方式相互关联。使应用的结构变得清晰,也有利于组件复用。 区别 Vue建议使用html模板进行编写,而React则使用了Javascript的扩展语法–JSX,,赋予了开发... React 入门学习 m0_62118859的博客 4238 目录 1. React 介绍 2. React 特点 （1）声明式 （2）组件化 （3）一次学习，跨平台编写 3. React 脚手架 方式 1 方式 2 4. React 基本使用 5. React 创建元素练习 1. React 介绍 了解 react 的历史背景和基本概念 React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套... 超简单react入门 qq_44769099的博客 2358 简介 react是Facebook公司出品的，用于创建用户界面的JavaScript库 特点 组件思维 单向数据流 虚拟dom节点 安装及使用 安装 npm i create-react-app -g 创建react文件 create-react-app 项目名称 运行文件 cd 到你的项目 npm start JSX语法 有且只有一个dom节点 {}里面写js ... react是什么?_Alisane的博客_react 1-21 React是一个简单的javascript UI库,用于构建高效、快速的用户界面。它是一个轻量级库,因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶... React 入门学习_前端路啊的博客_react入门 1-17 总结:React 是 Facebook 开源的,现在它是最流行的前端框架大厂必备,React 本身是一个构建 UI 的库,如果需要开发一个完整的 web 应用需要配合 react-router,redux,...等。 2. React 特点 ...

1514 前言 1、react与vue的对比 1.1、什么是模块化 是从代码的角度来进行分析的 把一些可复用的代码抽离为单独的模块；便于项目的维护和开发 1.2、什么是组件化 是从UI界面角度来进行分析的 把一些可复用的UI元素抽离为单独的组件 1.3、组件化的好处 随着项目规模的增大，手里的组件就越来越多； 很方便就能把现有的组件拼接为一个完整的页面 1.4、vue中是如何实现组件化的 通过.vue文件来创建对应的组件 template 结构 script 行为 style React入门看这篇就够了 xjanting的博客 378 react - JSX React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是React A JAVASCRIPT LIBRARY FOR BUILDI... React 入门教程（适合初学者） cnds123的专栏 2004 React 入门教程 React 官网 reactjs.org/docs/gettin… React 是一个用于构建用户界面（UI）的 JAVASCRIPT 库（框架，可以被复用的代码）。 React的使用，在引入了 在网页中添加 React方式有两种： 一、在 HTML 文件中添加 React，把 React 作为普通的 <scr... 一篇文章快速入门React框架 douyh的专栏 840 视频教程 本文章在B站配有视频教程 课程目标 了解最常用的React概念和相关术语，例如JSX，组件，属性（Props），状态（state）。 构建一个非常简单的React应用程序，以阐述上述概念。 最终效果 创建React应用 helloworld （1）安装node.js 官网链接 （2）打开cmd 窗口 输入 npm install --g create-react-app npm install --g yarn （-g 代表全局安装） 如果安装失败 React基础入门详解 初学者乐园的博客 777 React项目的创建 1、 运行 cnpm i react react-dom -S 安装包 2、 在项目中导入两个相关的包： // 1. 在 React 学习中，需要安装 两个包 react react-dom // 1.1 react 这个包，是专门用来创建React组件、组件生命周期等这些东西的； // 1.2 react-dom 里面主要封装了和 DOM 操作相关的包，比如，要把 组件渲... React教程（详细） 最新发布 qq_41974199的博客 212 React是一个用于构建用户界面的 JavaScript 库。1：创建一个 React 程序2：开始3：使用 class 和 function 创建组件3.1：function 组件3.2：class 组件4：生命周期5：state6：事件处理6.1：方式一：不绑定this6.2：方式二：绑定this，返回函数调用6.3：方式三：绑定this，使用bind绑定7：条件渲染8：列表9：受控组件值的实时修改 掌握react，这一篇就够了 weixin_34000916的博客 355 react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两