Como criar interfaces poderosas com React

Desenvolver um site ou aplicativo do zero é uma tarefa monumental. Codificar, testar e iniciar não são processos simples, especialmente quando os usuários esperam uma interface intuitiva e bem projetada. Portanto, implemente uma biblioteca bem desenvolvida para o idioma escolhido, como Reagir para JavaScript – faz sentido.

Estruturas JavaScript como React fornecem código pré-escrito para ajudá-lo a desenvolver interações de usuário front-end. Isso deixa você com mais tempo para se concentrar nas partes exclusivas de seu site ou aplicativo. Como tal, criar interfaces e temas poderosos se torna muito mais simples do que você pensava.

Neste artigo, exploraremos o que torna o React a melhor solução para a criação de interfaces WordPress excepcionais e as etapas para obtê-lo por conta própria. Vamos mergulhar!

Introdução a Reagir

Se você nunca usou Reagir antes, seja bem vindo! É uma biblioteca JavaScript desenvolvida pelo Facebook que se destaca por ajudar os desenvolvedores a criar interfaces de usuário. Por exemplo, Instantâneo é um aplicativo de galeria com funcionalidade de pesquisa integrada:

O exemplo do SnapShot React.

Enquanto o site React descreve um alguns exemplos de casos de uso, uma verificação rápida do GitHub, GitLab, ou similar deve mostrar uma infinidade de projetos do mundo real para você revisar. É verdade que haverá muito menos do que o número de projetos jQuery e Bootstrap semelhantes, mas a comunidade está crescendo rapidamente.

Por exemplo, algumas das principais empresas de médio e grande porte do mundo usam React. Isso inclui praticamente todos os negócios no Facebook, Reddit, Uber, CNN, Netflix e muitos mais.

Para desenvolvedores, há uma série de benefícios em usar o React para criar uma experiência de usuário (UX) focada. Por exemplo:

  • É uma linguagem fácil de aprender e possivelmente mais produtiva e eficiente de usar do que outras bibliotecas comparáveis.
  • Os ‘componentes’, essencialmente blocos de construção modulares do React, representam uma parte específica da interface e são reutilizáveis.
  • A depuração é mais rápida do que outras bibliotecas e estruturas.
Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

existir muitos mais motivos para começar a usar o React também. No entanto, usando-o especificamente para WordPress, você pode querer procurar outras ferramentas para ajudá-lo.

Iniciando o desenvolvimento do React dentro do ecossistema WordPress

Já se passaram cinco anos desde que a comunidade WordPress foi incentivada a “Aprenda JavaScript em profundidade”. Normalmente, uma das primeiras etapas desse processo é escolher uma moldura. Como o React é uma biblioteca JavaScript, você precisará selecionar uma que funcione com o WordPress Y Reajam enquanto aumentam os pontos fortes um do outro.

Frontity fez muito barulho recentemente como uma estrutura de JavaScript de qualidade e também vem com suporte para Automattic. WP React Starter Também é uma opção sólida, especialmente para o desenvolvimento de plug-ins.

Ao mostrar exemplos nesta peça, usaremos Criar tema React WP, por alguns motivos:

  • Pode ser considerado uma espécie de ‘parceiro’ do WP React Starter.
  • Vendo que é baseado no oficial Criar aplicativo React A ferramenta de linha de comando, Create React WP Theme tem um pedigree sólido.
  • É muito fácil iniciar esta ferramenta.

É este último ponto que mais gostamos. Na verdade, podemos mostrar como começar em apenas três etapas.

Como criar interfaces poderosas usando React (em 3 etapas)

As três etapas a seguir irão guiá-lo pelas etapas básicas necessárias para começar a usar criar-reagir-wptheme. Nós encorajamos você a consultar o Página GitHub para investigar o que você pode realizar com esta estrutura.

Etapa 1: crie o texto padrão para o seu tema

Sua primeira etapa é criar a base de código principal para o seu tema usando a linha de comando. Observe que presumiremos que você já está familiarizado com o uso de uma interface Terminal ou PowerShell como desenvolvedor WordPress.

Você deve primeiro iniciar seu servidor WordPress e mudar para sua instalação temas pasta, que geralmente está localizada dentro da conteúdo wp diretório. Se você estiver usando o Vagrant Vagrants Varying, seu site provavelmente está dentro de um public_html diretório.

Leia Também:  Como saber quando é a melhor hora para publicar um blog ou uma postagem social

A partir daqui, a próxima etapa é executar Create React WP Theme com o seguinte:

npx create-react-wptheme themename

Você vai querer substituir o nome do tema espaço reservado com o que você deseja chamar de seu tópico. Além disso, os usuários do TypeScript devem adicionar --typescript comandar.

Criando um novo tema usando a linha de comando.

Em seguida, vá para a pasta recém-criada com este comando:

cd themename/react-src

Em seguida, execute-o usando o seguinte:

npm run start

Você verá uma mensagem de erro aqui e o ‘observador’ será fechado. Isso ocorre porque existem alguns requisitos adicionais de PHP que devem ser implementados.

Para fazer isso, vá até o painel do WordPress e clique em Aparência> Temas. Em seguida, mude para seu novo tema e visualize seu site na interface.

Finalmente corra npm run start novamente através da linha de comando, e você verá o seu navegador ser atualizado e exibir um valor padrão criar-reagir-app página de boas-vindas:

A página inicial do aplicativo Create React.

Este é o seu tema WordPress. Agora é a hora de desenvolvê-lo!

Etapa 2: desenvolva seu tema

Aí vem a parte divertida: transformar sua visão de um tema WordPress baseado em React em realidade. Obviamente, o escopo aqui é gigantesco e não podemos cobrir tudo que você deseja considerar. No entanto, um bom lugar para começar é com um clássico, “Olá, mundo!” exemplo.

Antes de começar, você vai querer um forte compreensão de JavaScript, já que aprender React e JavaScript ao mesmo tempo é uma tarefa enorme.

Quando suas habilidades estiverem perfeitas, você pode começar a trabalhar com o código React:

ReactDOM.render(
  <h1>Hello, World!</h1>,
  document.getElementById('root')
);

Isso simplesmente imprime “Olá, mundo!” na tela como H1 cabeçalho. Claro, você vai querer fazer mais do que isso. Felizmente, porque Create React WP Theme é baseado em Criar aplicativo React, os mesmos tutoriais podem ajudá-lo a trabalhar com a biblioteca. a Tutorial oficial do React também é um recurso útil.

Leia Também:  Como aplicar marketing localizado ao seu WordPress

Ben Broide tem um visão geral útil como conectar o WordPress e criar o aplicativo React. Como alternativa, o JS para site WP documenta a integração mais ampla entre a linguagem e a plataforma.

No entanto, sugerimos que você dê uma olhada WP e React. Miguel Soriano Ele também desenvolveu uma série de publicações extensas sobre como criar temas usando esta biblioteca. Considere este o seu ponto de partida “oficial”.

Etapa 3: coloque seu tema em ‘produção’

Depois de criar e desenvolver seu tema, você vai querer torná-lo vivo. No entanto, ele não será otimizado para produção neste ponto, isto é, até que você execute alguns comandos.

Para começar, abra a linha de comando e mude para react-src pasta do seu tema (essencialmente sua pasta raiz). A partir daqui, apenas corra npm run build.

Assim que a otimização for concluída, você encontrará uma nova pasta em wp-content / themes / themename / themename contendo seu tema pronto para produção. Obviamente, você desejará substituir os marcadores de posição em nossa string de acordo.

Se você quiser continuar trabalhando em seu tema depois de criar a versão de produção, mude para a pasta de origem usando cd react-src, e corra npm run start. Você pode então trabalhar em seu tópico antes de passar pelo processo de implantação novamente.

conclusão

Em uma palavra, Reagir ajuda a facilitar processos tipicamente complexos usando suas bibliotecas de código declarativo. Há uma razão para ele ter uma reputação fantástica entre a comunidade de desenvolvedores, e usar uma ferramenta como Create React WP Theme é útil para criar interfaces modernas e poderosas para seu site e produtos WordPress.

Neste artigo, revisamos:

  1. Criando o código padrão para o seu tema.
  2. Desenvolva seu tema (especificamente, onde você pode encontrar tutoriais para ajudá-lo neste processo).
  3. Implementando seu novo tema baseado em React.

Você está animado para usar React e WordPress juntos? Deixe-nos saber na seção de comentários!

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: