创建项目

image.png
进入到/life-memory-react文件夹中，使用如下命令创建一个react+ts的项目

  1. create-react-app . --template typescript

创建.env文件填写BROWSER=none，下次在启动项目的时候不会自动打开浏览器
image.png

  1. .js 
  2. .jsx -支持标签的js
  3. .ts -Typescript
  4. .jsx -支持标签的ts

目录说明

image.png
新版的react里面<React.StrictMode>没有什么特别的影响的功能，但是没有它包裹更组件也无所谓，它主要的用途是可以提示开发者在写代码的时候哪些地方错误或者api过时了，给予一些好的提示和建议，建议不要删除，挺不错的一个辅助功能。
image.png

作为一个Vue使用较多的开发者需要做一下对比：
目录相对更简洁：create-react-app 生成的几乎只有一个src和public
内置的功能更少：

  • 没有自带Router
  • 没有自带Redux
  • 没有自带SCSS

CSS normalize

  1. create-react-app 的文档有教
  2. 做法
  • 在index.css文件里面直接@import-normalize就可以了，作用是保持样式在不同的浏览器的默认样式相近。

SCSS支持

  1. create-react-app的文档里面有写
  2. 我的推荐方法
    1. 使用dart-sass 代替 node-sass （后者经常被墙）
    2. yarn add --dev node-sass@npm:dart-sass@1.25.0
    3. 上面的命令可以将node-sass替换成dart-sass
    4. 然后将所有的 .css 改成 .scss 即可
    image.png
    如果出现上面的提示，选No

    让CSS @import引用更方便

  • Vue项目中用@表示src/目录
  • React不一样，可以直接@import 'xxx/yy'来引入src/xxx/yy.scss
  • JS中也不需要@，因为可以的直接import 'xxx/yy.tsx',但是需要在tsconfig.json中添加一行"baseUrl":"src"

helper.scss

  1. 创建src/helper.scss
  • helper放置变量，函数等公用的东西
  • 比如写一句$red:#f00
  1. 使用 helper.scss
  • 在index.scss或者App.scss写@import "helper",即可引用它
  • 然后你就可以写color:$red

在此项目里面我的技术选型不使用这种方式的CSS，React的技术选型非常的广，这里我选择了CSS-in-JS的方案：styled-components，除了安装styled-components，还要安装@types/styled-components。
前者是JS源码，后者是TS类型声明文件。webstrom安装一下如下插件。
image.png就能愉快的开始编码了。
同时webstorm再设置一下，体验更好，试试就知道，嘻嘻。
image.png
删除测试用的代码，到如下
image.png
记得对应的import语句也删掉，还有一些没用的注释啥的，我们要的尽量的简洁。