Использование фреймворков для разработки на ReactJS

Создание проектов с нуля позволяет погружаться в тонкости кода и строить интерфейсы с учетом всех особенностей. Однако такой подход требует много времени и усилий. Часто разработчики тратят значительное количество времени на “изобретение велосипеда” – создание функционала, который уже существует.

Фреймворки решают эту проблему.

Что такое фреймворк?

Фреймворк (framework) – это платформа для разработки приложений, предоставляющая базовый функционал, который разработчики могут использовать для создания своих проектов.

Существует множество фреймворков для различных целей. В этой статье мы рассмотрим лучшие фреймворки для создания проектов на ReactJS.

Содержание

1. Material UI
   • Установка
   • Использование
2. React Bootstrap
   • Установка
   • Использование
3. Atomize
   • Установка
   • Использование
4. Ant Design
   • Установка
   • Использование
5. Chakra UI
   • Установка
   • Использование

Material UI

Material UI предоставляет компоненты для быстрой и легкой веб-разработки.

Установка

npm install @material-ui/core

import React from 'react';
import { Button } from '@material-ui/core';

function App() {
return <Button color="primary">Hello World</Button>;
}

npm install react-bootstrap bootstrap

import Button from 'react-bootstrap/Button';

// или

import { Button } from 'react-bootstrap';

function App() {
return <Button>Hello World</Button>;
}

npm install atomize react-transition-group

import { Button } from 'atomize';

function App() {
return <Button>Hello World</Button>;
}

npm install antd

import { DatePicker } from 'antd';
import ReactDOM from 'react-dom';

ReactDOM.render(<DatePicker />, mountNode);

npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

import * as React from 'react';
import { ChakraProvider } from '@chakra-ui/react';

function App() {
return (
<ChakraProvider>
<App />
</ChakraProvider>
);
}