Category: Design

$ node –version
v16.13.2
$ npx create-react-app react_app
$ yarn start
http://192.168.56.10:3000/
=>　問題なければstopする

ant designもインストール
$ npm install antd
$ npm audit fix –force

srcディレクトリ内で作業
App.js

function App(){
  return (
      <div className='App'>
        <header className='App-header'>
        </header>
      </div>
    )
}

import {
	BellFilled,
	CaretDownOutlined,
	FormOutlined,
	UserOutlined,
} from '@ant-design/icons/lib/icons';
import { Avatar, Col, Input, Row, Typography } from 'antd';

function App(){
  return (
      <div className='App'>
        <header className='App-header'>
        	<div>
        		<Title>Hpscript</Title>
        		<div>
        			<CaretDownOutlined />
        			<Input placeholder='キーワードを入力' />
        		</div>
        		<div>
        			<div>
        				<FormOutlined />
        				<Text>
        					投稿する
        				</Text>
        			</div>
        			<div>
        				<BellFilled />
        			</div>
        			<Avatar size='large' icon={<UserOutlined />} />
        		</div>
        	</div>
        </header>
      </div>
    );
}

export default App;

src/App.js
Line 14:12: ‘Title’ is not defined react/jsx-no-undef
Line 22:14: ‘Text’ is not defined react/jsx-no-undef

import { Breadcrumb } from 'antd';
import React from 'react';

const App: React.FC = () => (
	<Breadcrumb>
	    <Breadcrumb.Item>Topページ</Breadcrumb.Item>
	    <Breadcrumb.Item>
	      <a href="">ページタイトルA</a>
	    </Breadcrumb.Item>
	    <Breadcrumb.Item>
	      <a href="">ページタイトルB</a>
	    </Breadcrumb.Item>
	    <Breadcrumb.Item>ページタイトルC</Breadcrumb.Item>
	</Breadcrumb>
);

export default App;

Datepicker

import React from 'react';
import { DatePicker } from 'antd';

const App = () => {
	return <DatePicker />;
}

export default App;

First Example

import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';

const App = () => (
	<div style={{padding: '0 24px '}}>
	<h1>antd version: {version}</h1>
	<Space>
		<DatePicker />
		<Button type="primary">Primary Button</Button>
	</Space>
	</div>
)

export default App;

getting start

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { DatePicker, message } from 'antd';
import './index.css';

const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={handleChange} />
      <div style={{ marginTop: 16 }}>
        Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
      </div>
      {contextHolder}
    </div>
  );
};

createRoot(document.getElementById('root')).render(<App />);
export default App;

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { DatePicker, message, Alert } from 'antd';
import './index.css';

const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={value => this.handleChange(value)} />
      <div style={{ marginTop: 20 }}>
      	<Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} />
      </div>
      {contextHolder}
    </div>
  );
};

createRoot(document.getElementById('root')).render(<App />);
export default App;

import { ConfigProvider } from 'antd';
import React from 'react';


const App: React.FC = () => (
	<ConfigProvider theme={{ token: { colorPrimary: '#00b96b'} }}>
		<MyApp />
	</ConfigProvider>
);

export default App;