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. ​KubeSphere离线无网络环境部署

    KubeSphere离线无网络环境部署 KubeSphere 是 GitHub 上的一个开源项目,是成千上万名社区用户的聚集地.很多用户都在使用 KubeSphere 运行工作负载.对于在 Linux ...

  2. [Linux]命令行分类

    0 操作系统 / 编译 / 进程 / 内存 / 硬盘 / 硬件 hostname / hostnamectl / uname hostnamectl set-hostname xxxx 重置hostn ...

  3. vulnhub靶场之CROSSROADS: 1

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Crossroads: 1,下载地址:https://download.vulnhub.com/crossroads/crossroads_vh ...

  4. C++11强制类型转换

    C++ 强制类型转换有四种关键字:static_cast.const_cast.reinterpret_cast和dynamic_cast.它们用于不同的情况和目的,比C语言的强制类型转换更清晰和安全 ...

  5. QUIC协议 对比 TCP/UDP 协议

    QUIC协议是HTTP3引入的,所以需要了解HTTP的版本迭代. HTTP1.x 队头阻塞:下个请求必须在前一个请求返回后才能发出,导致带宽无法被充分利用,后续请求被阻塞(HTTP 1.1 尝试使用流 ...

  6. OpenAI的离线音频转文本模型 Whisper 的.NET封装项目

    whisper介绍 Open AI在2022年9月21日开源了号称其英文语音辨识能力已达到人类水准的Whisper神经网络,且它亦支持其它98种语言的自动语音辨识. Whisper系统所提供的自动语音 ...

  7. java 实现逻辑分页

    //逻辑分页PageModel model = new PageModel();long total = list.size();model.setTotal(total);model.setPage ...

  8. Linux 根据名称自动kill掉当前相关进程

    ps aux | grep app | grep -v "grep" | awk '{print $2}' | xargs -r kill

  9. NC20279 [SCOI2010]序列操作

    题目链接 题目 题目描述 lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成 ...

  10. Pwn系列之Protostar靶场 Stack6题解

    源码如下: #include <stdlib.h> #include <unistd.h> #include <stdio.h> #include <stri ...