搭建React开发环境

1. 官方脚手架create-react-app安装

        1. 全局安装

npm i -g create-react-app

        2. 创建项目

npm i -g create-react-app

        如果不想全局安装，可以直接使用npx

npx create-react-app myapp # 也可以实现相同的效果

        注：这个过程会安装四个东西

                cra-template：为create-react-app提供默认模板

                react: react的顶级库

                react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上 运行就使用react-dom

                react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下图所示证明安装成功：

         3. 进入到项目目录

cd myapp

        4. 启动项目

npm start

2. 生成的项目目录结构介绍

        ├── README.md 使用方法的文档

        ├── node_modules 所有的依赖安装的目录

        ├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。

        ├── package.json

        ├── public 静态公共目录

        └── src 开发用的源代码目录

3. 安装失败的解决办法

        切换为npm镜像为淘宝镜像

        使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内

        如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行 npm i 命令

        再不能解决就删除node_modules及package-lock.json的同时清除npm缓存 npm cache clean -- force 之后再执行 npm i 命令

4. 入口文件index.js介绍

// 从react包中引入React,要使用react就必须进入React包，只有引入了这个包我们写的JSX语法
(React特有语法)才会被识别
import React from 'react';
// 将我们自己写的React组件渲染到页面上。只有引入了这个包才可以将react中的虚拟DOM转成真实DOM树
import ReactDOM from 'react-dom/client';
// pwa渐进式开发的相关的包。和react本身没有什么关系。可以不引入
import reportWebVitals from './reportWebVitals';

// 指定了将我们的react组件渲染到哪里
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        {/* 这种直接在js文件中写html标签的语法叫做JSX语法。是react特有语法 */}
        <h1>欢迎学习React！！！</h1>
    </React.StrictMode>
);
// pwa相关的
reportWebVitals();

注意：代表的是使用严格模式渲染组件。在严格模式下可以帮助我们：

        识别不安全的生命周期

        关于使用过时字符串 ref API 的警告

        检测意外的副作用

        检测过时的 context API