Ant layout for Reactjs apps


Ant Design is a UI Kit for developing beautiful web app and it is the second most popular one, it is just like Bootstrap we are familiar. In fact many apps have using multiple UI kits, there are plenty of UI kit available.

Install antd

Using Layouts we can create a skeleton structure of the app, which includes header, footer and content section. For using them in our React app, install the package using

npm i antd

Import Ant Design components

In our app.js we need to import the package extract the header,content,footer objects and also the css for beautify the objects as follows.

import { Layout} from "antd";
import "antd/dist/antd.css";
const { Header, Content, Footer } = Layout;

Create app layout

We have everything we needed, the Header,content,Footer components , Lets organize our app layout in app.js file of React app,

<Router>
<Layout className="layout" style={{ background: "##f759ab" }}>
      <Header>
        Your custom header components here
      </Header>
      <Content style={{ padding: "0 15px" }}>
      <Route path="/about" exact component={AboutUs} />
        You can place more routes/content here 

      </Content>
      <Footer style={{ textAlign: "center" }}>
        space for custom footer component
      </Footer>
    </Layout>
</Router>

That is the basics of the antd, explore more on he Ant for Reactjs

Following ant design posts deserve good read

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.