Skip to content

Latest commit

 

History

History
196 lines (160 loc) · 6.88 KB

getting-started.md

File metadata and controls

196 lines (160 loc) · 6.88 KB
Raw

入门指南

安装

推荐使用 yarn 去管理依赖

如果你还没有安装 yarn, 请参考 yarn 安装指南 或者直接使用以下命令安装：

npm install -g yarn

通过 git 下载脚手架代码：

git clone https://github.com/kaysonwu/react-app.git

安装依赖包

yarn intall

部署

通过脚本命令编译源代码，如果需要使用服务端渲染，则需要启动服务器，具体命令如下：

// 编译代码
yarn build

// 启动服务器
yarn start

开发

我们推荐你使用 Visual Studio Code 作为代码编辑器，然后你还需要为编辑器安装以下插件：

现在，你的编辑器已经准备就绪了。不过，由于本脚手架是基于 Typescript 和 React 构建而成的，这意味着你必须熟悉以下技术栈：

🥳 好了，一切就绪，开始我们的开发之旅吧～

  1. 启动开发服务器

    yarn dev

  2. 在 src/pages 目录里新建一个 home 文件夹

    mkdir ./src/pages/home

  3. 然后，在 home 文件夹里创建一个 index.tsx 文件，并写上一些代码

     vi ./src/pages/home/index.tsx

 import React, { FC } from 'react';
 import { FormattedMessage } from 'react-intl';

 const Home: FC = () => (
   <>
     <FormattedMessage id="Hello React and Typescript!" />
   </>
 );

 export default Home;

  4. 最后，在 src/components/application/router.tsx 文件中，为 home 页面配置路由

    vi src/components/application/router.tsx

import React, { FC } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Page from '../loadable/page';

const Router: FC = () => {
  return (
    <Switch>
      ...
      <Route exact path="/home">
        <Page path="home" />
      </Route>
      ...
    </Switch>
  );
};

export default Router;

目录结构

├── docs                                // 文档目录
│
├── mocks                               // 模拟数据目录
│
├── public                              // 客户端构建目录
│   ├── images/
│   ├── .gitignore
│   └── update-browser.html             // 浏览器升级提示页面
│
├── server                              // 服务端构建目录
│
├── src                                 // 源代码目录
│   ├── components                      //  组件目录
│   │   ├── application                 //    应用
│   │   │   ├── context.tsx             //      上下文
│   │   │   ├── index.tsx               //
│   │   │   └── route.tsx               //      路由
│   │   │
│   │   ├── loadable                    //    代码拆分
│   │   │   ├── locale.tsx              //      国际化
│   │   │   └── page.tsx                //      页面
│   │   │
│   │   └── locale-provider             //    国际化
│   │       └── index.tsx
│   │
│   ├── locales                         //  国际化语言存放目录
│   │   └── zh-CN                       //    简体中文
│   │       ├── home.ts                 //      home 页面翻译
│   │       └── index.ts                //      公用翻译
│   │
│   ├── pages                           //  页面目录
│   │   ├── exception                   //    异常页面
│   │   │   ├── 403.tsx
│   │   │   ├── 404.tsx
│   │   │   └── 500.tsx
│   │   └── home                        //    Home 示例页面
│   │       └── index.tsx
│   │
│   ├── rules                           //  `antd` From 组件自定义验证规则
│   │
│   ├── services                        //  API 服务
│   │
│   ├── typings                         //  Typescript 全局声明文件
│   │   ├── api.d.ts                    //    API
│   │   ├── images.d.ts                 //    资源文件
│   │   ├── locale.d.ts                 //    国际化
│   │   └── store.d.ts                  //    数据
│   │
│   ├── utils                           //  应用工具箱
│   │   ├── loadable.ts                 //    代码拆分
│   │   ├── locale.ts                   //    国际化
│   │   ├── route.ts                    //    路由
│   │   ├── store.ts                    //    数据
│   │   └── string.ts                   //    字符串辅助函数
│   │
│   ├── indedx.html                     //  HTML 模板
│   ├── index.tsx                       //  入口文件
│   └── server.tsx                      //  服务器文件
│
├── tests                               // 测试目录
├── .editorconfig                       // EditorConfig 配置文件
├── .eslintrc                           // ESLint 配置文件
├── .gitignore                          // Git 忽略文件
├── .prettierignore                     // Prettier 忽略文件
├── .prettierrc                         // Prettier 配置文件
├── .proxy.ts.example                   // webpack-dev-server 代理配置示例文件
├── .stylelintrc                        // Stylelint 配置文件
├── babel.config.js                     // Babel 配置文件
├── LICENSE                             // 开源协议
├── package.json
├── README.md                           // 自述文档
├── tsconfig.json                       // Typescript 配置
└── yarn.lock                           // yarn 依赖包缓存


<< 文档      Hooks 数据流 >>