React基础邂逅

什么是React 啊？

其实react按官方来说就是一个JS库(一个用于构建用户界面的 JavaScript 库),用于构建web应用中的视图层,就是web应用中的前端用户界面

开发之前请配置一下一些小帮助插件

在vscode插件市场寻找这个plugin并且下载
vscode 编辑器配置、在JavaScript 文件中启用 Emmet 插件的支持。
打开左下角的setting进去看见右上角有个文件一个的json打开把一下内容粘贴进去(有利于后期学习jsx开发)

  {
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    },
  }

1.创建React项目

目标:掌握使用脚手架创建React项目的方式,分为两种

全局安装 react 官方提供的脚手架工具 create-react-app(CRA)

npm install crate-react-app -g
#安装完脚手架之后创建react项目,空格之后是项目名称
create-react-app react-basic(随便起)
#接下来一般会提示这个图片的内容,跟着操作跟Vue大同小异
cd 到你的project 并且 code .
再用npm start开启react项目完事

使用npm包进行安装

npm init react-app react-basic

打开后项目结构分析

# 项目结构分析
├── README.md                     # 项目的说明书
├── package.json                  # npm 包说明文件、记录项目信息
├── package-lock.json             # 跟踪被安装的每个软件包的确切版本
├── public                        # 本地开发服务器提供的静态资源目录
│   ├── favicon.ico               # 网站图标、显示在浏览器的标签栏中
│   ├── index.html                # 项目的 HTML 模板
│   ├── logo192.png               # react logo 图片 (示例代码中用于设置 IOS 移动端网站图标)             
│   ├── logo512.png               # react logo 图片
│   ├── manifest.json             # web 应用清单如名称, 作者, 图标和描述 (主要用于将 Web 应用程序安装到设备的主屏幕)
│   └── robots.txt                # 爬虫协议文件
└── src                           # 项目源码目录
    ├── App.css                   # 示例程序中的根组件样式文件
    ├── App.js                    # 示例程序中的根组件文件
    ├── App.test.js               # 示例程序中的根组件测试文件
    ├── index.css                 # 示例程序中的全局样式文件
    ├── index.js                  # 项目的入口文件
    ├── logo.svg                  # 示例程序中根组件中显示的网站图标文件
    ├── reportWebVitals.js        # 测试应用程序的性能
    └── setupTests.js             # 项目的测试文件

2.React 初体验

创建h1元素,把该元素渲染到根元素就是在public/index.html中的 root

//src/index.js
//react可以在浏览器中运行web应用也能在移动端运行原生应用,
//react在构建两种应用的时候会有一些通用方法和一些非通用方法,通用方法都放置在react这个包中,非通用的方法比如实现web应用的方法被放置在了react-dom包中,移动端应用的实现方法则被放置在了react-native-web这个文件中.
//react: 核心库,包含了构建web应用和构建移动端应用的通用方法
import React from "react";
//react-dom: 只是包含了构建web应用的方法
import ReactDom from "react-dom/client";
//React.createElement(type,props,children):React 提供的创建元素的方式

// type: 标签属性,字符串类型
// props: 元素属性,对象类型,如果无属性则使用null占位
// children: 子元素,可以是文本也可以是createElement方法返回的元素对象
// return: 元素对象

const title = React.createElement("h1",{title:"hello react",id:"title"},"Hello React");
//创建 React应用的根节点
const root = ReactDOM.createRoot(document.getElementById("root"))
//将h1标签渲染该根节点上,打开浏览器查看是否添加成功,如果显示了那么恭喜你,你已经掌握了react的创建元素

根据👆这个代码直接来练习一波

目标:创建一个div 的class为list的容器包裹着h2和ul>li

<div class="list">
  <h2>汽车</h2>
  <ul>
    <li>轿车</li>
    <li>跑车</li>
  </ul>
</div>

//第一步先导入包
import React from "react";
import ReactDOM from "react-dom/client"

//第二步使用creatElement创建对应元素
const title = React.createElement("h2",null,汽车)
const list = React.createElement("ul",null,React.createElement("li",null,"轿车🚗"),React.createElement("li",null,"跑车🏎"))
//当前标记的子元素 || 从第三个开始以后所有的参数都是当前标记的子元素
const container = React.createElement("div",{className:"list"},title,list)

//第三步找到根元素并且把container这个容器丢进去,最后通过返回的root进行渲染
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(container)

虽然以上可以实现功能,但是有个问题就是这么写代码不得累死,感觉就回到了Web API时代,所以接下来学习一个新的东西叫做JSX可以很好的解决这个问题。

3.JSX概述

JSX 愈发实在另一种在React中创建元素的方式,使用它创建元素更加简单,直接。
也可以理解为在JavaScript中书写XML格式代码
在react中使用jsx最后也会被转成React.createElement方法的形式,其实就是转换的关系
那么为什么要使用jsx,因为jsx对开发者友好啊
在使用JSX之后为什么在index.js中没有用到React对象,还必须引入它?
- 因为在JSX执行前会被转换成为React.createElement方法,如果不引入,就会在运行时候找不到报错
- 在React-17版本及以后可以不导入React这个对象,在不导入Reacr对象时，babel将jsx转换成为jsxRuntime.jsx方法且会自动导入jsxRuntime
- jsxRuntime.jsx 方法和 createElement 方法一样，都是用于创建元素的。

const list = (
	<div className="list">
  	<h2>汽车</h2>
    <ul>
    	<li>汽车</li>
      <li>跑车</li>
    </ul>
  </div>
)

4.JSX Attention！Sir

如果JSX中存在多个标记建议使用小括号进行包裹,要不然会显得凌乱,下面👇这两段代码进行对比🆚

const jsx = <div>
     <h2>React</h2>
</div>

const jsx = (
	<div>
  	<h2>React</h2>
  </div>
)

如果在使用JSX愈发创建元素的时候,元素最外层必须要有一个root标记(根标签🏷️)

//错误🙅展示
const jsx = (
	<strong>strong</strong>
  <strong>weak</strong>
)

//正确🙆展示
const jsx = (
	<div class="root">
  	<strong>strong</strong>
  	<strong>weak</strong>
  </div>
)

如果要不想使用root标签但又想满足规定则可以使用幽灵👻标记(React.Fragment/空标签)

//简写形式
const jsx = (
	<>
  	<strong>strong</strong>
  	<strong>weak</strong>
  </>
)
//完整形式
const jsx = (
	<React.Fragment>
  	<strong>strong</strong>
  	<strong>weak</strong>
  </React.Fragment>
)

在JSX中使用单标记必须是闭合状态

<input type="text"/>
<img src="" alt="" />
//或者
<div>
	<div> hello react!</div>
 	<img src="" alt=""></img>
</div>

在JSX中标记属性使用小驼峰式命名法

小驼峰式命名法是指如果一个标识符由多个单词组成，第一个个单词的首字母小写、其他单词的首字母大写。

<input maxLength="10" readOnly autoFocus />

在JSX中为元素添加属性时使用className替代 class ，使用htmlFor 替代 for
- 因为JSX本质上还是JS,而class，for时Javascript中的关键字不能直接使用

<input type="text" className="todos" />
<label htmlFor="demo"></label>

小总结：

使用create-react-app 项目名称或者 npm init react-app 项目名称进行项目的创建
使用React.createElement创建元素
1. 参数一:标签元素(字符串类型）
2. 参数二:元素属性(对象类型),没有则使用null占位
3. 参数三:可以是文本也可以是子元素
使用ReactDOM.createRoot的返回值去.出render(指定的标签)
之所以要导入React是因为在17及以前的版本使用jsx本质上还是转换为React.createElement,所以不引入就会导致运行的时候找不到React,相反:新版本不需要导入React,因为新版本在不导入React对象时,babel将jsx转换为jsxRuntime.jsx方法且自动导入jsxRuntime,jsxRuntime方法就跟createElement一样都是用来创建元素的
JSX实则上就是一种创建元素的方式,可以更直观的去看待代码,换句话说就是代码更加容易理解和维护，JSX是一种用于创建组件的XML语法实则上就是在js中书写XML格式代码,以声明式的方法来直观的定义用户界面的方式，这就是最大的价值

邂逅React 入门系列(一)

React基础邂逅

1.创建React项目

2.React 初体验

3.JSX概述

4.JSX Attention！Sir