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. Goalng：基础复习一遍过

    Go(又称Golang)是Google开发的一种静态强类型.编译型.并发型,并具有垃圾回收功能的编程语言. 剖析 Hello world 新建文件 main.go 写入以下内容: package ma ...

  2. 开发轻量级REST API样板 基于Node.js、MongoDB 通过Mongoose驱动

    ZY.Node.Mongodb https://gitee.com/Z568_568/node.mongodb.git https://github.com/ZHYI-source/ZY.Node.M ...

  3. kubernetes（k8s）常用deploy模板 并验证

    kubernetes常用deploy模板,并验证 编写deploy配置文件 root@hello:~# cat deploy.yaml  apiVersion: apps/v1 kind: Deplo ...

  4. python入门教程之十五获取对象属性的几种方法

    当我们拿到一个对象的引用时,如何知道这个对象是什么类型.有哪些方法呢? 使用type() 首先,我们来判断对象类型,使用type()函数: 基本类型都可以用type()判断: >>> ...

  5. Java设计模式 —— 原型模式

    7 原型模式 7.1 原型模式概述 Prototype Pattern:使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象. 原型模式的工作原理:将一个原型对象传给创建者,该创建者通 ...

  6. day90:luffy:基于vue+drf的路飞学城项目前端部署

    目录 1.域名备案 2.域名解析 3.设置安全组 4.部署架构图 5.一些准备工作 6.docker 7.把前端项目通过nginx容器来运行 后端部署传送门:基于vue+drf的路飞学城项目后端部署 ...

  7. socket 到底是个啥

    哈喽大家好,我是咸鱼 我相信大家在面试过程中或多或少都会被问到这样一个问题:你能解释一下什么是 socket 吗 我记得我当初的回答很是浅显:socket 也叫套接字,用来负责不同主机程序之间的网络通 ...

  8. 2023GDKOI游记

    2023GDKOI游记 DAY-5: 3.5 周五回家提前一天返校,连续打了两场比赛,第二场清华ACM就只打出了最后一题世界杯(签到题),然后就只会做第二题了,调了一下午没想到正解. DAY-4: 3 ...

  9. [C++核心编程] 2、引用

    文章目录 2 引用 2.1 引用的基本使用 2.2 引用注意事项 2.3 引用做函数参数 2.4 引用做函数返回值 2.5 引用的本质 2.6 常量引用 2 引用 2.1 引用的基本使用 **作用: ...

  10. 2022-07-25：xiu是用rust语言编写的流媒体服务器软件项目。k8s安装xiu，drone文件如何写？

    2022-07-25:xiu是用rust语言编写的流媒体服务器软件项目.k8s安装xiu,drone文件如何写? 答案2022-07-25: 云原生环境不可能完全一样,只能做参考. 我采用的是dron ...