1.1 React介绍

1.1.1. 官网

  1. 英文官网:https://reactjs.org/
  2. 中文官网: https://react.docschina.org/

1.1.2. 介绍描述

  1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)
  2. 由Facebook开源

1.1.3. React的特点

  1. 声明式编码
  2. 组件化编码
  3. React Native 编写原生应用
  4. 高效（优秀的Diffing算法）

1.1.4. React高效的原因

  1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  2. DOM Diffing算法, 最小化页面重绘。

1.2  React的基本使用

1.2.1 相关js库

  1. react.js：React核心库。
  2. react-dom.js：提供操作DOM的react扩展库。
  3. babel.min.js：解析JSX语法代码转为JS代码的库。

引入时必须讲究顺序， react.js要在react-dom.js之前

1     <script type="text/javascript" src="../js/react.development.js"></script>

2     <!-- 引入react-dom，用于支持react操作DOM -->

3     <script type="text/javascript" src="../js/react-dom.development.js"></script>

4     <!-- 引入babel，用于将jsx转为js -->

5     <script type="text/javascript" src="../js/babel.min.js"></script>

或使用CDN引入

1     <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>

2     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

3     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

1.2.2 使用React

不使用脚手架直接html文件里引入

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>hello_react</title>

 6 </head>

 7 <body>

 8     <!-- 准备好一个“容器” -->

 9     <div id="test"></div>

10

11     <!-- 引入react核心库 -->

12     <script type="text/javascript" src="../js/react.development.js"></script>

13     <!-- 引入react-dom，用于支持react操作DOM -->

14     <script type="text/javascript" src="../js/react-dom.development.js"></script>

15     <!-- 引入babel，用于将jsx转为js -->

16     <script type="text/javascript" src="../js/babel.min.js"></script>

17

18     <script type="text/babel" > /* 此处一定要写babel */

19         //1.创建虚拟DOM

20         const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */

21         //2.渲染虚拟DOM到页面

22         ReactDOM.render(VDOM,document.getElementById('test'))

23     </script>

24 </body>

25 </html>

效果图如下，可以看到已经完成渲染

1.2.3 创建虚拟DOM的两种方式

1.纯JS式（不推荐）

React提供了一些API来创建一种 “特别” 的一般js对象 ，下面创建的就是一个简单的虚拟DOM对象

const VDOM = React.createElement('标签',{属性名1：属性值1,属性名2：属性值2},'内容')

但是大多数时候创建元素时都会遇到多层元素嵌套，比如下面的代码，一个h1标签里面装着一个span标签，就需要2次调React.createElement()方法，如果层数更多将非常不方便，而且对于查看内部的元素结构也非常不方便

const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))

2.JSX方式

创建同样的结构，明显JSX更加清晰简单

 1     <script type="text/babel" > /* 此处一定要写babel */

 2         //1.创建虚拟DOM

 3         const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */

 4             <h1 id="title">

 5                 <span>Hello,React</span>

 6             </h1>

 7         )

 8         //2.渲染虚拟DOM到页面

 9         ReactDOM.render(VDOM,document.getElementById('test'))

10     </script>

因为这里是JSX语法，不是普通的JS语法，所以书写的时候有一些差异，比如html结构不加引号直接可以写在里面作为虚拟DOM。

JSX语法规则

1.定义虚拟DOM时，不要写引号。

2.标签中混入JS表达式时要用{}。

3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
 
以下是JSX语法操作样式和属性的例子，对于back这个类，直接在ul中使用字符串对className属性进行赋值。列表渲染，需要形成一个数组，所以使用大括号包裹数组的方式，{ arr }，数组的具体内容是多个<li>。这里先是使用了JSX的行内样式来控制每个<li>的样式，这里的样式都是通过对象的形式来书写，多个单词组成的属性名要用小驼峰命名（第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母）。 在列表渲染中，必须要加入key这个属性作为元素的唯一标识，属性值一般是不相同的值比如id、手机号、身份证号、学号等唯一值。此处仅用于数据的展示，key就用index（diff算法相关内容）。
 1 <style>

 2         .back {

 3             background-color: red;

 4         }

 5     </style>

 6 </head>

 7 <body>

 8     <div id="root"></div>

 9 </body>

10 <script type="text/babel">

11     const data = ['Vue', 'React', 'Angular']

12     const VDom = (

13         <ul className="back" >

14             {data.map((item, index) => {

15                 return <li style={{ color: 'white', fontSize: "28px" }} key={index} >{item}</li>

16             })}

17         </ul>

18     )

19     ReactDOM.render(VDom, document.getElementById('root'))

20

21 </script>

22 </html>

React基本引入和JSX语法的更多相关文章

  1. Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办

    2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...

  2. react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  3. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  4. 【原创】React实例入门教程(1)基础API,JSX语法--hello world

    前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...

  5. React使用JSX语法

    目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法  <--返回目录 JSX语法:符合xml规范的js语法 JS ...

  6. 1.2 JSX 语法

    官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html JSX 语法听上去很讨厌,但当真正使用的时候会发现,JSX 的写法在组件的组合 ...

  7. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  8. react实战项目开发(2) react几个重要概念以及JSX语法

    前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...

  9. React高级教程（es6）——（1）JSX语法深入理解

    从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如: & ...

  10. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

随机推荐

  1. 联邦学习FATE框架安装搭建

    联邦学习 FATE (Federated AI Technology Enabler) 是微众银行AI部门发起的开源项目,为联邦学习生态系统提供了可靠的安全计算框架.FATE项目使用多方安全计算 (M ...

  2. PySimpleGU之运行多个窗口

    这是PySimpleGUI继续简单的地方,但是问题空间刚刚进入了"复杂"领域. 如果您希望在事件循环中运行多个窗口,则有两种方法可以执行此操作. 当第二个窗口可见时,第一个窗口不会 ...

  3. 事实胜于雄辩,苹果MacOs能不能玩儿机器/深度(ml/dl)学习(Python3.10/Tensorflow2)

    坊间有传MacOs系统不适合机器(ml)学习和深度(dl)学习,这是板上钉钉的刻板印象,就好像有人说女生不适合编程一样的离谱.现而今,无论是Pytorch框架的MPS模式,还是最新的Tensorflo ...

  4. Golang一日一库之 日志库 zap

    简介 在开发过程中 会使用到日志库去记录错误的日志,尤其是golang中 有无穷无尽的error 如果不记录,当你的代码出错,就无从排错了. zap 是开源的 Go 高性能日志库 主要有以下特点: 支 ...

  5. API 网关日志的价值，你了解多少？

    本文介绍了 API 网关日志的价值,并以知名网关 Apache APISIX 为例,展示如何集成 API 网关日志. 作者钱勇,API7.ai 技术工程师,Apache APISIX Committe ...

  6. ROS动态调试PID参数

    ROS动态调试PID参数 连接小车 注意:必须在同一区域网 ssh clbrobort@clbrobort 激活树莓派主板 roslaunch clbrobot bringup.launch 打开PI ...

  7. 浏览器发送POST请求、DELETE请求

    1.浏览器发送POST请求 方法一: var xml = new XMLHttpRequest(); var url = "http://127.0.0.1:8800/admin/user& ...

  8. Python变量的数据类型

    主要内容 jupyter notebook的用法 变量 跟vi/vim的编辑模式很像 # 声明的三种格式 # 格式1 s1 = "我爱王晓静" # 格式2 s2 = s1 = &q ...

  9. 【解决方法】域控制器升级报错-Verification of prerequisites for Domain Controller promotion failed.......

    目录-快速跳转 问题描述 原因分析: 解决方案: 附言: 问题描述 在 VM 内 windows 2019 中域控制器安装完成后进行第一次设置进行Prerequisites Check(先决条件检查) ...

  10. PaddlePaddle 飞桨复现 ResNeXt

    import paddle.nn as nn import paddle class BN_Conv2D(nn.Layer): """ BN_CONV_RELU &quo ...