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
- Certifique-se de ter o nó js já instalado.
- É necessário conhecimento básico de React js.
- 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
- Inscreva-se no Polyblog em https://app.polyblog.io/signup
- Depois de se inscrever, clique em 'Configurações' no painel do Polyblog para encontrar seu 'ID do blog' (por exemplo, 1234567890abcdef12345678)
- 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!