react快速开始(二)-使用脚手架Create React App创建react应用

react快速开始(二)-Create React App入门

什么是Create React App

英文官网：https://create-react-app.dev/
中文：https://create-react-app.bootcss.com/

Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。

• 快速上手
  无论你是使用 React 还是其他库，Create React App 都能让你 专注于编码，不用操心构建工具。

如需创建名为 my-app 的项目，请运行如下命令：

npx create-react-app my-app

• 易于维护
  更新构建工具通常在开发中是一项艰巨 且耗时的任务，不过，当新版本的 Create React App 发布 后，只需运行如下命令即可升级：

npm install react-scripts@latest

另外， create-react-app 也有node限制,如下：

E:\code\frontProjects>npx create-react-app my-app
npx: installed 67 in 4.376s
You are running Node 12.16.1.
Create React App requires Node 14 or higher.
Please update your version of Node.

E:\code\frontProjects>

https://create-react-app.dev/docs/getting-started 网页也有描述：

快速开始

Getting Started
参考URL: https://create-react-app.bootcss.com/docs/getting-started

创建一个标准CRA工程

npx create-react-app my-app
cd my-app
npm start

如果您以前通过npm install -g create-react-app全局安装了创建 create-react-app，我们建议您使用npm uninstall -g create-react-app卸载包，以确保NPX始终使用最新版本。

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.

When you’re ready to deploy to production, create a minified bundle with npm run build.

使用IDE webstrom创建react项目

webstorm官方资料：https://www.jetbrains.com/help/webstorm/react.html

0）前提，安装好node的环境

1）打开webtorm开发工具，新建项目
2）选React App，（Native是移动端原生项目）
注意 勾选 Create TypeScript project

从 angular2 默认使用 typescript 开发，到如今 vue3 使用 typescript 重写也能看出 typescript 在前端界的地位将越来越重要。除非是非常小的项目，否则上 typescript 绝对是明智之举。

当然您不想用typescript的话，这里您可以不勾选这个即可！

创建后，生成结构如下：
不勾选typescript，生成目录结构如下：
如下，通过IDE 点击 start
然后，浏览器访问 http://127.0.0.1:3000/

create react app 完整参考

官方：https://create-react-app.dev/docs/adding-a-stylesheet

工作中遇到的问题

npx create-react-app my-app报错：We no longer support global installation of Create React App.

问题描述：
执行命令npx create-react-app my-app，报错：

You are running create-react-app 5.0.0, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

提示意思是：create-react-app 从第五版本开始不再需要全局安装，让我先卸载 create-react-app。
然后我就输入 npm uninstall -g create-react-app 进行全局卸载，然后再执行 npx create-react-app my-app 创建，结果还是上面的提示。

原因
产生这个问题的原因是 npx 是有缓存的，但全局卸载后，npx 的缓存还在。

解决方案：
先清除 npx 缓存然后在初始化

npx clear-npx-cache
npx create-react-app my-app