（三）React脚手架

Posted 2023-05-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（三）React脚手架相关的知识，希望对你有一定的参考价值。

参考技术A

React脚手架的概念：

React脚手架的优点：

● 无需配置；

● 集成了对 React, JSX, ES6 和 Flow 的支持；

● 集成了开发服务器；

● 源码非常清晰，没有多余的文件。

使用步骤：

1.安装 5.x 版本的 React脚手架

2.基于5.x版本的脚手架创建React项目

3.基于5.x版本的脚手架启动React项目

初始化一个基本的项目

1.初始化index.js

2.初始化index.html

3.初始化根组件App.jsx

4.初始化子组件Hello.jsx

最终效果

4.1 样式的模块化

4.2 vscode中的React插件

需要理解的概念有：

React-脚手架

系列文章目录

react，react-基本使用，react-脚手架，
jsx的使用，条件渲染

提示：以下是本篇文章正文内容，下面案例可供参考

一、React是什么？

1. React 是一个用于构建用户界面的 JavaScript 库。你可以在首页或教程中学习什么是 React。 2..React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来

二、React-特点

声明式

你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI

基于组件

组件时React最重要的内容，组件表示页面中的部分内容

学习一次，随处使用

使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用

三.React-基本使用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

		// const VDOM2 = <h1>hello world</h1>
		// ReactDOM.render(VDOM2,document.getElementById('test'))  这里将hello，react替换覆盖
	</script>
</body>
</html>

四. React-脚手架

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

使用react脚手架初始化项目

命令： npx create-react-app my-app
npx 目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令
create-react-app 这个是脚手架名称不能随意更改
my-pro 自己定义的项目名称

·`初次安装报错：`

.
.
.

Aborting installation.
  yarnpkg add --exact react react-dom react-scripts@0.9.x --cwd C:\\Users\\sam\\my-app has failed.

Deleting generated file... package.json
Done.

·报错之后又将你创建的文件给删除了 ,可能是：因之前设置了npm的注册URL为淘宝的，所以有这个错误。现还原为 https://registry.npmjs.org/，问题解决。命令：npm config set registry https://registry.npmjs.org/·

知识补充:Npm的升降级

降级
举例：降级到5
npm install npm@5 -g（@后跟版本号，若跟的是大版本，则更新到对应大版本最新的小版本）
npm install npm@5.1.6 -g（更新到指定版本）

升级
npm install npm -g（更新到最新版本）

脚手架中使用React

导入react和react-dom两个包

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

创建元素

let h1 = React.createElement('h1',null,'我是标题')

渲染到页面

reactDOM.render(h1,document.getElementById('root')

在这里插入图片描述

五. JSX 的使用

JSX产生-原因

由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽

JSX-概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

使用步骤

使用JSX语法创建react元素

let h1 = <h1>我是通过JSX创建的元素</h1>

使用ReactDOM来渲染元素

reactDOM.render(h1,document.getElementById('root'))

为什么在脚手架中可以使用JSX语法

JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
需要使用babel编译处理后，才能在浏览器环境中使用
create-react-app脚手架中已经默认有该配置，无需手动配置
编译JSX语法的包： @bable/preset-react

六.React-条件渲染

根据不同的条件来渲染不同的JSX结构

let isLoading = true
let loading = ()=>{
    if(isLoading){
        return <div>Loading...</div>
    }
    return <div>加载完成</div>
}

七-React组件

React组件介绍

组件是React的一等公民，使用React就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合

react-类组件介绍：

使用ES6语法的class创建的组件
约定1：类名称也必须要大写字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
约定3：类组件必须提供 render 方法
约定4：render方法中必须要有return返回值

src目录下创建component >hello>hello.js hello.css
hello.js

import React,{Component} from 'react'
import './hello.css'

export default class Hello extends Component{
  render() {
    return <h2 className = "title">hello,react</h2>
  }
}

app.js中引入hello

// 创建外壳组件
// 引入react
import React,{Component} from 'react'
import Hello from './component/hello/hello'
import Welcome from './component/welcome/welcome'
class App extends Component{
  render() {
    return (
      <div>
         <Hello/>
         <Welcome/>
      </div>
    )
  }
}
// 暴露
export default App

src根目录下index.js中将app.ja中内容渲染到 public文件下的以id为root的标签中

// 导入react和react-dom两个包
import React from 'react'
// 创建元素
import ReactDOM from 'react-dom'
// 
import App from './app'
// 渲染到页面
// let h1 = React.createElement('h1',null,'我是标题')
ReactDOM.render(<App/>,document.getElementById('root'))

以上是关于（三）React脚手架的主要内容，如果未能解决你的问题，请参考以下文章

React-脚手架

前端学习之React01:概述, 基本使用,脚手架

react学习

React环境搭建

用creat-react-app脚手架创建的react工程怎么引入scss

（三）React脚手架

React-脚手架

系列文章目录

文章目录

一、React是什么？

二、React-特点

三.React-基本使用

四. React-脚手架

使用react脚手架初始化项目

·初次安装报错：

知识补充:Npm的升降级

脚手架中使用React

五. JSX 的使用

JSX产生-原因

JSX-概述

使用步骤

为什么在脚手架中可以使用JSX语法

六.React-条件渲染

七-React组件

React组件介绍

react-类组件介绍：

·`初次安装报错：`