React初体验|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天

React的基本使用--基于React17

1. 安装

   npm i react react-dom

2. 引入js文件

   <script src="./node_modules/react/umd/react.development.js"></script>
     <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
   

3. 创建react元素

   //注：1.元素名称2.元素属性3.第三个及其以后的参数为元素子节点 // 元素属性属性说明

     const title=React.createElement('h1',null,'hello react')
     const title=React.createElement('p',{title:'我是标题'，id:'p1'},'hello react'，React.creactElement('span',null,'我是span节点'))
   

4. 渲染react元素

    ReactDOM.render(title,document.getElementById('root'))
   

   //参数 1.要渲染的react元素 2。DOM对象 用于指定渲染到页面中的位置即挂载

React 脚手架的使用

React18改变为

以创建my-app为例

1. 初始化项目

   命令：npx create-react-app my-app

2. 启动项目

   初始化项目后需执行：cd my-app进入到项目根目录

   在项目根目录执行命令：npm start

3. 导入react和react-dom两个包

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   

4. 注：react 18中改变写法

   import React from 'react'
   import ReactDOM from 'react-dom/client'
   const title=React.createElement('h1',null,'hell react')
   const root= ReactDOM.createRoot(document.getElementById('root'))
   root.render(title)
   

初识JSX

1. JSX可以生成React'元素'。与模板语言有某些相似之处，但具有JavaScript的全部功能。

const title=React.createElement('p',{title:'我是标题'，id:'p1'},'hello react'，React.creactElement('span',null,'我是span节点'))

理解：此种写法若有很多节点写起来会非常复杂，且代码可读性不好，而使用JSX可以将这些代码像原生 HTML 一样展现，方便阅读且编写起来页熟练很多。 0. 使用JSX创建react元素

```
const title=<h1>Hello JSX <span>这是一个span标签</span></h1>
```

2. 渲染react元素

   const root = ReactDOM.createRoot(document.getElementById('root'))
   root.render(title)

想法：感觉和vue中 v-html 功能有些相似 可以解析带有标签的内容。

3. 注：

• 没有子节点的React元素可以用 /> 结束

  const title=<h1 className='title'>Hello JSX <span /></h1>
  

• 推荐使用小括号包裹JSX 格式更清晰同时避免自动添加分号陷阱

  const title=(
      <h1 className='title'>
      Hello JSX
      <span >这是一个span标签</span>
      </h1>
  )
  

资料来源：哔哩哔哩React教程