Neste artigo, vou passar pelo processo passo a passo de criação de um blog react que suporte mais de um idioma. Um blog multilíngue é essencial para expandir seus negócios com marketing de conteúdo direcionado a um público internacional.

Pré-requisitos

1. Certifique-se de ter o nó js já instalado.
2. É necessário conhecimento básico de React js.
3. Conhecimento básico do terminal também é necessário.

Inicializar aplicativo de criação-reação

Create React App (CRA) é uma ferramenta usada para criar aplicativos React. A execução do script CRA gera os arquivos e pastas necessários para iniciar o aplicativo React e executá-lo no navegador.

Para inicializar o React, abra o terminal e digite o código abaixo. Substitua "blog-name" no comando pelo nome do seu blog

 npx create-react-app blog-name

Altere o diretório para entrar na pasta do blog:

 cd blog-name

Inicie o servidor React com:

 npm start

Abra seu navegador e visite http://localhost:3000 para confirmar se o aplicativo React está em execução.

Instalar dependências

Neste projeto, vamos precisar de duas dependências para começar. Basicamente, react -router-dom e polyblog-js-client . Usaremos react-router-dom para criar as rotas para nosso blog e polyblog-js-client para buscar artigos do Polyblog.

Execute o seguinte comando para instalar os pacotes react-router-dom e polyblog-js-client:

 npm install react-router-dom @polyblog/polyblog-js-client

Crie rotas para buscar e exibir artigos

Em nosso arquivo App.js dentro da pasta 'src' , precisamos criar as rotas para exibir os artigos usando react-router-dom. Também precisamos importar nossos respectivos arquivos na pasta 'src' (HomePage.jsx e ArticlePage.jsx que criaremos posteriormente) para exibir a página desejada.

App.js - Substitua o código dentro da pasta 'src' do App.js pelo código abaixo.

 //src/App.js

 import HomePage from './HomePage';
 import ArticlePage from './ArticlePage';
 import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate
 } from 'react-router-dom';
 function App() {
  return (
    
      
         } exact />
        } />
        } />
      
    
  )
 }

 export default App

Para criar as rotas, importamos BrowserRouter, Routes, Route e Navigate de react-router-dom.

Vamos criar duas rotas:

• Uma rota para exibir todos os artigos de acordo com o idioma
• Uma rota para exibir todos os detalhes de um único artigo.

A rota da página de destino será redirecionada para a primeira rota.

As rotas terão estas formas:

• /locale (exibindo artigos relacionados a um idioma selecionado)
• /locale/slug (exibindo um único artigo detalhado com relação a um idioma selecionado)

a localidade varia devido aos diferentes idiomas disponíveis, portanto, a localidade deve ser uma variável dinâmica. O mesmo se aplica ao slug , devido aos diferentes slugs dos vários artigos. Assim, tornando as rotas dinâmicas:

• /:localidade
• /:localidade/:slug

Para obter os valores de localidade e slug, o gancho de reação useParams será usado para obter os valores nas respectivas rotas. Verifique Homepage.jsx e ArticlePage.jsx abaixo.

Crie um componente para buscar os artigos da API

Vamos criar um arquivo dentro da pasta src e nomeá-lo como HomePage.jsx. Ele exibirá todos os artigos de acordo com um idioma específico.

Dentro do arquivo HomePage.jsx, vamos buscar os artigos da API do Polyblog e exibi-los.

HomePage.jsx - Substitua o código dentro da pasta src do HomePage.jsx pelo código abaixo

 // src/HomePage.jsx

 import { getArticles } from '@polyblog/polyblog-js-client';
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';

 const HomePage = () => {
  const [articles, setArticles] = useState();
  const { locale } = useParams();

  useEffect(() => {
    if (articles) return
    const fetchArticles = async () => {
      // signup at https://app.polyblog.io/signup to get your blogId
      // you can find YOUR_BLOG_ID in the Settings page of Polyblog
      let articles = await getArticles({
        blogId: 'YOUR_BLOG_ID',
        locale,
        published: true,
        sortDirection: 'DESC',
      })
      console.log({ articles })
      setArticles(articles)
    }

    fetchArticles()
  }, [articles, locale])
  return (
    

      

        
Recent Articles
        

          {articles?.map(article => (
            article.locale === locale &&
            
              

                

                  
                
                

                  {article.author} 
                  
                  {
                    new Date(article.creationTime).toLocaleString(article.locale, {
                    dateStyle: 'long' })
                  }
                 
                 
{article.title}
                 
{article.subtitle}
                
              
            
          ))}
        
      
    
  )
 }

 export default HomePage

1. Inscreva-se no Polyblog em https://app.polyblog.io/signup
2. Depois de se inscrever, clique em 'Configurações' no painel do Polyblog para encontrar seu 'ID do blog' (por exemplo, 1234567890abcdef12345678)
3. Substitua YOUR_BLOG_ID pelo seu 'Blog id' no código acima

Para exibir os artigos em inglês , abra seu navegador e acesse a url http://localhost:3000/en e para exibir os artigos em espanhol , acesse a url http://localhost:3000/es .

Exibir um artigo

Vamos criar outro arquivo dentro da pasta src . Vamos chamá-lo de ArticlePage.jsx. Ele exibirá todos os detalhes de um único artigo.

Dentro de nosso ArtilclePage.jsx, vamos buscar um único artigo e exibir seus detalhes.

ArticlePage.jsx - Substitua o código dentro da pasta src de ArticlePage.jsx pelo código abaixo

Copie o 'blog Id' que usamos na etapa anterior e substitua-o por 'YOUR_BLOG_ID' no código abaixo.

 // src/ArticlePage.jsx

 import { getArticles } from '@polyblog/polyblog-js-client';
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';

 const ArticlePage = () => {
  const [article, setArticle] = useState();
  const { locale, slug } = useParams();

  useEffect(() => {
    if (article) return
    const fetchArticle = async () => {
      let articles = await getArticles({
        blogId: 'YOUR_BLOG_ID',
        locale,
        slug,
      })
      let singleArticle = articles?.[0]
      setArticle(singleArticle)
    }
    fetchArticle()
  }, [article, locale, slug])
  return (
    

      

        

          Blog
        
        
        

          
{article?.title}
          
{article?.subtitle}
          
            Posted by  {article?.author} on
           
             {new Date(article?.creationTime).toLocaleString(locale, {dateStyle: 'long'})}
            
          
        
      
      

        

      
    
  )
 }

 export default ArticlePage

Para exibir um único artigo detalhado, você pode clicar em qualquer um dos artigos na página HomePage.jsx acima ou pode fazê-lo manualmente acessando o URL http://localhost:3000/en/:slug para exibir um único artigo detalhado artigo em inglês e http://localhost:3000/es/:slug para exibir um único artigo em espanhol detalhado . O parâmetro :slug no URL acima é uma variável dinâmica que, neste caso, é o título do artigo individual que você deseja exibir naquele URL. Portanto, substitua ":slug" pelo título do artigo que deseja exibir.

Conclusão

E lá vamos nós! Criamos com sucesso nosso blog multilíngue em um piscar de olhos.

Podemos traduzir o blog em diferentes idiomas e levar nosso marketing de conteúdo para o próximo nível!

Um blog multilíngue geralmente é difícil de construir, mas com o Polyblog , podemos facilmente construir um blog com funcionalidades complexas em pouco tempo.

Este post é apenas a ponta do iceberg considerando a quantidade de coisas que podem ser feitas com o Polyblog.

Espero que este artigo tenha ajudado você a entender como um blog multilíngue pode ser criado com o React.

Um exemplo funcional deste projeto pode ser encontrado neste repositório github.

Você pode descobrir mais sobre os parâmetros da API suportados na Referência da API

Obrigado por ler!