初始化一个react项目所需要做得一些事:以「纸记卡片 Paper MEMO」为例

以下内容算是对第一个 react 项目「纸记卡片 Paper MEMO」的一些技术总结,都是最基本的,部分内容可能另起文章记录,以备忘。

开始

首先安装 node.js,它是一个 exe 文件,直接从官网下载下来傻瓜安装即可。安装完成后打开 cmd 安装create-react-app

安装 VS Code 并安装两个插件:

  1. Prettier – Code formatter(用来格式化代码)
  2. Simple React Snippets (用来专门补全 react 的代码)

在想要新建项目的文件夹打开 cmd,新建 react 项目,比如说这个项目叫做 react-app:

一些常用的命令,这些命令需要在项目文件夹下打开 cmd 运行:

例如运行npm start 后浏览器会自动打开http://localhost:3000,可以预览。而运行npm run build可以生成用于生产环境的文件,这些文件会在build文件夹下,将这些文件上传到服务器或者虚拟主机均可。

以「纸记卡片 Paper MEMO」为例

「纸记卡片 Paper MEMO」项目中,除了开始的操作之外,还需要在环境中准备:(使用npm install批量安装依赖)

「纸记卡片 Paper MEMO」项目使用了 Material-UI 组件库(下方涉及到样式库均为 Material-UI),其中使用了其默认的Dashboard 模板进行改造。src下的目录结构如下所示:

import 导入

以下是一些头部导入的示例:

makeStyles 和基础结构

Material-UI 中使用自定义样式时,需要先导入makeStyles。一个 react 的基本结构(react hooks)也如下所示:

  1. 开始的时候使用import导入。
  2. function 函数可以放一些自己想做的事情。
  3. makeStyle 自定义样式(仅限 Material-UI)。
  4. export default function Upload() {}可以理解为主函数,必不可少。

switch

switch 比较常用,可以代替大量的if else,但是注意不要忘了default,用于默认返回一些东西:

按钮和判断

在下方的例子中:

  1. successedData为 false 时(注意需要使用全等===),按钮不可用。
  2. 当用户点击按钮时onClick,执行handleNext

下方是另一种判断的使用方式:

React 懒加载

打开的网页的一开始可能不需要加载所有的网站内容,这样可以节省加载时间,所以这里需要使用懒加载。

  1. 下方的import写在开头那堆 import 文件下方,凡是不能和正常的 import 文件混起来写。
  2. React.Suspense可以写一些在等待懒加载时所加载的一些提示语、进度条等。

setState

setState用的比较多,用来更新 ui 上显示的数据。

  1. 有个变量叫Successed,初始值为""
  2. displayUploadData等于undefined时,将Successed的值设为"❌文件不符合要求"
  1. 有个变量叫format,初始值为一个对象。
  2. handleChangeFormat函数中将 format 里面的 format 设置为一个别的值。
  3. 和上面的例子一样,setFormat会设置原有format对象里所有的值,但是要注意写法。

显示图片

redux 和 react-redux

假设文件目录如下:

首先在根目录新建一个文件夹和文件叫做store/reducer.js,该文件内的内容如下:

在组件文件Upload.js中导入:

如果更新的是对象,比如上文中的format就有5个对象元素,更新其中的font

react hooks

【待更新】

jsPDF

【待更新】

react-dropzone

【待更新】

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注