ReactJS

Criar um projeto

npx create-next-app@latest nome-projeto

Instalar o bootstrap

npm install react-bootstrap bootstrap

Axios para API

npm i axios

Iniciar o projeto

npm run dev

Base do código

importReactfrom"react";constindex=()=>{return<div>index</div>;};exportdefaultindex;

rafce

Componentes

pages/index.jsx

importReactfrom"react";importCabecalhofrom"../components/Cabecalho";constHome=()=>{return(<div><Cabecalho/></div>);};exportdefaultHome;

---

componentes/Cabecalho.jsx

importReactfrom"react";constCabecalho=()=>{return<div>Cabeçalho</div>;};exportdefaultCabecalho;

Componentes com Props

• Componente pai

constPagina=(props)=>{return(<><Cabecalho/><divclassName="bg-secondary py-3 text-white text-center mb-3"><Container><h1>{props.titulo}</h1></Container></div>{props.children}<divstyle={{width: "100%"}}className="bg-secondary position-fixed bottom-0 py-3 text-white text-center"><p>Todos os direitos reservados®</p></div></>);};

• Componente filho

constHome=()=>{return(<><Paginatitulo="Página Inicial"><Container><h1>Hello World</h1><li>1</li><li>2</li><li>3</li><li>4</li></Container></Pagina></>);};

Map

{carros.map((carro,index)=><pkey={index}>{carro}</p>);}

getServerSideProps

Substitui o uso do useEffect

exportasyncfunctiongetServerSideProps(context){constresultado=awaitapiFilmes.get(`/movie/popular/?api_key=<<suachave>>&language=pt-BR`);constfilmes=awaitresultado.data;return{props: { filmes },// will be passed to the page component as props};}