React-01React创建第一个项目（npm install -g create-react-app）以及对应脚手架相关文件

本文链接：https://blog.csdn.net/2301_76671906/article/details/146948434

1. React特点

JSX是javaScript语法的扩展，React开发不一定使用JSX。
单向响应的数据流，React实现单向数据流，减少重复代码，比传统数据绑定更简单。等等

JSX是js的语法扩展，允许在js中编写类似HTML的代码

const element = <h1>Hello, JSX!</h1>;

2. 使用Create React APP创建项目

2.1 确保是否安装node.js与npm(node包管理)

node -v

npm -v

2.2 全局安装React官方支持的脚手架工具

npm install -g create-react-app

2.3对应目录文件下创建React项目my-app

npx create-react-app my-app

npx是npm 5.2+版本自带的一个工具用于运行本地或者远程的npm包

创建项目成功如下

对应创建项目成功后的执行命令如下

npm run eject

所有webpack相关配置文件暴露出来后，无法回滚

定位到卓面

cd Desktop

2.4 react对应的文件目录结构

React 项目由多个文件和文件夹组成，核心文件包括 index.html、index.js 和 App.js。
React 组件是应用的基本构建块，可以是函数组件或类组件。
JSX 是 React 的核心语法，用于描述 UI。
Props 和 State 是 React 组件中管理数据的主要方式。

2.5.react中的html对应信息

html文件中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <!-- %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" />

  <!-- ios设备上添加启动画面 -->
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <!-- 应用加壳文件--添加对应的配置信息 -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <title>React App</title>
</head>

<body>
  <!-- 浏览器不支持js时显示的提示信息 -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

爬虫规范文件