Sergioamjr

<div class="container">
  <div class="grid">
    <div class="xs-6-12 sm-4-12 md-12-12 lg-6-12">
      <div class="box"></div>
    </div>
    <div class="xs-6-12 sm-8-12 md-12-12 lg-6-12">
      <div class="box"></div>
    </div>
  </div>
  <div class="grid">

Sergioamjr

import { Container, Grid, Column } from './PATH/styled-component-grid.jsx'

class App extends Component {
  render() {
    return(
       <Container>
        <Grid>
          <Column xs={4} md={6} lg={3}>
            <Box />
          </Column>

Sergioamjr

.container {
  margin 0 auto
  padding 0 15px
  max-width 1200px
}

.grid {
  display flex
  flex-wrap wrap
  margin 0 -15px

Sergioamjr

import styled from 'styled-components'

export const Container = styled.div`
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1200px;
`;

export const Grid = styled.div`
  display: flex;

Sergioamjr

<div class="container">
  <div class="grid">
    <div class="xs-6-12 sm-4-12 md-12-12 lg-6-12">
      <p>Conteúdo</p>
    </div>
    <div class="xs-6-12 sm-8-12 md-12-12 lg-6-12">
      <p>Conteúdo</p>
    </div>
  </div>
  <div class="grid">

Sergioamjr

.container {
  margin: 0 auto; /* Centraliza o site na tela */
  padding: 0 15px; /* Espaçamento na lateral */
  max-width: 1200px; /* Largura máxima do container */
}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px; /* Necessário para tirar o espaçamento na lateral do container e das grids */

Sergioamjr

.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1200px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;

Sergioamjr

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action) {
    case "add":
      return { count: state.count + 1 };
    case "sub":
      return { count: state.count - 1 };
    default:
      return state;

Sergioamjr

import React, { useState } from "react";

function ComponentWithUseState() {
  //states independentes
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  
  //único state com várias propriedades
  const [address, setAddress] = useState({street: '', city: ''})
  

Sergioamjr

import React, { useState, useEffect } from "react";

function ComponentWithUseEffect() {
  const [screenWidth, setScreenWidth] = useState(0);

  const updateScreenWidth = () => {
    const currentScreenWidth = window.innerWidth;
    setScreenWidth(currentScreenWidth);
  };