Headphones! TS + React Small Project (02 Layout & Components)

In this article, we stack components (excluding event handling and data requests).

React & Typescript: get started with components

The project requirements

A simple staff management system, divided into two parts of the function: staff management and system Settings. In the employee management section, you can query employee information by employee name and department. In the system Settings section, perform simple system configuration.

directory

|--src
    |--components
        |--employee
            |--QueryForm.tsx
            |--index.tsx
            |--index.css
        |--setting
            |--index.tsx
            |--index.css
        |--App.css
        |--App.tsx
    |--index.tsx
    |--react-app-env.d.ts

Copy the code

implementation

Layout

• src/index.tsx

  import React from "react";
  import ReactDOM from "react-dom";
  import App from "./components/App";
  
  ReactDOM.render(<App />.document.querySelectorAll(".app") [0]);
  Copy the code

  Introduce the
  component, which is the framework for the entire application.

• src/components/App.tsx

  import React from "react";
  import { Menu, ConfigProvider, Layout } from "antd";
  import zhCN from "antd/lib/locale/zh_CN";
  
  import Employee from "./employee";
  import Setting from "./setting";
  
  import "./App.css";
  
  const { Header, Content, Footer } = Layout;
  
  const App = () = > (
    <ConfigProvider locale={zhCN}>
      <Layout>
        <Header>
          <Menu
            mode="horizontal"
            theme="dark"
            className="menu"
            defaultSelectedKeys={["employee"]}
          >
            <Menu.Item key="employee">Staff management</Menu.Item>
            <Menu.Item key="setting">System Settings</Menu.Item>
          </Menu>
        </Header>
        <Content className="contentWrap">
          <div className="content">
            <Employee />{/ *<Setting />* /}</div>
        </Content>
        <Footer className="footer">Project Address: {" "}<a href="https://github.com/pinkqq/ts-react-app">
            https://github.com/pinkqq/ts-react-app
          </a>
        </Footer>
      </Layout>
    </ConfigProvider>
  );
  
  export default App;
  Copy the code

  We split two components: Employee (employee management) and Setting (system setting). The base component uses the standard ANTD component.

  Antd 4.0 removes LocaleProvider and uses ConfigProvider (global configuration) instead.

  The project is now missing routing, which will be added in a later article.

• src/components/App.css

  .menu {
    line-height: 64px;
  }
  .contentWrap {
    padding: 0 50px;
  }
  .content {
    background: #fff;
    padding: 24px;
    min-height: 480px;
  }
  .footer {
    text-align: center;
  }
  Copy the code

Employee

• src/components/employee/index.tsx

  import React, { Component } from "react";
  
  import { Table } from "antd";
  
  import QueryForm from "./QueryForm";
  
  import "./index.css";
  
  const employeeColumns = [
    {
      title: "Name".dataIndex: "name".key: "name"}, {title: "Department".dataIndex: "department".key: "department"}, {title: "Entry Time".dataIndex: "hiredate".key: "hiredate"}, {title: "Rank".dataIndex: "level".key: "level",},];class Employee extends Component {
    render() {
      return (
        <>
          <QueryForm />
          <Table columns={employeeColumns} className="table" />
        </>); }}export default Employee;
  Copy the code

  The Employee page consists of two components: QueryForm (search bar) and Table (result form);

• src/components/employee/index.css

  .table {
    margin-top: 20px;
  }
  .toolbar {
    margin: 20px 0;
  }
  
  Copy the code

• src/components/employee/QueryForm.tsx

  import React, { Component } from "react";
  import { Form, Input, Button, Select } from "antd";
  
  const { Option } = Select;
  
  class QueryForm extends Component {
    render() {
      return (
        <>
          <Form layout="inline">
            <Form.Item>
              <Input placeholder="Name" style={{ width: 120 }} allowClear />
            </Form.Item>
            <Form.Item>
              <Select placeholder="Department" style={{ width: 120 }} allowClear>
                <Option value={1}>Technical department</Option>
                <Option value={2}>operations</Option>
                <Option value={3}>The Marketing Department</Option>
              </Select>
            </Form.Item>
            <Form.Item>
              <Button type="primary">The query</Button>
            </Form.Item>
          </Form>
        </>); }}export default QueryForm;
  Copy the code

Setting

Setting contains a CheckBox + Button for new employee entry notification function.

• src/components/setting/index.tsx

  import { Checkbox, Button } from "antd";
  
  import "./index.css";
  
  const Setting = () = > (
    <>
      <Checkbox>Email reminder for new employees</Checkbox>
      <div className="buttonWrap">
        <Button type="primary">save</Button>
      </div>
    </>
  );
  
  export default Setting;
  Copy the code

• src/components/setting/index.css

  .buttonWrap {
    margin: 20px 0;
  }
  Copy the code

React & TS series

• React & Typescript: Getting started with components
• Headphones! TS + React Small project
• Headphones! TS + React Small Project (02 Layout & Components)
• Headphones! TS + React Small Project (03 Event Handling & Data Requests)
• Headphones! TS + React Small project (04 List Rendering & Routing Configuration)
• Headphones! TS + React Small Project (05 State Management Redux)