How to code with React?

Question

css

Tell me how it is better to type in react applications today, which library to use for the grid and container, how to find a universal solution that fits any layout? I will be grateful for the answer

Answer 1

Most of the projects I have worked on have used https://styled-components.com/ for styling.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

Or if the component library https://material-ui.com/ is installed, then we use the tools from it

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

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

As for grids, containers, etc., etc., in my opinion, display: flex solves all problems.

Answer 2

Well, besides the fact that there are various react solutions like material-ui, prime-react, adaptation of react-materializecss, the question arises - why do you need it?
Use styled components, on the container class with grid on css, on nested blocks - styles with grid-row or grid-column: span for the required amount through props
. The front that does not know how to css is KG / AM

Answer 3

Tell me how to make it better today in react applications

Make up in the same way as in other applications / sites.
It all depends on who you are doing for, how much time you have, what tool you know, what your team uses.
If you have a hand full - layout on native css, since grids allow you to layout a grid of any complexity and adapt it in a couple of lines on teamplate-areas.
For a long time? Add grid, components, generic shapes to snippets, or git gists that allow you to prototype interfaces in native html\css faster than bootstrap or any other library does.
But as for me, it is also necessary to know the libraries, fortunately - they are studied in a couple of evenings.