文章目录

react快速开始(二)-Create React App入门
- 什么是Create React App
- 快速开始
- 使用IDE webstrom创建react项目
- create react app 完整参考
- 工作中遇到的问题
- - npx create-react-app my-app报错：We no longer support global installation of Create React App.

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

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

React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
react cookie_安全React快速应用程序jsonwebtoken cookie会话auth0和通行证教程
react cookie I've been a long-time learner of express, node, and react projects. I'm always hopping ...
官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
利用 Create React Native App 快速创建 React Native 应用
React Native App简介打开React Native官方文档你会发现,在Getting Started章节下新添加一个Quick Start Tab页.Quick Start是在v0.4 ...
react ui框架_Web开发 React 学习（二十）连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建测开技能--Web开发 React 学习(三)元素的渲染测开技能--Web开发 R ...
快速创建React Native App
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了. 快速创建React Native App 查看最新的React Native ...
React 快速上手 - 目录索引
React 快速上手 - 目录索引 1~10 完整版因为一开始在 SF 上写文,后来尝试掘金 ,所有会有跨站地址,不要惊慌? ~~~ 对了点赞是美德 : ) 目录 01 前言 02 开发环境搭建 ...
react 二维码生成并下载qrcode.react
目前几乎任何一个完整的项目都会包含二维码的生成,这时候我们就需要一个可以快速生成二维码的插件了,接下来我将介绍如何生成并下载该二维码在react开发中如果需要二维码,本人是倾向于使用qrcode.r ...

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