React基本使用

齐烟九点~天绮爵

已于 2022-02-23 10:47:44 修改

阅读量670

点赞数

分类专栏： React基本使用文章标签： react 前端 react.js

于 2022-01-17 14:28:42 首次发布

本文链接：https://blog.csdn.net/qq_40665659/article/details/122539212

版权

本文介绍了React的基本使用，包括React入门、JSX的认识和使用。JSX是JavaScript和XML的结合，用于构建React元素，强调模块化和组件化开发，以提高开发效率。文中提到了JSX的特性，如标签无需引号、内嵌JS语法、分号陷阱、表达式的使用以及组件必须有唯一的根节点。此外，还讨论了在React组件中添加属性的方法和JS表达式与语句的区别。

摘要由CSDN通过智能技术生成

#React基本使用
一、React入门
1、React基本认识：
首先简单介绍JSX，它是对JavaScript扩展，JS和XML的结合,既不是字符串也不是标签。JSX生成React标签elements，常用来构建项目页面，它拥有JavaScript所有功能。为什么JSX把样式，事件，数据的展示放在一起呢？从项目的角度出发，我们常常为了把项目的复杂度的降低、易扩展、易维护、易阅读，把大的项目拆分为几个功能模块，功能模块再分为小模块。利用了功能，样式分离的观点，降低了耦合。JSX基本上也从这个角度去考虑，结合模块化开发+组件式开发，因为很多组件是经常用到的,比如导航栏、搜索框、登陆、轮播图，图标字体等。这样极大提高开发效率，比如antd 等组件库。组件：就是把事件，样式，数据等组合在一起。

知识点1：在JSX中的标签既不是字符串也不是HTML标签，不需要加引号’ '。

<script type="text/javascript" src="../js/react.development.js"></script> // react核心库
<script type="text/javascript" src="../js/react-dom.development.js"></script> // 操作DOM对象
<script type="text/javascript" src="../js/babel.min.js"></script>// 转换代码变成浏览器认识的代码js
const name='hello world';
const element=<h1>{
   name}</h1>; // 虚拟DOM
// 渲染
ReactDOM.render(
element,// 组件 或者虚拟DOM
document.getElementById('root'),// 容器 
)
//创建虚拟DOM两种方式 <h1 id="myId">hello world</h1> 简单示例一
// 多层嵌套<div><h1><span id ='myId'>123</span></h1></div>
// 第一种原始js方式 一般不用 太繁琐
const VDOM = React.creatElement('第一个参数是标签h1','第二个参数是属性名{id:"myId"}','第三个参数是内容hello world')
const VDOMS = React.creatElement('h1',{
   },React.creatElement('div',