react零基础学习——使用JSX注意点

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」

在react零基础学习——JSX到底是什么？这篇文章中，相信大家对JSX已经有了一定的了解，之前我们说到jsx其实就是javaScript，那么问题了，有些同学在写jsx的时候，写法上和javaScript有些地方又有些不一样，比如：开发的这个组件，注释如何添加？。。。下面，我来列举一下jsx常用的技巧：

1. 在jsx语法中，如果我们要使用自己创建的组件，那么组件开头必须以大写字母开头。（记住，这是必须的）
2. react中的render函数返回的内容必须包含在一个大的容器当中，在我们不需要给这个容器设置样式、类名等属性，并且不希望这个容器在真实的html页面中展示，仅仅作为一个容器来说，react提供一个容器Fragment组件,用它作为render返回的最外层标签，但是这个容器不会真实的展示在dom树上，使用方式如下：

// 先引入
import React, { Fragment } from 'react';
// 然后使用即可
// 第一种写法
<Fragment>
  <div className='container'>
  </div>
</Fragment>
// 第二种写法
<>
 <div className='container'>
  </div>
</>

3.如何在jsx中写注释

（1）{/注释/}

（2）{

// 注释

}

4.样式类名用className（注意：不要写成class，再明确一下这跟html有区别的！）

5.label标签中有一个for属性，在jsx中要替换成htmlFor；有些同学可能不理解这个for的作用，下面给大家普及一下基础知识

<label for="insert">输入内容</label>
<input id="insert" />
// 上面的代码是label标签的作用，当点击label的时候，会自动获取input的焦点，也就是点击label，input会变成输入状态
// 但是在jsx语法中for默认是循环，所以要替换成htmlFor

6.要注意，只要我们的组件中用到来JSX语法，就必须引入React，即：

import React from 'react';

有的同学可能会疑惑，我没用使用react的API，为什么我要引入React呢，因为在jsx语法会被babel转成react的api，也就是React.createElement(),在下面这篇文章我们已经详细讲过了: react零基础学习——JSX到底是什么？