小白必看：手把手教你入门react项目

for who?

没有项目经验的小白看过来，这篇文章教你如何入门前端项目，以react项目为例，整个过程会穿插：

1.前端环境搭建
2.打包工具
3.代码库管理
4.项目发布。
5.shell脚本。
5.npm发布包。
6.创建自己的脚手架

快速使用create-react-app脚手架创架项目

对于小白来说，最难的一步是如何下手写代码，所以我们快速搭建和启动一个react项目，先看看这个东西到底是什么，然后再此基础上开发和学习
一.首先是环境的准备阶段。你需要一个编辑器,比如：vscode(code.visualstudio.com/Download) ，接下来你需要安装node，可以参考这篇文章www.runoob.com/nodejs/node… node的安装和环境变量配置都有，但是记得版本>=14，因为后面我们要使用npx命令，版本>=14的node才集成了这个命令。简单介绍下npx是什么，它是npm包的执行者，举个例子帮助理解下：
当你想用create-react-app（一个npm包）搭建项目时一般需要两步：

// 第一步
npm i -g create-react-app

// 第二步
create-react-app my-react-app
复制代码

有了 npx 后，我们可以省略安装 create-react-app 这一步。 选择一个文件夹右键Git Bash Here

// 直接使用npx
npx create-react-app my-react-app

接下来正式开始搭建项目 npx create-react-app my-app

项目结构如下
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

然后进入到这个文件夹，cd my-app执行命令npm run start项目起来后，浏览器输入localhost:3000可以看到如下页面，很简单吧，这样一个web网站就搭建好了，接下来就是添加业务代码了，再补充一句localhost是本地服务器，3000是端口号，一台服务器可以有多个端口号，多个端口之间互相不影响，假设3000端口被占用了，比如npm run start提示something is already running on port 3000 那就需要改端口号了啊，咋改呢找到.env文件然后输入 PORT=8080，重新执行npm run start 就可以在localhost:8080看到页面啦，今天就到此为止，回家带娃了，改天在补充了，bye～