acmesquita

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "deploy": "aws s3 sync build/ s3://NOME_DO_BUCKET"
},

acmesquita

provider "aws" {
  region  = "us-east-1"
}
resource "aws_s3_bucket" "web" {
  bucket = "NOME_DO_BUCKET"
  acl    = "public-read"
  policy = <<POLICY
{
  "Version": "2012-10-17",
  "Id": "MYBUCKETPOLICY",

acmesquita

import React from 'react';

//... importações

function App() {
  return (
    <LayoutWrapper>
      <Header />
      <Sidebar>
        <List>

acmesquita

import React, { Children, useRef } from 'react';

function LayoutWrapper({children}) {
  const sidebarRef = useRef(null)

  const handleSidebar = useCallback(() => {
    sidebarRef.current.handleToRecall()
  }, [])

  return (

acmesquita

import React, { useState, forwardRef, useImperativeHandle} from 'react';
import clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer';
import useStyles from './styles';
import { bool, node } from 'prop-types';

const Sidebar = forwardRef(({ children, close, ...props }, ref) => {
  const classes = useStyles();
  const [toRecall, setToRecall] = useState(close);

acmesquita

import React from 'react';
import {
  AppBar,
  Toolbar,
  IconButton,
  Grid,
  Hidden,
} from '@material-ui/core';
import PropTypes from 'prop-types';

acmesquita

import React, { useState, useImperativeHandle, forwardRef } from 'react';

function Modal({}, ref) {
  const [visible, setVisible] = useState(false)

  function openModal(){
    setVisible(true)
  }

  function closeModal(){

acmesquita

import React, { useRef, useCallback } from 'react';

function Main() {
  const inputRef = useRef(null)

  const handleSubmit = (event)=>{
    event.preventDefault()

    const name = inputRef.current.value

acmesquita

class Modal {
 constructor(){
   this.visiable = false
 }

 public open(){
  this.visible = true
 }

 private close(){

acmesquita

Criando um template reutilizável com Material-UI

Conceitos básicos e avançados do uso dos hooks useRef , useImperativeHandle e outras mágicas

Durante o desenvolvimento de um sistema, precisei resolver algumas sutilezas para que o comportamento de maximizar e minimizar a Sidebar através do Header .

Contextualizando o desafio

Existe diversas formas para passar uma sinalização de que um componente pai para um componente filho: props, context, redux e por ai vai. Com isso, imaginem um modal que tem a opção de receber do pai que o componente vai está aberto ou fechado, contudo o componente pai é que deve gerencia o estado desse modal, concorda?