开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第33天，点击查看活动详情

写在前面

本篇是react学习的第一篇，介绍如何用create-react-app快速创建一个React项目

必不可少的学习资料：React中文文档（react的基础知识，可看可不看，看一先创建项目了解一下，再回来深入看）、create-react-app中文文档（说好的中文文档就没几个中文）、create-react-app英文文档

快速开始

我们直接用create-react-app创建一个React项目，创建出来的项目是单页React应用程序，create-react-app类似vue-cli，用过vue的同学应该很好理解

创建项目

我们要创建一个react项目，先在要创建项目的目录下打开cmd，输入以下命令语句：npx create-react-app my-app，然后回车，再回车确定继续，这样我们的第一个react项目就创建好了，将刚刚创建的项目放到我们代码编辑器中，在终端输入命令：npm start即可运行项目，运行成功后浏览器打开网址http://localhost:3000 即可查看刚刚创建的项目，默认运行在3000端口，3000端口如果被占用就会询问，确定后自动使用3001端口

官方文档的建议：如果之前已经通过npm install-g create react app全局安装了create reace app，使用npm uninstall-g create react app或yarn global remove create reach app卸载该包，以确保npx始终使用最新版本。

在创建项目的时候也可以选择模板，但因为我们是初次使用，就先使用基础模板了解一下React项目，当然也先不用TypeScript，如果要用TypeScript，可以在创建的时候就是用TypeScript模板，也可以在项目创建好后使用。

最终项目结构如下：

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

其中public/index.html和src/index.js最为重要，不能删除和重命名，我们以后开发创建的文件一般都在src目录下，根目录下可以存放一些文档，不会被打包进生产版本中

写在最后

以上就是用create-react-app快速创建一个React项目所有的代码和说明