React Ant Design #1

1년 만에 다시 포스팅을 시작해볼까 합니다. 현재 java 및 react 개발을 진행하고 있으며 실무에서도 사용 중입니다.

나는 뇌를 믿지 않고 기록을 신뢰합니다!! 

URL : https://ant.design/

Ant Design - The world's second most popular React UI framework

* 리액프 프로젝트는 만드셨죠? 

   아직 만들지 않았다면 : https://myreo.tistory.com/17?category=817264

React - 리액트 맛보기

이제 본격적으로 빠르게 고고~ 

 

1. yarn add antd

완료된 모습 

2. yarn start  또는 npm start

 

처음 실행 화면 

https://ant.design/components/layout/

Layout - Ant Design

 

요렇게 완료!

 

App.js

import React, { Component } from 'react';
import { Layout, Menu } from 'antd';
import './App.css';
import 'antd/dist/antd.css';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

class App extends Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <div className='wrapper-main'>
        <Layout>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
              <Menu.Item key="1" icon={<UserOutlined />}>
                nav 1
            </Menu.Item>
              <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                nav 2
            </Menu.Item>
              <Menu.Item key="3" icon={<UploadOutlined />}>
                nav 3
            </Menu.Item>
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }}>
              {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: this.toggle,
              })}
            </Header>
            <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
              }}
            >
              Content
          </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}

export default App;

App.css

html, body, #root, .wrapper-main {
  width: 100%;
  height: 100%;
  overflow: hidden;

}
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.site-layout .site-layout-background {
  background: #fff;
}

 

다같이 즐코~