将yarn更新到最新版本

转载

mob64ca140caeb2 2024-09-11 07:17:39

文章标签 将yarn更新到最新版本 react.js react 前端前端框架 文章分类 Yarn 大数据

1.React概述

2.React的特点

1.声明式UI（JSX）：

2.基于组件：

3.学习一次，随时使用：

3.React安装

4.React使用

1.下载源文件使用React

1.引入 react 和 react-dom 两个 js 文件

2.创建 React 元素

3.渲染 React 元素到页面中

2.React.createElement() 说明

3.ReactDOM.render() 说明

5.React脚手架的使用

1.初始化项目

2.启动项目（要在项目根节点）

6.npx 命令

1.法一：推荐使用

2.法二：

3. 法三：

7.yarn命令

1.初始化新项目：

2.安装包：

3.启动项目

8.在脚手架中使用 React

1.使用步骤

2.react18.0新版本使用

3.目录说明及调整

目录说明

目录调整

总结

1.React概述

一个专注于构建用户界面（html）的 JavaScript 库。

写html页面（构建Web应用）

MVC：React只是V（视图层）只负责视图的渲染，并非提供完整的M、C的功能。

官网描述：

将yarn更新到最新版本_将yarn更新到最新版本

原生js修改的是真实的dom，而react修改的式虚拟的dom

将yarn更新到最新版本_前端框架_02

如果后期需要更改的话，react的方法就更好。

原生js会使用数组重新渲染页面，之前渲染的1，2，3就没有用了，会重新渲染最新的1，2，3，7
react虚拟dom会再生成一个虚拟dom，将两个虚拟dom进行比较，如果是一样的就不会再生成1，2，3（会把之前虚拟dom中的1，2，3保存下来）；把7添加进去即可

提高性能

将yarn更新到最新版本_前端框架_03

2.React的特点

1.声明式UI（JSX）：

写UI就和写普通的HTML一样，抛弃命令式的繁琐实现。

在React中，使用render函数来创建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是render中利用createElement创建结构的时候代码可读性较低，较复杂，此时就可以利用jsx语法在render中创建dom。（浏览器不认识JSX，需要使用工具编译）

渲染UI，在数据变化时更新UI

2.基于组件：

组件是指：同时包含了html，css，js，image元素的聚合体

将页面拆分成若干个组件，并且react一个组件中同时耦合了css，js，image

组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性。

组合、复用多个组件（表示页面中的部分内容），可实现完整的页面功能。

3.学习一次，随时使用：

既可以开发web应用也可以使用同样的语法开发原生应用（react-native），比如安卓和ios应用，甚至可以使用react开发VR应用，react更像是一个元框架为各种领域赋能。

可开发Web应用，开发移动端原生应用（react-native），开发VR（虚拟现实）应用（React 360）

4.虚拟DOM

以前操作dom的方式是通过document.getElementById( )的方式，此过程是先去读取html的dom结构，将结构转换为变量，再进行操作。

react定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相等高，和主流MVC框架有本质区别：并不和dom打交道。

3.React安装

-y：初始化包
react：提供创建元素、组件等功能
react-dom：提供DOM相关功能

npm init -y

npm i react react-dom

4.React使用

1.下载源文件使用React

1.通过JSX的形式（写虚拟DOM）

注意：R要大写，React就是在指定位置中加入html元素

1.1引入 react 和 react-dom 两个 js 文件

按顺序引入

react.js：React核心库
react-dom.js：提供操作DOM的react扩展库
babel.min,js：解析JSX语法代码转为JS代码的库

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

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

1.2创建 React 元素

//创建虚拟DOM
const VDOM = <h1>hello</h1>

1.3渲染 React 元素到页面中

//添加一个DOM容器到HTML
<div id="root"></div>
<script>
//通过JSX创建虚拟DOM
const VDOM = <h1>hello</h1>
//将虚拟DOM渲染到页面
ReactDOM.render(VDOM, document.getElementById('root'))
</script>

将yarn更新到最新版本_react.js_04

从上往下执行，执行到后面才发现是要用JSX；代码少还好，如果项目内容多的话，babel运行压力较大。

2.通过纯js的形式（写虚拟DOM）

<div id="root"></div>
<script type="text/javascript">
    const VDOM = React.createElement('h1', { id: 'title' }, 'Hello')
    ReactDOM.render(VDOM, document.getElementById('root'))
</script>

3.需求：在h1标签里嵌套span标签，span中的内容是React

不推荐纯js，比较麻烦，jsx最终创建出来，是以这个js的形式

<div id="root"></div>
<script type="text/javascript">
    const Span = React.createElement('span', {}, 'React')//创建一个虚拟DOM对象
    const VDOM = React.createElement('h1', { id: 'title' }, Span)
    ReactDOM.render(VDOM, document.getElementById('root'))
</script>

通过jsx方式比较方便

<div id="root"></div>
<script type="text/babel">
    const VDOM = (<h1><span>Hello</span></h1>)
    ReactDOM.render(VDOM, document.getElementById('root'))
</script>

将yarn更新到最新版本_前端框架_05

4.虚拟DOM和真实DOM

<div id="root"></div>
<script type="text/babel">
    const VDOM = <h1><span>Hello</span></h1>
    const TDOM = document.getElementById('root')
    console.log('虚拟DOM', VDOM)
    console.log('真实DOM', [TDOM])
//是以标签形式展示，添加中括号即可。将TDOM作为数组里面的元素放进去，在数组里面就会以对象的形式放进来
    ReactDOM.render(VDOM, document.getElementById('root'))
</script>

将yarn更新到最新版本_前端框架_06

虚拟DOM对象上的属性比较少，真实DOM属性比较多，因为虚拟DOM是React内部在使用，所以不需要像真实DOM一样，要那么多属性
虚拟DOM本质上是Object类型的对象，最后会被React转为真实的DOM

2.React.createElement() 说明

返回值：React元素
第一个参数：要创建的React元素名称
第二个参数：该React元素的属性
第三个及其以后的参数：该React元素的子节点

const el = React.createElement('h1', { title: '标题',id:'p'}, '我是第一个节点',
React.createElement('span',null,'我是第二个节点'))

3.ReactDOM.render() 说明

第一个参数：要渲染的React元素
第二个参数：DOM对象，用于指定渲染到页面中的位置

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

5.React脚手架的使用

工程化--webpack；帮助我们快速搭建一个基于react库的模板项目。

脚手架是开发现代Web应用的必备；
充分利用 Webpack、Babel、ESLint 等工具辅助项目开发；
零配置，无需手动配置繁琐的工具即可使用；
关注业务，而不是工具配置。

1.单页面应用(single-page application)

是一个应用程序，它可以加载单个 HTML 页面，以及运行应用程序所需的所有必要资源（例如 JavaScript 和 CSS）。与页面或后续页面的任何交互，都不再需要往返 server 加载资源，即页面不会重新加载。

1.初始化项目

npx create-react-app my-app

将yarn更新到最新版本_前端框架_07

2.启动项目（要在项目根节点）

npm start

6.npx 命令

npm v5.2.0 引入的一条命令(npx)，是一个工具，一个npm包执行器。

目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供的命令。
现在：无需安装脚手架包，就可以直接使用这个包提供的命令。

1.法一：推荐使用

npx create-react-app my-app

npx create-react-app 是固定命令,，create-react-app是React脚手架的名称
my-app表示项目名称，可以自定义，保持语义化
npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app

2.法二：

npm init react-app my-app

3. 法三：

yarn create react-app my-app

4.法四：

npm i -g create-react-app
create-react-app my-app

7.yarn命令

yarn 是 Facebook 发布的包管理器，可以看做是 npm 的替代品，功能与 npm 相同；yarn 具有快速、可靠和安全的特点。

1.初始化新项目：

yarn init

2.安装包：

yarn add 包名称

安装项目依赖项： yarn
其他命令，请参考yarn文档

3.启动项目

yarn start
or
npm start

8.在脚手架中使用 React

1.使用步骤

1.导入 react 和 react-dom 两个包。

import React from 'react'
import ReactDOM from 'react-dom'

2.调用 React.createElement() 方法创建 react 元素。

3.调用 ReactDOM.render() 方法渲染 react 元素到页面中。

// 框架的核心包
import React from 'react'
// 专门左渲染相关的包
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

2.react18.0新版本使用

不使用ReactDOM，使用createRoot。

//导入react
import React from 'react'
import { createRoot } from 'react-dom/client'

// 函数组件
function Hello(){
  return (
    <div>first</div>
  )
}
const container = document.getElementById('root')
const root = createRoot(container)
// 渲染组件
root.render(<Hello/>)

3.目录说明及调整

目录说明

src目录是我们写代码进行项目开发的目录
package.json中俩个核心库：react 、react-dom

目录调整

删除src目录下自带的所有文件，只保留app.js根组件和index.js
创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可

4.public文件解释

1.index.html的解释

<!-- %PUBLIC_URL% public文件夹路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 用于移动端的网页适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 用于配置浏览器页签的+地址栏的颜色（仅支持安卓手机浏览器） -->
<meta name="theme-color" content="#000000" />
<!-- 搜索引擎的关键字 -->
<meta
      name="description"
      content="Web site created using create-react-app"
/>
<!-- 用于网页添加到手机屏幕上所显示的图标 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- 应用加壳的配置文件 -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<!-- 若浏览器不支持js，则展示标签内的内容 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- 容器，页面展示标签，所有编写的组件都是放在这个标签中 -->
<div id="root"></div>

2.robots.txt文件的解释

爬虫文件：什么是可以去的，什么是不可以去的

6. src源代码文件解释

1.index.js

//用于记录页面上的性能
import reportWebVitals from './reportWebVitals'

const container = document.getElementById('root')
// 创建createRoot创建一个react根，根有一个render方法
const root = createRoot(container)
// render方法直接将react元素渲染到DOM中
root.render(
  // <React.StrictMode>检查App以及App下面所有的子组件,写的东西是否合理
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

总结

React是构建用户界面的JavaScript库
使用 react 时，推荐使用脚手架方式。
初始化项目命令：npx create-react-app my-app 。
启动项目命令：yarn start（或 npm start）。
React.createElement() 方法用于创建 react 元素（知道）。
ReactDOM.render() 方法负责渲染 react 元素到页面中。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Mysql max没有数据的时候不显示NULL记录

下一篇：电子电气架构 RT LINUX

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯