{"id":48708,"date":"2024-04-11T12:00:00","date_gmt":"2024-04-11T15:00:00","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=48708"},"modified":"2024-07-30T17:26:54","modified_gmt":"2024-07-30T20:26:54","slug":"react-js","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/react-js\/","title":{"rendered":"React JS: conhe\u00e7a as ferramentas essenciais do ecossistema\u00a0"},"content":{"rendered":"\n

O React JS \u00e9 interessante para o desenvolvimento de aplica\u00e7\u00f5es web modernas e escal\u00e1veis. Conhe\u00e7a as principais ferramentas da biblioteca.<\/em> <\/p>\n\n\n\n

O React \u00e9 uma das bibliotecas JavaScript<\/strong> mais populares por conta de suas ferramentas que melhoram o processo de desenvolvimento de aplica\u00e7\u00f5es web.  <\/p>\n\n\n\n

Este guia se destina a desenvolvedores experientes que desejam explorar o ecossistema do React JS<\/strong> e descobrir maneiras de aprimorar suas habilidades. <\/p>\n\n\n\n

Vamos tratar desde bibliotecas para navega\u00e7\u00e3o<\/strong> e gerenciamento de estado at\u00e9 ferramentas para estiliza\u00e7\u00e3o de componentes e desenvolvimento de componentes isolados. <\/p>\n\n\n\n

Boa leitura! <\/p>\n\n\n\n

Como gerenciar a navega\u00e7\u00e3o com o React Router?<\/strong> <\/h2>\n\n\n\n
\"Homem<\/figure>\n\n\n\n

<\/a>As bibliotecas do React JS facilitam o desenvolvimento de aplica\u00e7\u00f5es web.<\/em> <\/p>\n\n\n\n

O React Router \u00e9 uma biblioteca que permite gerenciar a navega\u00e7\u00e3o entre diferentes componentes <\/strong>da sua aplica\u00e7\u00e3o React JS de forma declarativa. Confira as principais ferramentas usadas com exemplos pr\u00e1ticos. <\/p>\n\n\n\n

Rotas din\u00e2micas<\/strong> <\/h3>\n\n\n\n

Quando uma aplica\u00e7\u00e3o web precisa lidar com diferentes URLs<\/a> que podem conter par\u00e2metros vari\u00e1veis, como IDs de usu\u00e1rio ou produto, o React Router permite definir padr\u00f5es para usar em seus componentes.  <\/p>\n\n\n\n

Vamos lidar com rotas din\u00e2micas<\/strong> para exibir detalhes de produtos.  <\/p>\n\n\n\n

import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;<\/em> <\/p>\n\n\n\n

const App = () => (<\/em> <\/p>\n\n\n\n

  <Router><\/em> <\/p>\n\n\n\n

    <div><\/em> <\/p>\n\n\n\n

      <Header \/><\/em> <\/p>\n\n\n\n

      <Switch><\/em> <\/p>\n\n\n\n

        <Route exact path=”\/” component={Home} \/><\/em> <\/p>\n\n\n\n

        <Route exact path=”\/about” component={About} \/><\/em> <\/p>\n\n\n\n

        <Route exact path=”\/contact” component={Contact} \/><\/em> <\/p>\n\n\n\n

        <Route exact path=”\/products” component={Products} \/><\/em> <\/p>\n\n\n\n

        <Route path=”\/products\/:id” component={ProductDetails} \/><\/em> <\/p>\n\n\n\n

        <Route component={NotFound} \/><\/em> <\/p>\n\n\n\n

      <\/Switch><\/em> <\/p>\n\n\n\n

      <Footer \/><\/em> <\/p>\n\n\n\n

    <\/div><\/em> <\/p>\n\n\n\n

  <\/Router><\/em> <\/p>\n\n\n\n

);<\/em> <\/p>\n\n\n\n

const Products = () => (<\/em> <\/p>\n\n\n\n

  <div><\/em> <\/p>\n\n\n\n

    <h2>Products<\/h2><\/em> <\/p>\n\n\n\n

    <ul><\/em> <\/p>\n\n\n\n

      <li><Link to=”\/products\/1″>Product 1<\/Link><\/li><\/em> <\/p>\n\n\n\n

      <li><Link to=”\/products\/2″>Product 2<\/Link><\/li><\/em> <\/p>\n\n\n\n

      <li><Link to=”\/products\/3″>Product 3<\/Link><\/li><\/em> <\/p>\n\n\n\n

    <\/ul><\/em> <\/p>\n\n\n\n

  <\/div><\/em> <\/p>\n\n\n\n

);<\/em> <\/p>\n\n\n\n

const ProductDetails = ({ match }) => {<\/em> <\/p>\n\n\n\n

  const productId = match.params.id;<\/em> <\/p>\n\n\n\n

  \/\/ Aqui voc\u00ea poderia fazer uma requisi\u00e7\u00e3o para obter os detalhes do produto com o ID fornecido<\/em> <\/p>\n\n\n\n

  return (<\/em> <\/p>\n\n\n\n

    <div><\/em> <\/p>\n\n\n\n

      <h3>Product Details – ID: {productId}<\/h3><\/em> <\/p>\n\n\n\n

      {\/* Renderizar os detalhes do produto *\/}<\/em> <\/p>\n\n\n\n

    <\/div><\/em> <\/p>\n\n\n\n

  );<\/em> <\/p>\n\n\n\n

};<\/em> <\/p>\n\n\n\n

const NotFound = () => (<\/em> <\/p>\n\n\n\n

  <div><\/em> <\/p>\n\n\n\n

    <h2>404 Not Found<\/h2><\/em> <\/p>\n\n\n\n

    <p>Oops! P\u00e1gina n\u00e3o encontrada.<\/p><\/em> <\/p>\n\n\n\n

  <\/div><\/em> <\/p>\n\n\n\n

);<\/em> <\/p>\n\n\n\n

\/\/ Resto dos componentes, como Header, Footer, Home, About, Contact etc.<\/em> <\/p>\n\n\n\n

A rota \/products\/:id <\/strong>\u00e9 din\u00e2mica e corresponder\u00e1 a qualquer URL \/products\/ seguida por um ID de produto.  <\/p>\n\n\n\n

O componente ProductDetails<\/strong> \u00e9 respons\u00e1vel por renderizar os detalhes do produto com base no ID fornecido na URL.  <\/p>\n\n\n\n

Assim, conseguimos criar uma interface escal\u00e1vel<\/strong> para exibir informa\u00e7\u00f5es espec\u00edficas de cada produto em sua aplica\u00e7\u00e3o. <\/p>\n\n\n\n

Navega\u00e7\u00e3o aninhada<\/strong> <\/h3>\n\n\n\n

\u00c0s vezes, \u00e9 necess\u00e1rio organizar suas rotas de forma hier\u00e1rquica<\/strong>, com rotas aninhadas dentro de outras rotas, correspondendo \u00e0 hierarquia de componentes em sua aplica\u00e7\u00e3o. <\/p>\n\n\n\n

Isso \u00e9 \u00fatil para criar interfaces de usu\u00e1rio complexas<\/strong>, como pain\u00e9is de administra\u00e7\u00e3o ou aplicativos com v\u00e1rias se\u00e7\u00f5es, em que certas partes da interface do usu\u00e1rio dependem da rota atual.  <\/p>\n\n\n\n

Em um exemplo de um painel de administra\u00e7\u00e3o, voc\u00ea pode ter uma rota principal \/admin<\/strong> que cont\u00e9m v\u00e1rias subrotas para diferentes se\u00e7\u00f5es, como \/admin\/dashboard, \/admin\/users, \/admin\/settings etc. <\/p>\n\n\n\n

import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;<\/em> <\/p>\n\n\n\n

const Dashboard = () => (<\/em> <\/p>\n\n\n\n

  <div><\/em> <\/p>\n\n\n\n

    <h2>Dashboard<\/h2><\/em> <\/p>\n\n\n\n

    {\/* Links para as subrotas *\/}<\/em> <\/p>\n\n\n\n

    <ul><\/em> <\/p>\n\n\n\n

      <li><Link to=”\/admin\/dashboard\/analytics”>Analytics<\/Link><\/li><\/em> <\/p>\n\n\n\n

      <li><Link to=”\/admin\/dashboard\/reports”>Reports<\/Link><\/li><\/em> <\/p>\n\n\n\n

    <\/ul><\/em> <\/p>\n\n\n\n

    {\/* Rotas aninhadas *\/}<\/em> <\/p>\n\n\n\n

    <Route path=”\/admin\/dashboard\/analytics” component={Analytics} \/><\/em> <\/p>\n\n\n\n

    <Route path=”\/admin\/dashboard\/reports” component={Reports} \/><\/em> <\/p>\n\n\n\n

  <\/div><\/em> <\/p>\n\n\n\n

);<\/em> <\/p>\n\n\n\n

const Analytics = () => (<\/em> <\/p>\n\n\n\n

  <div><\/em> <\/p>\n\n\n\n

    <h3>Analytics<\/h3><\/em> <\/p>\n\n\n\n

    {\/* Conte\u00fado da p\u00e1gina de Analytics *\/}<\/em> <\/p>\n\n\n\n

  <\/div><\/em> <\/p>\n\n\n\n

);<\/em> <\/p>\n\n\n\n

const Reports = () => (<\/em> <\/p>\n\n\n\n

  <div><\/em> <\/p>\n\n\n\n

    <h3>Reports<\/h3><\/em> <\/p>\n\n\n\n

    {\/* Conte\u00fado da p\u00e1gina de Reports *\/}<\/em> <\/p>\n\n\n\n

  <\/div><\/em> <\/p>\n\n\n\n

);<\/em> <\/p>\n\n\n\n

const App = () => (<\/em> <\/p>\n\n\n\n

  <Router><\/em> <\/p>\n\n\n\n

    <div><\/em> <\/p>\n\n\n\n

      {\/* Rota principal para o painel de administra\u00e7\u00e3o *\/}<\/em> <\/p>\n\n\n\n

      <Route path=”\/admin” component={Dashboard} \/><\/em> <\/p>\n\n\n\n

    <\/div><\/em> <\/p>\n\n\n\n

  <\/Router><\/em> <\/p>\n\n\n\n

);<\/em> <\/p>\n\n\n\n

export default App;<\/em> <\/p>\n\n\n\n

Na rota principal, temos a rota \/admin\/dashboard, que \u00e9 renderizada pelo componente Dashboard<\/strong>. <\/p>\n\n\n\n

Ele cont\u00e9m links para as subrotas \/admin\/dashboard\/analytics e \/admin\/dashboard\/reports, e tamb\u00e9m define rotas aninhadas para cada uma dessas subrotas, renderizando os componentes Analytics<\/strong><\/a> e Reports<\/strong>, respectivamente.  <\/p>\n\n\n\n

Gest\u00e3o de estado<\/strong> <\/h3>\n\n\n\n

O React Router oferece op\u00e7\u00f5es para gerenciar a navega\u00e7\u00e3o, como o uso do componente <Link> <\/strong>e par\u00e2metros de rota para passar dados entre componentes. <\/p>\n\n\n\n

Podemos implementar, por exemplo, uma aplica\u00e7\u00e3o de lista de tarefas com o Redux<\/strong>. Primeiro, definimos a\u00e7\u00f5es para atualizar o estado, como adicionar uma nova tarefa ou alternar o estado de uma tarefa. <\/p>\n\n\n\n

Em seguida, criamos um reducer para lidar com essas a\u00e7\u00f5es, atualizando o estado conforme necess\u00e1rio. <\/p>\n\n\n\n

O store \u00e9 criado utilizando a fun\u00e7\u00e3o createStore <\/strong>do Redux, passando o reducer como argumento.  <\/p>\n\n\n\n

O componente App \u00e9 envolvido pelo componente Provider para disponibilizar o store para todos os componentes filhos.  <\/p>\n\n\n\n

Dentro do App, inclu\u00edmos o componente TodoList, respons\u00e1vel por exibir a lista de tarefas e permitir a adi\u00e7\u00e3o de novas tarefas. <\/p>\n\n\n\n

Ele recebe o estado da aplica\u00e7\u00e3o (lista de tarefas) e as a\u00e7\u00f5es (addTask e toggleTask) como props, exibindo a lista de tarefas e permitindo a intera\u00e7\u00e3o do usu\u00e1rio.  <\/p>\n\n\n\n

Essas estruturas permitem uma gest\u00e3o eficaz do estado em aplica\u00e7\u00f5es React JS, mantendo a consist\u00eancia e facilitando a intera\u00e7\u00e3o do usu\u00e1rio com a aplica\u00e7\u00e3o. <\/p>\n\n\n\n

Lazy Loading<\/strong> <\/h3>\n\n\n\n

O Lazy Loading permite carregar de forma ass\u00edncrona<\/strong>, quando temos aplica\u00e7\u00f5es com muitos componentes ou rotas no JavaScript<\/a>. <\/p>\n\n\n\n

Ao integr\u00e1-lo ao React Router, \u00e9 poss\u00edvel dividir sua aplica\u00e7\u00e3o em partes menores e carregar apenas o c\u00f3digo necess\u00e1rio<\/strong> para renderizar a p\u00e1gina atual.  <\/p>\n\n\n\n

Dessa forma, os componentes e recursos de rotas que n\u00e3o s\u00e3o imediatamente necess\u00e1rios n\u00e3o s\u00e3o carregados at\u00e9 que o usu\u00e1rio os solicite, reduzindo significativamente o tempo de carregamento inicial da aplica\u00e7\u00e3o e melhorando a <\/strong>responsividade<\/strong><\/a> geral. <\/p>\n\n\n\n

Para implementar o Lazy Loading com o React Router, voc\u00ea pode usar a fun\u00e7\u00e3o React.lazy() <\/strong>para importar dinamicamente seus componentes de rota.  <\/p>\n\n\n\n

Por exemplo: <\/p>\n\n\n\n

import { Suspense } from ‘react’;<\/em> <\/p>\n\n\n\n

import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;<\/em> <\/p>\n\n\n\n

const LazyComponent = React.lazy(() => import(‘.\/LazyComponent’));<\/em> <\/p>\n\n\n\n

function App() {<\/em> <\/p>\n\n\n\n

  return (<\/em> <\/p>\n\n\n\n

    <Router><\/em> <\/p>\n\n\n\n

      <Suspense fallback={<div>Loading…<\/div>}><\/em> <\/p>\n\n\n\n

        <Switch><\/em> <\/p>\n\n\n\n

          <Route path=”\/lazy” component={LazyComponent} \/><\/em> <\/p>\n\n\n\n

          {\/* Outras rotas aqui *\/}<\/em> <\/p>\n\n\n\n

        <\/Switch><\/em> <\/p>\n\n\n\n

      <\/Suspense><\/em> <\/p>\n\n\n\n

    <\/Router><\/em> <\/p>\n\n\n\n

  );<\/em> <\/p>\n\n\n\n

}<\/em> <\/p>\n\n\n\n

O componente LazyComponent ser\u00e1 carregado apenas quando a rota correspondente for acessada.  <\/p>\n\n\n\n

J\u00e1 o componente Suspense<\/strong> exibe uma mensagem de carregamento enquanto o componente est\u00e1 sendo carregado de forma ass\u00edncrona. <\/p>\n\n\n\n

Como manipular formul\u00e1rios com Formik?<\/strong> <\/h2>\n\n\n\n