21 Лучшая библиотека компонентов React, которую стоит попробовать в 2021 году

    npm install react-bootstrap bootstrap

import React, { useState } from 'react';

    import Jumbotron from 'react-bootstrap/Jumbotron';
    import Toast from 'react-bootstrap/Toast';
    import Container from 'react-bootstrap/Container';
    import Button from 'react-bootstrap/Button';

    import './App.css';

    const ExampleToast = ({ children }) => {
      const [show, toggleShow] = useState(true);

    return (
        <>
          {!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
          <Toast show={show} onClose={() => toggleShow(false)}>
            <Toast.Header>
              <strong className="mr-auto">React-Bootstrap Demo</strong>
            </Toast.Header>
            <Toast.Body>{children}</Toast.Body>
          </Toast>
        </>
      );
    };

    const App = () => (
      <Container className="p-3">
        <Jumbotron>
          <h1 className="header">Demonstration Of React Bootstrap</h1>
          <ExampleToast>
            Click Here!

          </ExampleToast>
        </Jumbotron>
      </Container>
    );

    export default App;

npm install [@material](http://twitter.com/material)-ui/core

import React from "react";
    import ReactDOM from "react-dom";
    import Button from "[@material](http://twitter.com/material)-ui/core/Button";

    function App() {
      return (
        <Button variant="contained" color="secondary">
          REGISTER NOW
        </Button>
      );
    }

    ReactDOM.render(<App />, document.querySelector("#app"));

    $ npm install antd

import React from "react";
    import ReactDOM from "react-dom";
    import { Button, DatePicker, version } from "antd";
    import "antd/dist/antd.css";
    import "./index.css";

    ReactDOM.render(
      <div className="App">
        <h1>antd version: {version}</h1>
        <DatePicker />
        <Button type="primary" style={{ marginLeft: 8 }}>
          Primary Button
        </Button>
      </div>,
      document.getElementById("root")
    );

    $ npm install --save react-router

import React from "react";
    import { render } from "react-dom";
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    import About from "./components/About";
    import Home from "./components/Home";
    import Topics from "./components/Topics";

    const BasicExample = () =>
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>

    <hr />

    <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topics} />
        </div>
      </Router>;

    render(<BasicExample />, document.getElementById("root"));

    npm i rebass

 /* eslint no-unused-vars: 0 */
    import React from 'react'
    import { render } from 'react-dom'
    import preset from '[@rebass/preset](http://twitter.com/rebass/preset)'
    import { ThemeProvider } from 'emotion-theming'
    // OR import { ThemeProvider } from 'styled-components'
    import {
      Box, Flex,Heading,Text, Button,Link,Image, Card, 
    } from 'rebass'

    // OR use 'rebass/styled-components'

    const theme = {
      ...preset,
    }

    const App = props => {
      return (
        <ThemeProvider theme={theme}>
          <Box variant='styles.root'>
            <Heading as='h1' mb={4}>
              Want To Proceed?
            </Heading>
            <Button variant='primary' mr={3}>
              Yes
            </Button>
            <Button variant='outline'>
              No
            </Button>
          </Box>
        </ThemeProvider>
      )
    }

    render(<App />, root) // eslint-disable-line no-undef

    $  npm install semantic-ui-react semantic-ui-css

    import 'semantic-ui-css/semantic.min.css'

import React from "react";
    import { render } from "react-dom";
    import {Button,
      Container,
      Divider,
      Header,
      Icon,
      Message  
    }
    from "semantic-ui-react";

    const App = () => (
      <Container>
        <Divider hidden />
        <Header as="h1" floated="left">

          Click To Select
        </Header>

    <Divider hidden clearing />
        <Button
          content="GitHub"
          icon="github"
          href="[https://github.com/Semantic-Org/Semantic-UI-React](https://github.com/Semantic-Org/Semantic-UI-React)"
          target="_blank"
        />
        <Button
          color="blue"
          content="Documentation"
          icon="book"
          href="[https://react.semantic-ui.com](https://react.semantic-ui.com)"
          target="_blank"
        />
        <Button
          color="orange"
          content="Stack Overflow"
          icon="stack overflow"
          href="[https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=votes](https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=votes)"
          target="_blank"
        />

    <Divider hidden clearing />
        <Message info>
          After forking, update this template to demonstrate the bug.
        </Message>
      </Container>
    );

    render(<App />, document.getElementById("root"));

    npm i react-motion

import React, { Component } from "react"
    import { render } from "react-dom"
    import Map from "./Map"

    import "./styles.css"

    class App extends Component {
      constructor() {
        super()
        this.state = { center: [0, 0] }
      }
      changeCenter = center => () => {
        this.setState({ center })
      }
      render() {
        return (
          <div style={{ textAlign: "center" }}>
            <div style={{ padding: "1rem 0" }}>
              <button
                className="btn"
                onClick={this.changeCenter([-122.4194, 37.7749])}
              >
                {"San Francisco"}
              </button>
              <button
                className="btn"
                onClick={this.changeCenter([151.2093, -33.8688])}
              >
                {"Sydney"}
              </button>
            </div>
            <Map center={this.state.center} />
          </div>
        )
      }
    }
    render(<App />, document.getElementById("root"))

    npm install react-hook-form

import React from "react";
import ReactDOM from "react-dom";
import useForm from "react-hook-form";
import "./styles.css";

// Messages
const required = "This field is required";
const maxLength = "Your input exceed maximum length";

// Error Component
const errorMessage = error => {
  return <div className="invalid-feedback">{error}</div>;
};

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <div className="container">
      <div className="col-sm-12">
        <h3>React Hook Form</h3>
      </div>
      <div className="col-sm-12">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="form-group">
            <input
              className="form-control"
              type="text"
              placeholder="First Name"
              name="Username"
              ref={register({ required: true, maxLength: 20 })}
            />
            {errors.Username &&
              errors.Username.type === "required" &&
              errorMessage(required)}
            {errors.Username &&
              errors.Username.type === "maxLength" &&
              errorMessage(maxLength)}
          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="text"
              placeholder="Last Name"
              name="Name"
              ref={register({ required: true, maxLength: 50 })}
            />
            {errors.Name &&
              errors.Name.type === "required" &&
              errorMessage(required)}
            {errors.Name &&
              errors.Name.type === "maxLength" &&
              errorMessage(maxLength)}
          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="tel"
              placeholder="Mobile number"
              name="MobileNumber"
              ref={register({ maxLength: 12 })}
            />
            {errors.MobileNumber &&
              errors.MobileNumber.type === "maxLength" &&
              errorMessage(maxLength)}
          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="email"
              placeholder="Email"
              name="Email"
              ref={register({ required: true, pattern: /^S+@S+$/i })}
            />
            {errors.Email &&
              errors.Email.type === "required" &&
              errorMessage(required)}
          </div>

          <div className="form-group">
            <input
              className="form-control"
              type="text"
              placeholder="Password"
              name="Password"
              ref={register({ required: true })}
            />
            {errors.Password &&
              errors.Password.type === "required" &&
              errorMessage(required)}
          </div>
          <div className="form-group">
            <label>Gender</label>
            <br />
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="genderOptions"
                value="Male"
                id="inlineRadio1"
                ref={register}
              />
              <label className="form-check-label" htmlFor="inlineRadio1">
                Male
              </label>
            </div>
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="genderOptions"
                value="Female"
                id="inlineRadio2"
                ref={register}
              />
              <label className="form-check-label" htmlFor="inlineRadio2">
                Female
              </label>
            </div>

          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="datetime"
              placeholder="Date of Birth"
              name="DateofBirth"
              ref={register({
                pattern: /(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)dd/i
              })}
            />
            {errors.DateofBirth &&
              errorMessage("Please use the following format MM/DD/YYYY")}
          </div>
          <div className="form-group">
            <textarea className="form-control" name="About" ref={register} />
          </div>
          <div className="form-group">
            <input
              type="checkbox"
              placeholder="Terms & conditions"
              name="Terms & conditions"
              id="customCheck1"
              ref={register}
            />
            <label htmlFor="customCheck1">  By clicking this, you are agreeing to our terms & services.</label>
          </div>
          <div className="form-group">
            <input className="btn btn-primary" type="submit" />
          </div>
        </form>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

npm install @reduxjs/toolkit

import React from "react";
    import { render } from "react-dom";
    import { Provider } from "react-redux";

    import store from "./store";
    import Page from "./Page";

    const App = () => (
      <Provider store={store}>
        <Page />
      </Provider>
    );

    render(<App />, document.getElementById("root"));

    $ npm install -g react-360-cli

import React from "react";
    import ReactDOM from "react-dom";
    import React360 from "./React360";

    import "./styles.css";

    function App() {
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <img
            className="icon-react360"
            alt=""
            src={require(`./360_degrees.png`)}
          />
          <React360 dir="awair-360" numImages={55} />
        </div>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    $ npm install --save react-fabric

import React from 'react'
    import { render } from 'react-dom'
    import 'fabric-webpack'

    import DesignCanvas from './DesignCanvas'
    import Rect from './Rect'
    import Circle from './Circle'
    import Image from './Image'

    const App = () => (
      <div>
        <DesignCanvas>
          <Rect width={100} height={100} fill="blue" />
          <Circle radius={20} top={200} />
          <Image url="[https://http.cat/100](https://http.cat/100)" scale={0.2} top={100} />
        </DesignCanvas>
      </div>
    )

    render(<App />, document.getElementById('root'))

    npm install react-virtualized --save

import React from 'react';
    import { render } from 'react-dom';
    import UserForm from './UserForm';

    const imaginaryUser = {
      email: '',
      username: '',
      imaginaryThingId: null,
    };

    const App = () => (
      <div className="App">
        <UserForm user={imaginaryUser} />
      </div>
    );

    render(<App />, document.getElementById('root'));

    npm install react-desktop --save

import React from "react";
    import { Button, TitleBar, Toolbar, SearchField } from "react-desktop/macOs";
    import "./styles.css";

    export default function App() {
      return (
        <>
          <TitleBar controls inset>
            <Toolbar height="43" horizontalAlignment="center" />
          </TitleBar>

    <TitleBar inset>
            <Toolbar height="43" horizontalAlignment="right">
              <SearchField
                placeholder="Search"
                defaultValue=""
                onChange={this.handleChange}
              />
            </Toolbar>
          </TitleBar>

    <Button color="blue" onClick={() => console.log("Clicked!")}>
            Press me!
          </Button>
        </>
      );
    }

 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

import React from "react";
    import ReactDOM from "react-dom";
    import Header from "./header";
    import { theme, ThemeProvider, CSSReset } from "[@chakra](http://twitter.com/chakra)-ui/core";

    const breakpoints = ["360px", "768px", "1024px", "1440px"];
    breakpoints.sm = breakpoints[0];
    breakpoints.md = breakpoints[1];
    breakpoints.lg = breakpoints[2];
    breakpoints.xl = breakpoints[3];

    const newTheme = {
      ...theme,
      breakpoints
    };

    function App() {
      return (
        <ThemeProvider theme={newTheme}>
          <CSSReset />
          <Header />
        </ThemeProvider>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    npm install --save final-form react-final-form

 import React from 'react'
    import { render } from 'react-dom'
    import Styles from './Styles'
    import { Form, Field } from 'react-final-form'

    const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

    const onSubmit = async values => {
      await sleep(300)
      window.alert(JSON.stringify(values, 0, 2))
    }

    const App = () => (
      <Styles>
        <h1>? React Final Form - Simple Example</h1>
        <a href="https://github.com/erikras/react-final-form#-react-final-form">
          Read Docs
        </a>
        <Form
          onSubmit={onSubmit}
          initialValues={{ stooge: 'larry', employed: false }}
          render={({ handleSubmit, form, submitting, pristine, values }) => (
            <form onSubmit={handleSubmit}>
              <div>
                <label>First Name</label>
                <Field
                  name="firstName"
                  component="input"
                  type="text"
                  placeholder="First Name"
                />
              </div>
              <div>
                <label>Last Name</label>
                <Field
                  name="lastName"
                  component="input"
                  type="text"
                  placeholder="Last Name"
                />
              </div>

              <div>
                <label>Favorite Color</label>
                <Field name="favoriteColor" component="select">
                  <option />
                  <option value="#ff0000">❤️ Red</option>
                  <option value="#00ff00">? Green</option>
                  <option value="#0000ff">? Blue</option>
                </Field>
              </div>
              <div>
                <label>Toppings</label>
                <Field name="toppings" component="select" multiple>
                  <option value="chicken">? Chicken</option>
                  <option value="ham">? Ham</option>
                  <option value="mushrooms">? Mushrooms</option>

                </Field>
              </div>


              <div>
                <label>Notes</label>
                <Field name="notes" component="textarea" placeholder="Notes" />
              </div>
              <div className="buttons">
                <button type="submit" disabled={submitting || pristine}>
                  Submit
                </button>
                <button
                  type="button"
                  onClick={form.reset}
                  disabled={submitting || pristine}
                >
                  Reset
                </button>
              </div>
              <pre>{JSON.stringify(values, 0, 2)}</pre>
            </form>
          )}
        />
      </Styles>
    )

    render(<App />, document.getElementById("root"));

    npm i styled-components

import React from "react";
    import { render } from "react-dom";
    import { Button, th } from "smooth-ui";
    import { darken } from "polished";

    // Simple extend
    const BlueButton = Button.extend`
      background-color: blue !important;
      color: white !important;
    `;

    // Use props & theme in extend
    const BorderedButton = Button.extend`
      border: 1px solid ${props => th(props.variant, color => darken(0.1, color))};

    &:hover {
        border-color: ${props => th(props.variant, color => darken(0.3, color))};
      }
    `;

    // Modify component
    const LinkBorderedButton = BorderedButton.withComponent("a");

    const App = () => (
      <div>
        <BlueButton variant="primary">Yes blue</BlueButton>
        <BorderedButton variant="primary">Smooth Button</BorderedButton>
        <LinkBorderedButton variant="success">This is a link</LinkBorderedButton>
      </div>
    );

    render(<App />, document.getElementById("root"));

    npm install onsenui

import React from "react";
    import { render } from "react-dom";
    import ons from "onsenui";
    import {
      Splitter,
      SplitterSide,
      SplitterContent,
      Page,
      Toolbar,
      ToolbarButton,
      Icon
    } from "react-onsenui";

    class MyPage extends React.Component {
      state = { isOpen: false };
      hide=()=> {
        this.setState({ isOpen: false });
      }

    show = () => {
        this.setState({ isOpen: true });
      }
      renderToolbar() {
        return (
          <Toolbar>
            <div className="center">My app!</div>
            <div className="right">
              <ToolbarButton>
                <Icon icon="ion-navicon, material:md-menu" />
              </ToolbarButton>
            </div>
          </Toolbar>
        );
      }
      render() {
        return (
          <Splitter>
            <SplitterSide
              style={{
                boxShadow:
                  "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
              }}
              side="left"
              width={200}
              collapse={true}
              isSwipeable={true}
              isOpen={this.state.isOpen}
              onClose={this.hide}
              onOpen={this.show}
            >
              <Page />
            </SplitterSide>
            <SplitterContent>
              <Page renderToolbar={this.renderToolbar}>
                <section style={{ margin: "16px" }}>
                  <p>Swipe right to open the menu.</p>
                </section>
              </Page>
            </SplitterContent>
          </Splitter>
        );
      }
    }

    render(<MyPage />, document.getElementById("root"));

    npm i --save-dev enzyme enzyme-adapter-react-16

import React from "react";
    import ReactDOM from "react-dom";

    import "./styles.css";

    function App() {
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    npm install react-admin

import * as React from 'react';
    import PostIcon from '[@material](http://twitter.com/material)-ui/icons/Book';
    import UserIcon from '[@material](http://twitter.com/material)-ui/icons/Group';
    import { Admin, Resource, ListGuesser } from 'react-admin';
    import jsonServerProvider from 'ra-data-json-server';

    import { PostList, PostEdit, PostCreate, PostShow } from './posts';
    import { UserList } from './users';
    import Dashboard from './Dashboard';
    import authProvider from './authProvider';

    const App = () => (
        <Admin
            dataProvider={jsonServerProvider(
                '[https://jsonplaceholder.typicode.com'](https://jsonplaceholder.typicode.com')
            )}
            authProvider={authProvider}
            dashboard={Dashboard}
        >
            <Resource
                name="posts"
                icon={PostIcon}
                list={PostList}
                edit={PostEdit}
                create={PostCreate}
                show={PostShow}
            />
            <Resource name="users" icon={UserIcon} list={UserList} />
            <Resource name="comments" list={ListGuesser} />
        </Admin>
    );
    export default App;

    $ npm install --save react-toolbox

import React from "react"
    import { render } from "react-dom"
    import ThemeProvider from "react-toolbox/lib/ThemeProvider"

    import markdownToReact from "./markdownToReact"
    import theme from "./assets/react-toolbox/theme"
    import "./assets/react-toolbox/theme.css"

    const content = markdownToReact(
    `# Hello

    !Icon[add](Add){ floating accent }
    !Icon[bookmark](Bookmark){ raised primary label="Bookmark" }`
    )

    const styles = {
      fontFamily: "sans-serif",
      textAlign: "center",
    }

    const App = () => (
      <ThemeProvider theme={ theme }>
        <div style={ styles }>
          { content }
        </div>
      </ThemeProvider>
    )

    render(<App />, document.getElementById('root'))

    npm i rsuite@next --save

import React from "react";
    import { render } from "react-dom";
    import { Button } from "rsuite";

    const styles = {
      padding: 20,
      textAlign: "center"
    };

    const App = () => (
      <div style={styles}>
        <Button>Hello World</Button>
      </div>
    );

    render(<App />, document.getElementById("root"));