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----＞集合(上)

    一.集合的框架 1.集合.数组都是对多个数据进行存储操作的结构,简称Java容器.  *   说明:此时的存储,主要是指能存层面的存储,不涉及到持久化的存储(.txt,.jpg,.avi,数据库中) ...

  2. JavaScript的引入方式

    外部JS文件 deno.js alert('你好!JavaScript'); JS引入方式.html <!--方式一:内部脚本--> <!--标签不能自闭和--> <sc ...

  3. stm32报错

    1. declaration may not appear after executable statement in block 关于编译错误的小伙伴:error: #268: declaratio ...

  4. Django笔记二十四之数据库函数之比较和转换函数

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十四之数据库函数之比较和转换函数 这一篇笔记开始介绍几种数据库函数,以下是几种函数及其作用 Cast 转换类型 Coalesce 优先取 ...

  5. ROS用hector创建地图

    ROS用hector创建地图 连接小车 ssh clbrobot@clbrobot 激活树莓派 roslaunch clbrobot bringup.launch 打开hector_slam 重新开终 ...

  6. 《HelloGitHub》第 85 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  7. 推荐一个基于.Net Framework开发的Windows右键菜单管理工具

    平常在我们电脑,我们都会安装非常多的软件,很多软件默认都会向系统注册右键菜单功能,这样方便我们快捷打开.比如图片文件,通过右键的方式,快捷选择PS软件打开. 如果我们电脑安装非常多的软件,就会导致我们 ...

  8. 2023-05-09：石子游戏中，爱丽丝和鲍勃轮流进行自己的回合，爱丽丝先开始 。 有 n 块石子排成一排。 每个玩家的回合中，可以从行中 移除 最左边的石头或最右边的石头， 并获得与该行中剩余石头值

    2023-05-09:石子游戏中,爱丽丝和鲍勃轮流进行自己的回合,爱丽丝先开始 . 有 n 块石子排成一排. 每个玩家的回合中,可以从行中 移除 最左边的石头或最右边的石头, 并获得与该行中剩余石头值 ...

  9. 2022-12-23：portainer是docker的web可视化工具。如果根据docker部署去写yaml，默认local是k8s，而不是docker，这不符合需求，需要修改yaml。请问部署在

    2022-12-23:portainer是docker的web可视化工具.如果根据docker部署去写yaml,默认local是k8s,而不是docker,这不符合需求,需要修改yaml.请问部署在 ...

  10. 2022-11-02：以下go语言代码输出什么？A：编译错误；B：apple；C：ant；D：panic。 package main import “fmt“ func main() {

    2022-11-02:以下go语言代码输出什么?A:编译错误:B:apple:C:ant:D:panic. package main import "fmt" func main( ...