React note2（基础开发环境搭建&使用JSX编写&react常用语法逻辑）

港控/mmm° 2022-11-27 03:28 172阅读 0赞

# React 开发环境搭建 #

--------------------

### （一）依赖文件介绍 ###

react.js文件是创建React元素和组件的核心文件，react-dom.js文件用来把React组件渲染为DOM，此文件依赖于react.js文件，需在其后被引入。

Babel的主要用途是将ES6转成ES5 ，同时可以把`JSX` 语法转换新标准的JavaScript代码，让现今的浏览器兼容。babel对react很重要。

<table> 
 <tbody> 
  <tr> 
   <td> 使用React并非必须使用JSX，JSX只是一种直观的创建React nodes的方法，它是对React.createElement（）方法的抽象，通过Babel，JSX语句也可以直接在浏览器中运行了。<br><br> 使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，不过方便的一点是其语法风格类似于HTML语法风格。<br><br> 通过Babel，JSX会把转换为使用React.createElement()类的ES5的语句，以使得其能被现今的浏览器引擎识别。<br><br> 有了Babel，其实你可以把JSX当做写在JavaScript里的HTML代码。<br><br> <font>参考：React和Babel的基本使用 https://blog.csdn.net/zengxuzhu/article/details/90022345</font> </td> 
  </tr> 
 </tbody> 
</table>

### （二）React 依赖包下载 ###

*  react核心包： `npm install react --save`
 *  react-dom： `npm install react-dom --save`
 *  babel包： `npm install babel-standalone --save`

当然也可以直接一句话搞定：`cnpm install --save react react-dom babel-standalone`，注意react与react-dom依赖顺序不要变。

注意：下载好的文件在node\_modules目录。  
1、找到 react 目录，找到这个目录下的 umd 目录下 react.development.js 。  
2、在 react-dom／umd 目录下找到 react-dom.development.js 。  
3、node\_modules目录下找到 babel-standalone 目录下的 babel.js 。

然后新建html页面，引入三个包：  
![在这里插入图片描述][20200813100220756.png_pic_cnter]

### （三）React — 根DOM节点 ###

页面中需要有一个div容器，容器中的内容都会被React Dom所管理。这个容器叫就做根DOM节点。

注意：通常React 开发应用时**一般只会定义一个根节点**。  
![在这里插入图片描述][20200813154538286.png_pic_cener]  
下面这种看起来有些奇怪的标签语法既不是字符串也不是 HTML。

const element = <h1>Hello, world!</h1>;

那它是啥，其实是在JSX中使用的一种语法。

### （四）React — JSX ###

JSX = javascript xml ，就是Javascript 和 XML结合的一种格式，是JavaScript 的语法扩展。 React推荐在 React 中使用 JSX 来描述用户界面。

> JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。  
>   
> 百度百科：https://baike.baidu.com/item/JSX/1686693?fr=aladdin

总之记住一句话：**JSX中，遇到<>当html解析，遇到\{\}当js解析** 。

**jsx优点**：

*  JSX 执行更快，因为它在编译为JavaScript代码后进行了优化。
 *  它是类型安全的，在编译过程中就能发现错误。
 *  使用 JSX 编写模板更加简单快速。

# React 使用JSX #

--------------------

### （一）编写React渲染组件 ReactDOM.render() ###

`ReactDOM.render(element, container[, callback])`是 React 的最基本方法，用于将模板转为 HTML 语言，并插入页面指定的 根DOM 节点。

![在这里插入图片描述][20200813154639313.png_pic_center]  
我的第一个react小栗子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./node_modules/babel-standalone/babel.min.js"></script>
    </head>
    <body>
    	
        <div id="demoSky"></div>
        
        <script type="text/babel"> let name="我叫sky"; function fun(){ return "我是方法"; } // jsx中遇到 <>当html解析，遇到{}当js解析，所以可以解析变量和函数等 let myCon = <h1>hello { name} { fun()} world</h1> ReactDOM.render(myCon, document.querySelector("#demoSky")) </script>
    </body>
    </html>

**注意：Jsx中的HTML标签必须按照w3c规范来写 标签必须闭合。**

### （二）JSX中的注释 ###

在JSX语法区域中的html标签内使用花括号将注释包裹起来，如｛/\* 我是注释内容 \*/｝。为什么能这么写？原因：遇到花括号当js解析。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]

如果有多个 HTML 标签，需要使用一个父元素包裹，然后养成使用圆括号包裹的好习惯。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]

### （三）JSX中使用表达式（变量、函数、数组、逻辑运算） ###

可以任意地在 JSX 当中使用 JavaScript表达式， 当然 JSX 当中的表达式要包含在大括号里。

比如这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]

##### 1、变量、函数 #####

为什么能计算呢？因为 jsx 遇到花括号就解析成 js，所以js能做的事情，花括号\{\}里面的也能干。

![在这里插入图片描述][20200813150533747.png_pic_cener]

##### 2、逻辑判断 三元运算 #####

比如我们let bool=true；然后展示\{bool\}，发现只是写 \{bool\}无法展示，但我们可以通过\{bool?“真”:“假”\} 来看bool是true还是false。（注意：别跟vue中的混了，vue中直接\{ \{bool\}\}是能够看到值的）

![在这里插入图片描述][20200813150605392.png_pic_cener]

##### 3、渲染数组 #####

![在这里插入图片描述][20200813145207453.png_pic_cener]

### （四）JSX 独立文件使用 ###

React JSX 代码可以单独成一个文件，然后通过script标签引入到html页面中。

引入前，需要注意两件事情：  
第一，要提前在该页面中创建根节点容器；

第二，一定给引入时使用的`script`标签加上`type="text/babel"`属性。

js文件react\_index.js里的内容：  
![在这里插入图片描述][20200813111108872.png_pic_cente]  
能执行OK  
![在这里插入图片描述][20200813111027184.png_pic_ceter]

### （五）JSX绑定属性 ###

Jsx中也可以使用大括号来定义以 JavaScript 表达式为值的属性，如

切记使用了大括号包裹的 JavaScript 表达式时，就不要在外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。  
（跟vue中的区别很大，react中是 属性=\{变量\} ； vue中是 :属性=“变量” 千万不要用错了）

### （六）JSX定义修改样式 ###

定义样式对象， 以 style属性引用一个对象，样式名以驼峰命名法表示，如 text-align需写成 textAlign，默认像素单位是 px 。

这样子写样式是不是很麻烦？能不能引用外部样式？能。

引用外部样式时，不要使用class作为属性名， 因为class是js的保留关键字。JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 className（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

比如我们在上面代码中添加下面的内容，分别用class选择器和id选择器来修改样式。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]

### （七）JSX规则扩展 ###

1.  html的value属性要写成：defaultValue
2.  html的checked属性要写成：defaultChecked
3.  style 里面写对象
4.  class 写className

刚刚介绍了class为什么要写成className，这就是一种JSX的规则。然后我们再看看另外的比如defaultChecked。

比如说单选框里面默认选中是checked，在JSX咱们写成defaultChecked。

![在这里插入图片描述][20200813150758374.png_pic_center]

# 总结 #

--------------------

介绍了用react框架写代码的最基础的两个依赖包react.js、react-dom.js，然后是我们用JSX语法，所以需要babel来将JSX语法转换成浏览器能够识别的JS语法。

另外简单用JSX写了常见的功能展示。

我想说：  
对于ReactDOM.render(element, container\[, callback\])这个方法， 我发现，一个render对应一个container，如果后面重新render了一下，就会覆盖前面所展示的；另外，如果这个container里原本有内容，比如 " < div>原内容< /div> "，通过render渲染后，也会覆盖之前已经存在的内容。

这也是为什么，之前谈到 “通常React 开发应用时**一般只会定义一个根节点**。”

ReactDOM.render实际为React初次将虚拟vdom渲染至真实dom树的过程，其中包括了创建元素、添加属性、绑定事件等等操作。

[官网render：https://zh-hans.reactjs.org/docs/react-dom.html\#render][render_https_zh-hans.reactjs.org_docs_react-dom.html_render]

[20200813100220756.png_pic_cnter]: /images/20221124/1786761a819847d49adc369d3f79ee4e.png
[20200813154538286.png_pic_cener]: /images/20221124/5a9ae1b0558d4b8c813c102fd6c84ee2.png
[20200813154639313.png_pic_center]: /images/20221124/4deda3337bae4e1ca4771e7be24da0e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/207e2a89968347229bf0f5712f4fa1d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/23ff6f781e2e41a28c6b56d758ef376c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/7457cae431834ff28e155fa8062d619c.png
[20200813150533747.png_pic_cener]: /images/20221124/8a711e2ca3f0450c9032ff2dc2656daa.png
[20200813150605392.png_pic_cener]: /images/20221124/eecca3094f3f44adb5ef4722d92a6a80.png
[20200813145207453.png_pic_cener]: /images/20221124/23c88dc484794d5c96b76b6c76ea5a6e.png
[20200813111108872.png_pic_cente]: /images/20221124/fcbbbf1318f3424590effb056ba7edda.png
[20200813111027184.png_pic_ceter]: /images/20221124/7b6f0f38a12b40618db8e6ed7455797f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/71acb04de3b04a94896702cb1f361e65.png
[20200813150758374.png_pic_center]: /images/20221124/2fd284956aca42ef9812b28f1687a3e2.png
[render_https_zh-hans.reactjs.org_docs_react-dom.html_render]: https://zh-hans.reactjs.org/docs/react-dom.html#render