使用React脚手架初始化项目

脚手架

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目。该项目：

• 包含了所有需要的配置（语法检查、jsx编译、devServer…）

• 下载好了所有相关的依赖

• 可以直接运行一个简单效果

react脚手架: create-react-app

• 项目的整体技术架构为:  react + webpack + es6 + eslint

• 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

一、全局安装 npm i -g create-react-app

二、切换到想创项目的目录cmd create-react-app 项目名

npm安装报错：可能是因为源为公司私库，查看npm源：`npm config get registry`

临时修改为淘宝镜像：
npm --registry <https://registry.npm.taobao.org>
yarn --registry <https://registry.npm.taobao.org> 
重新运行该命令

三、启动项目：在项目根目录(cd admin-react)执行命令： npm start

  若安装了yarn，就用 `yarn start`
  
  `yarn build`：把写完的项目打包（生成静态文件，交给后端部署）
  
  `yarn eject`：把隐藏的所有webpack相关的配置文件暴露出来，且无法撤销

yarn命令简介

• yarn 是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
• yarn具有快速，可靠和安全的特点
• 初始化新项目：yarn init
• 安装包： yarn add 包名称
• 安装项目依赖： yarn install

四、打开链接进行访问：http://localhost:3000/

五、连接到远程git仓库：

使用脚手架新建项目后，文件夹里已经有一个.git仓库映射文件，说明本地库已经关联了origin的远程库。

想关联到新建的github库，解决办法：

1、删除关联的origin的远程库git remote rm origin

2、连接到自己的新建的远程库git remote add origin GitHub仓库地址

3、查看远程库信息是否修改成功git remote -v

4、将本地分支强制重命名为main git branch -M main

5、在远程仓库创建main分支并提交：git push -u origin main（即使远程没有你要关联的分支main，它也会自动创建一个出来，以实现关联）

Git使用中报错fatal: The current branch master has no upstream branch.解决方案

fatal: remote origin already exists. (远程来源已经存在 解决办法)

ps：react中 区分组件和只有业务逻辑（函数）的js/ts文件 的两种方式：

1、组件.js的组件名首字母大写

2、把组件.js 写成 组件.jsx