Ant Design React Tutorial – Getting Started


React tutorial ant design getting started

Ant Design is a popular React UI library with many styled components ready for use.

To get started, let’s create a new react app from scratch:

npx create-react-app ant-tutorial

Open your code editor in the ant-tutorial folder

Start the react app by typing npm start

This will launch the default react app.

Install ant design by installing the ant NPM package:

npm install antd

Go to src/App.js and change the content to this:

// App.js

import React from 'react';
import { Button } from 'antd';
import './App.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;

Now we can see a simple button displayed:

Do get the ant styling, we need to import it into our App.css file. Add this on the top of the file.

// App.css

@import '~antd/dist/antd.css';

Now it looks much better:

We can change the style of the button by changing the type attribute in our jsx. Let’s create some more buttons to see how that looks like.

Change the App.js file to look like this:

// App.js

import React from 'react';
import { Button } from 'antd';
import './App.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Primary</Button>
      <Button type="default">Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="link">Link</Button>
    </div>
  );
}

export default App;

Also let’s create some space for the buttons by adding this anywhere in your App.css file.

// App.css

Button {
  margin: 10px;
}

Now we can see some examples of how the different buttons can look like in Ant design.

There are many more ways to style our buttons. Check out the documentation to see examples with code.

There are tons of other components we can use with Ant design. Let’s try to add a simple login form.

Create a new file under the src folder called Antform.js.

// Antform.js

import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

export const AntForm = () => {
    const onFinish = values => {
        console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    return (
        <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item
                label="Username"
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your username!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="Password"
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your password!',
                    },
                ]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    Submit
        </Button>
            </Form.Item>
        </Form>
    );
};

Then you need to import Antform into App.js and also add the Antform element in the jsx.

Your App.js file should look something like this:

// App.js

import React from 'react';
import { Button } from 'antd';
import './App.css';
import { AntForm } from './Antform';

function App() {
  return (
    <div className="App">
      <Button type="primary">Primary</Button>
      <Button type="default">Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="link">Link</Button>
      <AntForm></AntForm>
    </div>
  );
}

export default App;

We now have a browser in our app!

Now that you have Ant design set up in your React app, you can play around by adding more components.

Check out the components section in the documentation to see what is available.

Have fun!

Rooney

I am a full-stack web developer with over 13 years of experience. I love learning new things and are passionate about JavaScript development both on the front-end and back-end.

Recent Content