react的操作

一、创建项目

创建项目注意事项

注意：如果你电脑上安装过 create-react-app 脚手架 需要卸载

npm uninstall -g create-react-app

创建项目命令

npx create-react-app my-app

 

【my-app】:项目名称，不可以叫 react 也不许有驼峰命名

npm 里面有一个 npx

npx 是运行本地 node_modules 包里依赖的，如果没找到，就临时下载，使用完之后把下载的依赖删掉，用 npx 好处是保证了依赖版本的新鲜度【每次都是最新版本】

npm 先运行本地项目，如果没找到去本机全局里找

 

 

二、项目结构

 

node_modules 它是我们项目启动时所需要运行的依赖

 

public 它是我们 html 模板所在的公共文件夹，如果你在 public 里面放了一个静态资源【css 文件，js 文件,图片，字体】，那么当打包的时候，这些文件不会被编译。

 

.gitignore 它是一份告诉 git 提交的名单

 

package.json 我们 node_modules 包依赖的清单目录，也就是说我 npm 安装的所有的依赖名字都会写入到 package.json 里去；还有它是我们启动项目，打包项目这些命令所在文件

package.json 作用：依赖的清单，命令的运行

npm install // 当使用 npm 命令的时候，npm 就会读取 package.json，然后会把你依赖清单里的名字全部下载下来。

 

README.md 项目说明文档，不要删除，为什么？因为在 GitHub 里开启静态服务也没，如果没有这个文件，你开启是不会成功的，而且，GitHub 他也不会提示你缺这个文件，所以比较坑，一定不要删除

 

【最重要的：/src】

src 是我们开发的源码所在文件夹

 

.svg 矢量图：不会失真，但是色彩值对比 jpg 少，色彩不是很丰富

 

serviceWorker.js 做离线缓存的，【离线==断网】在断网的情况下，我们的页面还是可以正常打开和访问的，不会出现 404,但是 ajax 功能失效。

 

src 下默认的哪些可以删：除了 index.js 其他的都可以删

 

/src

/viwe [存放我们页面级的组件]

/components [viwe 组件里公用的一些弹窗之类的]

/api [把整个项目里所有的 ajax 请求写在这]

/tools [转化时间，分割数组，功能性纯 js 文件]

/assets [静态资源]

index.js [位置不可变]入口文件

 

 

三、初始组件--function

 

命名规则：

1.首写字母必须大写：App 官方规定：组件名字首写字母必须大写

2.为什么?

因为小写的表示原生 html 标签，<app />原生标签里没有这个 app 标签，所以报错。

英文\_456

 

 

 

四、项目命令

 

npm run start 启动本地项目开发环境

 

npm run build 打包 src 源码，变成原始的 js 和 html，还是需要使用服务端启动

// npm install -g serve

// serve -s build

 

npm run eject 释放我们项目【官方】配置文件，且该命令只能运行一次，不可恢复

// npm run eject 一般是用不到的，官网提供了自定义配置接口，如果想改变项目里的官方配置，需要释放配置

// npm run eject【坑】我们创建项目的时候，官方会给初始化一个 git 仓库，这时候使用的时候要先把代码提交到 git 里或者，把 git 仓库删掉

react 才会区分出来这个组件是原生标签还是自定义的