antJS

Ant JS nos dará muchos componentes visuales que podremos utilizar en nuestros desarrollos.

Instalación y carga de antJS

npm i antd
import { DatePicker } from 'antd';

export default () => <DatePicker />

Definir el loader en el webpack.config.js para poder cargar una hoja de estilos

npm i react-bootstrap bootstrap
npm i mini-css-extract-plugin
npm i css-loader
webpack.config.js (necesario para importar el CSS)
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
module.exports = {
     ...
     module: {
          rules: [
               ...
               {
                    test: /\.(css)$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader'],
               },
           ]
     }
     plugins: [
         ...
         new MiniCssExtractPlugin(),
    ],
};

Cuando tengamos el loader, ya sólo nos faltará cargar la hoja de estilos del framework correspondiente:

./src/application/styled.js
import styled, { createGlobalStyle } from 'styled-components';
import 'antd/dist/antd.css';

export const GlobalStyle = createGlobalStyle``;

Cargar otro framework CSS: Bootstrap

Aunque personalmente, prefiero antJS, también es posible usar otros frameworks como Bootstrap en React:

npm i react-bootstrap bootstrap
import { Container, Row, Col } from 'react-bootstrap';

export default () => (
    <div>
        <Container>
            <Row>
                <Col>Text 1</Col>
                <Col>Text 2</Col>
            </Row>
        </Container>
    </div>
)
← Login con Auth0
Login con Google →

Aviso Legal | Política de privacidad