react脚手架

最新推荐文章于 2024-08-13 14:25:42 发布

真的想不出名儿

最新推荐文章于 2024-08-13 14:25:42 发布

阅读量424

点赞数 5

分类专栏： react 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/ioncannontic/article/details/136311049

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了React的核心概念，包括其作为JS库的声明式编程特性、组件化设计，以及如何进行基础安装和使用React元素渲染到页面。同时，还讲解了React脚手架在现代Web应用开发中的重要性及使用方法。

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

1.react概述

1.1 什么是react

React是一个用于构建用户界面的JS库。
用户界面：HTML页面（前端）
React主要用来写HTML界面，或构建Web应用
如果从MVC的角度来看，React仅仅是视图层（V）,也就是只负责视图的渲染，而并非提供了完整的M和
C的功能。React起源于Facebook的内部项目，后又用来架设Instagram的网站，并于2013年5月开源。

1.2 react的特点

A. 声明式
B. 基于组件
C. 学习一次，随处使用

1.2.1 声明式

你只需要描述UI(HTML)看起来是什么样，就跟写HTML一样。
React负责渲染UI,并在数据变化时更新UI

const jsx=<div className="app">
<h1>Hello React!动态变化：{count}</h1>
</div>

1.2.2 基于组件

A. 组件是React最重要的内容
B. 组件表示页面中的部分内容
C. 组件、复用多个组件，可以实现完整的页面功能
1.2.3 学习一次，随处使用
A. 组件是React最重要的内容
B. 组件表示页面中的部分内容
C. 组件、复用多个组件，可以实现完整的页面功能

2.react的基本使用

2.1 react的安装

安装命令：npm i react react-dom
A. react 包是核心，提供创建元素、组件等功能
B. react-dom包提供DOM相关功能等

2.2 react的使用

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

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

2.创建react元素
3.渲染react元素到页面
a.React.createElement()说明（知道）
//返回值：react元素
//第一个参数：要创建的react元素
//第二个参数：该react元素的属性
//第三个以及以后的参数：该react元素的子节点
const title=React.createElement(‘p’,null,‘hello react’);
b.ReactDOM.render()说明
//第一个参数：要渲染的React元素
//第二个参数：DOM对象，用于指定渲染到页面中的位置
ReactDOM.render(title,document.getElementById(‘root’))

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="title1"></div>
    <div class="title2"></div>
  </body>
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <script>
    // ReactDOM.render
    const title1 = React.createElement("p", null, "hello world");
    ReactDOM.render(title1, document.querySelector(".title1"));

    const title2 = React.createElement("p", null, "apple");
    // react18 新渲染函数--ReactDOM.createRoot
    ReactDOM.createRoot(document.querySelector(".title2")).render(title2);
  </script>
</html>

3.react脚手架的使用

3.1 react脚手架的意义

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

3.2 使用React脚手架初始化项目

全局安装环境：npm i --registry https://registry.npmmirror.com -g create-react-app
A、切换到想创项目的目录，初始化项目：npx --registry https://registry.npmmirror.com create-react-app my-cli
B、进入项目文件夹：cd my-cli
C、启动项目，在项目根目录执行命令：npm start

3.2.1 React脚手架项目结构

public ---- 静态资源文件夹
		favicon.icon ------ 网站页签图标
		index.html -------- 主页面，只有这一个html文件
		logo192.png ------- logo图
		logo512.png ------- logo图
		manifest.json ----- 应用加壳的配置文件
		robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
		App.css -------- App组件的样式
		App.js --------- App组件
		App.test.js ---- 用于给App做测试
		index.css ------ 样式
		index.js ------- 入口文件
		logo.svg ------- logo图
		reportWebVitals.js
			--- 页面性能分析文件(需要web-vitals库的支持)
		setupTests.js
			---- 组件单元测试的文件(需要jest-dom库的支持)