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. 关于Java基础中的异常处理知识点

    Java中的异常(Exception),史上最全的教程来啦~_smilehappiness的博客-CSDN博客 以及Java:详解Java中的异常(Error与Exception)_王小二(海阔天空) ...

  2. Ubuntu系统Flameshot使用问题

    Ubuntu系统Flameshot使用问题 系统:Ubuntu22.04 问题:使用Flameshot,每次都会先截取整个屏幕,提示需要先分享,再使用Flameshot的功能 安装Flameshot ...

  3. 从桌面和应用内 Activity的启动流程

    1.APP还没有被打开过从桌面启动 <1>首先桌面进程会像AMS服务发送startActivity的请求,AMS从system_service中去拿----一次IPC通信 <2> ...

  4. XSS的攻击

    https://blog.csdn.net/m0_55854679/article/details/123028852

  5. 从 HTTP 到 gRPC：APISIX 中 etcd 操作的迁移之路

    罗泽轩,API7.ai 技术专家/技术工程师,Apache APISIX PMC 成员. 原文链接 Apache APISIX 现有基于 HTTP 的 etcd 操作的局限性 etcd 在 2.x 版 ...

  6. 操作系统实验 & bochs 环境配置

    wsl2 - Ubuntu 22.04 + VSCode + bochs + xfce4 + VcXsrv 笔者环境 wsl2 - Ubuntu 22.04 0. 安装WSL2 & VSCod ...

  7. 重新实现hashCode()方法

    在Java中,为了让对象在集合中能够更高效地进行查找和比较,我们通常需要重写对象的equals()和hashCode()方法.其中,equals()方法用于比较两个对象是否相等,而hashCode() ...

  8. pinia的使用

    1. pinia和vuex的区别 pinia没有mutations,只有:state. getters. actions pinia分模块不需要modules(之前vuex分模块需要modules) ...

  9. Rust中的函数指针

    什么是函数指针 通过函数指针允许我们使用函数作为另一个函数的参数.函数的类型是 fn (使用小写的 "f" )以免与 Fn 闭包 trait 相混淆.fn 被称为 函数指针(fun ...

  10. C# 实现窗体启动时隐藏

    在某些时候需要实现一个界面的后台程序,程序自动运行,但起初不显示窗体,在满足触发条件时显示,此时需要在运行程序时先自动隐藏窗体. 修改窗体对应的Program.cs: using System; us ...