React项目起步

创建一个React项目

类似于Vue，这里需要使用一个脚手架工具creat-react-app来创建一个React项目。
creat-react-app的安装：
根据creat-react-app的官方文档提示：

npx create-react-app my-app        //也可以使用yarn安装，my-app为文件名
yarn create react-app my-app
//需要注意的是这样创建出来的React项目是不支持typescript的
cd my-app
npm start
//这样创建支持typescript
npx create-react-app my-app --template typescript

目录说明

简要说明下创建之后React项目内较为重要的文件：

• node_modules文件存储依赖
• public文件内存储静态文件
• src为源代码目录
• app.tsx为主组件
• index.tsx为入口文件
• react-app-env.d.ts为TS类型声明文件
• tsconfig.json为TS配置文件
• setupTests.ts为测试文件

相比于Vue，react项目本身包含内容较少，较为自由。

CSS Reset

create-react-app提供了一个CSS normalize作为初始化CSS样式。引入方式为@import CSS-normalize;
也可以自定义CSS Reset。

SCSS支持

文档有较为详细的描述。值得注意的是，文档中使用的node-sass在国内可能使用可能会有些小问题，国内推荐使用dart-sass来代替node-sass。

• node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；
  dart-sass 是用 drat VM 来编译 sass；
• node-sass是自动编译实时的，dart-sass需要保存后才会生效
  推荐 dart-sass 性能更好（也是 sass 官方使用的）

可以通过命令行yarn add --dev node-sass@npm:dart:sass替换，且不用修改其他配置。

React中的@import引入

参见文档，在React项目中引入CSS文件可以直接引用绝对路径而不是相对路径。
同理，JS文件也可以通过修改配置做到引用绝对路径。

创建helper.scss文件

在React项目中可以创建一个helper.scss文件，用于存储该项目中通用的变量，函数等。
之后直接在需要使用的时候引入@import'helper'即可。

styled-components

React项目准备使用styled-components这个库来写HTML，CSS部分，安装及使用详见官方文档。
基本样式：

import React from 'react';
import styled from 'styled-components';
// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`         
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

准备完成

按照上述步骤依次完成，就可以正式开始制作React项目了。