react 搭建项目前言现在前端真的很卷，要会各种框架。 React 以往我们实现一个页面，主要通过 html +CS

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第35天，点击查看活动详情

前言

现在前端真的很卷，要会各种框架。

React

以往我们实现一个页面，主要通过 html +CSS +Javascript 。而 React 是使用JavaScript构建页面。可以看下 Demo 中提供的例子：

hello.ts ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );

例子中可以看到，这是一个typescript 文件，里面应该使用 typeScript语法（如果是一个js 文件里面是javascript语法），但也看到了 html 标签节点。所以可以理解 React 是包含 html 标签和 JS语法的，其实它被称为 JSX，是一个 JavaScript 的语法扩展。这是 React 所有的。所以，React 就是用于构建用户界面的 JavaScript 库。

创建项目

这里主要适用 umi 的UI来搭建项目：

$ mkdir myapp && cd myapp $ yarn create umi

然后根据自己的偏好，选择自己想要的设置。我选择使用构建 app 应用，使用typescript 开发，UI 使用 antd。

创建完成后，加载依赖包，然后启动项目.

$ yarn $ yarn start

项目启动成功后，在浏览器打开 http://localhost:8000 就可以看到欢迎界面。

创建完项目之后，也成功访问到欢迎界面。现在主要是想把它改造成自己的项目结构。了解整个项目的路由和渲染过程。

先了解下整个项目的结构

路由和 component

首页的渲染是在pages文件目录下的 index.tsx。umi 约定 pages 下所有的 js、jsx、ts 和 tsx 文件即路由。打开配置文件 .umirc.js,可以看到如下的路由配置：

 routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        { path: '/', component: '../pages/index' }
      ]
    }
  ],

component 指向的路由组件文件是从/src/pages 开始。它就是配置 location 和 path 匹配后用于渲染的 React 组件路径。

在React 中所有页面是由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。

所以当请求 http://localhost:8000/ 路径的时候，其实就是先匹配到path='/'，指向到的 /pages/index 。

TypeScript中使用 antd

import React from 'react';
import styles from './index.css';

const BasicLayout: React.FC = props => {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to umi!</h1>
      {props.children}
    </div>
  );
};

export default BasicLayout;

react 搭建项目

前言

React

创建项目

路由 和 component

TypeScript中使用 antd

路由和 component