Categoria: Blog

Publicado em

Como instalar o Prettier no VS Code

O Prettier é um formatador de código para o JavaScript, Typescript, HTML, CSS entre outras tecnologias que ajuda a padronizar tudo que uma equipe desenvolve.

Existem plugins Prettier para muitos editores diferentes disponíveis. Aqui vou mostrar a instalação no Visual Studio Code.

1. Instale o plug-in Prettier VS Code

Abra a Paleta de comandos (no submenu Exibir ou use Cmd + Shift + P no Mac e Ctrl + Shift + P no Windows). Em seguida, selecione “Extensões: Instalar extensões”.

Procure por “Prettier”, clique em “Instalar” e depois em “Recarregar” quando a instalação estiver concluída.

2. Execute o Prettier em um arquivo

Agora, se você abrir um arquivo JavaScript e selecionar “Formatar Documento” na Command Palette Prettier, o seu código será arrumado!

3. Execute automaticamente o Prettier ao salvar um arquivo

Abra as configurações da área de trabalho por meio da paleta de comandos. Ative formatOnSave:

{
“pastas”: [],
“configurações”: {},
“editor.formatOnSave”: true,
}
Salve suas configurações e agora seu código deverá ser formatado toda vez que um arquivo for atualizado!

O Prettier também suporta outros idiomas além do JavaScript, por exemplo TypeScript, HTML, CSS ou JSON. No entanto, se você não deseja que eles sejam formatados, pode controlar a configuração formatOnSave por tipo de arquivo:

{
“pastas”: [],
“configurações”: {},
“[javascript]”: {
“editor.formatOnSave”: true
}
}
Formatando código existente com linha de comando
Você pode formatar o código para todo o seu projeto usando a interface da linha de comando (CLI) da Prettier. Primeiro instale a ferramenta CLI:

npm install mais bonito – global
Atualize seu código atual:

mais bonito “* /. ts” – escrever
Feito! Um aviso rápido: atualizar automaticamente a formatação do código significa que você fará um grande commit no controle de origem, onde um grande número de arquivos é atualizado. Isso pode dificultar o uso, por exemplo. git culpa, já que metade das linhas de um arquivo pode ter sido modificada pela última vez no commit do Prettier.

Publicado em

Lendo e renderizando arquivos XML com JavaScript

Olá pessoal, neste artigo demonstrarei como ler e renderizar no seu HTML um arquivo XML, usando JavaScript. Para isso, necessitaremos de um servidor local, como Xamp ou Wamp server, por exemplo. No nosso exemplo, utilizaremos o Xamp.

Vamos começar?

Primeiro, criaremos um arquivo XML de exemplo. No nosso arquivo XML, teremos um catálogo com CDs. Cada CD possui um título e um artista. É importante especificar o tipo de codificação de caracteres no cabeçalho do nosso XML. O tipo de caractere usado nesse exemplo é do conjunto UTF-8.

Representaremos o catálogo com a tag <CATALOG>. Os CDs serão representados com a tag <CD> e teremos três CDs. Cada CD possui duas tags: <TITLE> e <ARTIST>, que possuem o nome do disco e nome do artista, respectivamente.

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
    </CD>
    <CD>
        <TITLE>Pavarotti Gala Concert</TITLE>
        <ARTIST>Luciano Pavarotti</ARTIST>
    </CD>
</CATALOG>

Pronto, agora que já temos o nosso arquivo XML, precisamos de um script JavaScript para realizar a leitura e renderizar o nome de cada disco e artista no DOM.

Dentro de um documento HTML, abra uma tag <script> e, dentro de uma estrutura condicional, utilize o XMLHttpRequest para que ocorra a transferência de dados entre o cliente e o servidor. Começaria assim:

<script>
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
     } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
</script>

O ActiveXObject é utilizado para suporte em Internet Explorer, sendo opcional no nosso exemplo.

Precisamos utilizar agora os métodos open() e send(), para abrir e enviar ao servidor/cliente o nosso arquivo XML a ser lido. Utilizaremos o método GET para isso.

if (window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "file.xml", false);
xmlhttp.send();

Agora, utilizando o método responseXML, faremos a leitura do documento XML:

document.write("<table border='1'>");

Com nossa tabela criada, precisamos agora capturar a tag XML que contém os atributos título e artista. Como sabemos, essa tag é a CD. Utilizaremos o getElementsByTagName para capturarmos esses valores:

let x = xmlDoc.getElementsByTagName("CD");

Feito isso, criaremos um laço de repetição para percorrer esta tag CD e, assim, imprimir os conteúdos. Utilizaremos o childNodes e o nodeValue para capturar o conteúdos das tags <ARTIST> e <TITLE> do XML:

for (let i = 0; i < x.length; i++){
    document.write("<tr><td>");
    document.write("Artista: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
    document.write("</br>")
    document.write("Disco: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    document.write("</td></tr>");
}

E por fim, fecharemos nossa tag <table>:

document.write("</table>");

O seu resultado deve ser algo parecido com isso:

O código JavaScript completo é este:

<script>
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "file.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;

    document.write("<table border='1'>");
    let x = xmlDoc.getElementsByTagName("CD");
    for (let i = 0; i < x.length; i++){
        document.write("<tr><td>");
        document.write("Artista: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
        document.write("</br>")
        document.write("Disco: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>");
</script>

Gostou deste artigo? Comente abaixo!

Publicado em

Classes JavaScript: Uma introdução – Parte 1

As classes foram introduzidas no JavaScript no ECMAScript 2016, são simplificações para as heranças baseadas em prototypes. A sintaxe para classes não introduz nenhum modelo novo de herança de orientação a objetos em JS, mas provém uma maneira mais simples e clara de criar objetos e lidar com herança. As Classes são funções especiais e a sintaxe de uma classe possui dois componentes: class expressions e class declarations.

Como declarar classes?

Você pode usar uma declaração de classe para definir uma class. Utilize a palavra-chave class seguida pelo nome. Por exemplo:

class Sayajin {
    constructor(nome, poder){
        this.nome = nome;
        this.poder = poder;
    }
}

Aqui, definimos que nosso Sayajin possui um nome e poder de luta.

Hoisting:

Precisamos ter em mente que existe uma diferença entre declarar funções e classes. Primeiro, precisamos declarar a classe, para depois acessá-la. Caso contrário, o código lançará uma exceção ReferenceError.

const kakarotto = new Sayajin(); // ReferenceError

class Sayajin {}

O que são Expressões de Classes?

São formas de definir classes. Elas podem possuir nomes ou ser anônimas. O nome de uma expressão de classe é local ao corpo da classe.

// Anônima
let Sayajin = class {
    constructor(nome, poder){
        this.nome = nome;
        this.poder = poder;
    }
};

// Nomeada

let Sayajin = class Sayajin {
    constructor(nome, poder){
        this.nome = nome;
        this.poder = poder;
    }
};

Definindo métodos:

O corpo de uma classe é a parte que está entre as chaves {}. No corpo, você define os membros da sua classe, como os construtores, ou os métodos. Os corpos das Declarações de Classes e Expressões de Classes são executados em modo estrito.

Construtor:

O constructor é um método especial para criar e iniciar um objeto criado pela classe. Só pode existir um método especial com o nome “constructor” dentro de cada classe. Utilize a palavra-chave super para chamar o construtor de uma classe pai.

Método:

Métodos são funções, mas seguem a lógica das propriedades. Você chama um método, e percebe que é parecido com acessar uma propriedade, mas você coloca () no final do nome do método, possivelmente com argumentos. No exemplo abaixo, definimos e usamos o método nivelPoder() na classe Sayajin. Nosso método nivelPoder nos traz uma string, contendo o nome do Sayajin e seu poder de luta:

nivelPoder(){
    return `${this.nome} possui um poder de luta de mais de ${this.poder}!!!`;
}

Static Method:

A palavra-chave static define um método estático de uma classe. Eles são chamados sem instanciação e não podem ser chamados quando a classe é instanciada. Aqui, definimos o método estático kaioken, que retorna o poder do Sayajin multiplicado por 10:

class Sayajin {
    constructor(nome, poder){
        this.nome = nome;
        this.poder = poder;
    }

    static kaioken(a){
        const kaiokenXDez = a.poder * 10;
        return kaiokenXDez;
    }

    nivelPoder(){
        return `${this.nome} possui um poder de luta de mais de ${this.poder}!!!`;
    }
}

const kakarotto = new Sayajin("Kakarotto", 8000);
console.log(kakarotto.nivelPoder()); //Undefined
console.log(Sayajin.kaioken(kakarotto)); // 80000

Gostou deste artigo? Comente abaixo!

Publicado em

ES6: Default Parameters e Rest Parameter

O ECMAScript 6 foi a primeira atualização significativa para a linguagem desde o lançamento do ES5, que foi lançado em 2019. O Babel é uma ferramenta utilizada para pré-processar JavaScript, e nos permite usar algumas novas funcionalidades que ainda são experimentais, ou seja, estão em ambiente de testes. Atualmente, o ECMAScript já está em fase de experimentos da sua versão 2021, mas hoje, falaremos de duas importantes implementações do ES6: Default Parameters e Rest Parameter:

Default Parameters:

Para nos auxiliar na criação de funções mais flexíveis, o ES6 nos trouxe uma nova funcionalidade chamada Default Parameters para ser utilizada nas nossas funções. Por exemplo:
let saudacao = (nome = "Anônimo") => "Olá " + nome;
console.log(saudacao());
console.log(saudacao("Lúcio"));

// Olá Anônimo

// Olá Lúcio
O Default Parameter entra em ação quando você não especifica o argumento, ou seja, é indefinido. No nosso exemplo acima, o parâmetro nome recebe o valor padrão “Anônimo” quando você não fornece um valor como argumento.
Você pode passar mais valores padrão para quantos parâmetros você desejar:
let incrementar = (numero, valor = 8) => numero + valor;

console.log(incrementar(5));

// 13
Como você pôde perceber, o valor 8 não foi sobrescrito, trazendo 13 como resultado.

Rest Parameter

O ES6 também nos trouxe uma possibilidade de passar o Rest parameter como parâmetros de função, tornando possível a criação de funções que recebem um número variável de argumentos e esses argumentos são armazenados em um array que pode ser acessado posteriormente de dentro da função. O rest parameter elimina a necessidade de verificar a “args” e permite aplicar os métodos map(), reduce() e filter() no array de parâmetros.
Por exemplo, faremos uma função de multiplicação que receberá qualquer número nos seus argumentos e realizará uma multiplicação.
let multiplica = (...args) => {
    return args.reduce((a, b) => a * b, 1);
}

console.log(multiplica(10, 2, 10));

// 200

Com isso, vimos dois dos mais importantes recursos do JavaScript moderno que muita gente ainda desconhece. É importante sempre atualizar os seus conhecimentos da linguagem, pois ela está sempre em constante evolução, com novas funcionalidades, novos frameworks e bibliotecas para tornar seu código mais limpo, rápido e eficiente.

Gostou deste artigo? Comente abaixo!

Publicado em

Criando localhost básico para testes

Neste artigo, mostrarei como criar um localhost básico para testes rápidos, utilizando Nodejs + expressjs.
Em redes de computadores, o Localhost se refere ao computador que o está executando, funcionando basicamente como um servidor virtual. Ele também possui um endereço ip, variando de 127.0.0.0 a 127.255.255.255. Com um localhost você pode:

  • Testar Velocidade: você pode testar a velocidade de execução de equipamentos. No windows, você pode usar o comando ping localhost ou ping 127.0.0.1 no prompt de comando;
  • Testar aplicações: Assim que você utiliza o localhost, sua máquina se transforma em um servidor simulado;
  • E muito mais!

E como podemos criar um localhost para testes?

Para isso, precisaremos do Nodejs. É com ele que rodaremos JavaScript no Server-side.Você pode realizar o download em: https://nodejs.org/en/

Também utilizaremos o framework Express.js. Para realizar o download, abra o terminal e digite:

$ npm install express --save

Após isso, dê o comando:

npm start

E os arquivos package e package.json serão criados!

Crie um arquivo chamado index.js e vamos lá!

Iniciando

Para iniciar, precisamos fazer uma requisição para o módulo express que foi baixado. No seu arquivo index.js, comece com isso:

const express = require('express');
const app = express();

Criando as constantes express e app, fazemos a requisição do módulo express.

Com o módulo express, foram baixadas as dependências do módulo. Você pode verificá-las na pasta public. Com o método use, podemos utilizar diretamente os arquivos da pasta public.

app.use(express.static('./public'));

Agora que já estamos utilizando as dependências do express, podemos criar um método para escutar a porta na qual o localhost será executado. usando o app.listen(), mostraremos no console.log a porta e a url do nosso localhost:

app.listen(3000, function () {
    console.log('Porta 3000');
    console.log('link: http://localhost:3000/index.html');
});

Agora que já sabemos qual é a porta e qual a url do nosso localhost, vejamos no navegador:

Com isso, verificamos que o nosso localhost para testes está funcional!

Gostou deste artigo? Comente abaixo e mostre-nos outras alternativas de localhost!

Publicado em

Criando Pokedéx com React – Parte 4

Na parte 4 do nosso tutorial, vamos fazer o componente DetailView. Você poderá conferir a parte 3 no link: https://www.mundojs.com.br/2020/04/03/criando-pokedex-com-react-parte-3/

DetailView:

Vá para a sua pasta componentes e crie um arquivo chamado DetailView.js. Também vá para a pasta styles e crie o arquivo DetailView.css.

Abra o DetailView.js e siga esses passos:

  1. Importe o React;
  2. Importe o DetailView css;
  3. Cria uma nova função chamada DetailView;
  4. Retorne uma section vazia com className=”detail-view”;
  5. Adicione elementos para mostrar os dados e a imagem;
  6. Exporte a nova função criada.
import React from 'react';
import './styles/DetailView.css';

const DetailView = () => {
    return (
        <section className="detail-view">
            <img className='sprite-image' />
            <div className='data-wrapper'>
                <h1 className='data-name'></h1>
                <p className="data-char"></p>
            </div>
        </section>
    )
}

export default DetailView;

No seu arquivo DetailView.css, adicione o seguinte código:

.detail-view {
    width: 50%;
    height: 100%;
    padding: 10px;
    background-color: #df095e;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sprite-image {
    width: 80%;
    height: 150px;
    margin: 10px auto;
    background-color: #585858;
    border: 15px solid #DEDEDE;
    color: #585858;
}

.data-wrapper {
    width: 80%;
    height: 110px;
    padding: 10px;
    margin: 0 auto;
    background-color: #585858;
    border-radius: 5px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.22);
    color: #FFF;
}

.data-name {
    margin: 0 0 5px;
}

.data-char {
    font-size: 10px;
}
  1. O sprite-image conterá o Sprite Pokemón;
  2. A classe data-chat refere-se às características do Pokemón (id, nome, tipo).

No App.js, importe o componente DetailView. Renderize-o colocando o componente DetailView como uma tag html dentro do elemento pai.

import React, { Component } from 'react';
import PokeList from './PokeList';
import DetailView from './DetailView';
import './styles/App.css';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">
        <PokeList />
        <DetailView />
      </div>
    );
  }
}

export default App;

E este será o resultado:

Está gostando desta sequência de artigos? Comente abaixo!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-4-72afd23905a6

Publicado em

O que é o Prettier?

O Prettier, segue o link oficial (https://prettier.io), é um formatador de código que visa ajudar os desenvolvedores a escrever aplicações que são mais fáceis de entender e mais uniformizadas entre as diversas formas de programar que existem. Atualmente ele fornece formatação de código para as seguintes linguagens:

Para que você entenda melhor o que ele faz, o Prettier reescreve seu código inteiro do zero, ele lerá linha a linha e fará alterações com base em padrões de formatação de espaço, comprimento de linha entre outras práticas comuns adotadas por diversos desenvolvedores (ou que ao menos deveria ser).

Por exemplo, pegue o seguinte código:

foo(arg1, arg2, arg3, arg4);

Ele se encaixa em uma única linha, para que fique como está. No entanto, todos enfrentamos essa situação:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

De repente, nosso formato anterior para a função de chamada é interrompido porque é muito longo. O Prettier fará o trabalho meticuloso de reimprimí-lo assim para você:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

O Prettier impõe um estilo de código consistente (ou seja, a formatação do código que não afeta o AST) em toda a sua base de código porque desconsidera o estilo original *, analisando-o e reimprimindo o AST analisado com suas próprias regras que assumem o comprimento máximo da linha em conta, agrupando o código quando necessário.

Você pode realizar o download por npm:

npm install --save-dev --save-exact prettier
# ou global
npm install --global prettier

O prettier-vscode pode ser instalado usando a barra lateral de extensão. Procure pelo Prettier – formatador de código. Também pode ser instalado usando ext install esbenp.prettier-vscode na paleta de comandos. Verifique seu repositório para configuração e atalhos.

Se você deseja ativar e desativar o formatador, instale vscode-status-bar-format-toggle.

Gostou deste artigo? Comente abaixo!

Publicado em

Baixando múltiplas imagens com JavaScript

Olá pessoal, neste artigo, ensinarei a baixar múltiplas imagens de um site, usando um algoritmo para busca e download das imagens. Utilizarei o navegador Google Chrome neste exercício.

Vamos começar!

Primeiramente, precisamos abrir o console do nosso navegador. Podemos abrí-lo clicando f12 e acessando o console. Vamos utilizar o site https://www.mundojs.com.br/ para realizar o teste de download das imagens.

Com o site acessado e o console aberto, vamos começar criando uma variável chamada images. Esta variável receberá um querySelectorAll de todas as tags “img”.

let images = document.querySelectorAll('img');

Pronto, já temos todas as tags “img” na nossa variável images. Agora, precisamos percorrer esta lista de tags para realizarmos o download. Vamos utilizar o for…of para isso:

Caso você não conheça o laço de repetição for…of, recomendo a leitura deste artigo, com explicação em vídeo sobre o for…of.

for (let i of images){
    
}

Dentro do nosso laço for…of, precisamos criar um elemento “a”. Esse elemento receberá o atributo src da imagem.

let a = document.createElement('a');
a.href = i.src;

E iremos mostrar o elemento no console.

console.log(i);

Feito isso, criaremos uma pop-up de download. O browser fará o download de cada imagem em cada link do elemento i.

a.download = i.src;

Feito isso, adicionaremos o nosso elemento “a” ao body, utilizando o método appendChild():

document.body.appendChild(a);

E adicionaremos o evento click() ao elemento a, para, então, desanexar o elemento “a” do body, utilizando o método removeChild():

a.click();
document.body.removeChild(a);

E com isso, está pronto o nosso algoritmo para download de múltiplas imagens. O código completo é este:

let images = document.querySelectorAll('img');

for (let i of images){
    let a = document.createElement('a');
    a.href = i.src;
    console.log(i);
    a.download = i.src;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

Abra o site do MundoJS, e insira este código no console. Aceite os múltiplos downloads no navegador e o código irá baixar as fotos disponíveis com a tag “img”.

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!

Publicado em

Criando Pokedéx com React – Parte 2

Na parte 2 do nosso projeto, construiremos o layout básico do nosso projeto. Você precisará da Parte 1 para dar sequência neste artigo.

Wireframe:

O React tem a ver com construção de componentes. Então, a melhor maneira de fazer isso é criar wireframes para mapeamento dos componentes a serem construídos. O nosso aplicativo principal terá dois componentes: a visualização do Pokemón e a visualização dos detalhes.

O Pokemon view conterá um componente chamado PokeList que envolverá 151 PokeCélulas (da primeira geração de Pokemón). Ao clicar em uma PokeCélula, a visualização dos detalhes mostrará as informações e a sprite do Pokemón selecionado.

Tipos de componentes:

O React possui 2 tipos básicos de componentes: stateful (com estado) e stateless (sem estado). Os componentes Stateful têm seu próprio estado. No nosso aplicativo, o componente APP será Stateful, pois manterá o estado dos dados do Pokemón.

Vamos construir!

Abra o App.js e exclua todo o conteúdo interno. A primeira etapa é importar o pacote React e desconstruir a classe Component.

import React, { Component } from 'react';

Agora, precisamos criar um novo aplicativo que estenda o Componente. Todos os componentes Stateful requerem dois métodos principais:

  1. Construtor: onde inicializamos o nosso estado;
  2. Render: onde escrevemos nosso jsx.

No construtor, precisamos chamar a função super(), pois estamos estendendo da classe componente. Além disso, precisamos declarar nosso estado inicial. Por enquanto, será um objeto vazio.

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
}

Adicionaremos o método render. Ele retorna a sintaxe jsx, que é uma mistura de JavaScript e HTML. O método render só pode retornar um elemento, portanto, criaremos um elemento pai e aninharemos filhos dentro dele. Se estamos retornando um elemento aninhado, envolveremos ele entre parênteses.

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">

      </div>
    );
  }
}

Feito isso, importaremos nossa folha de estilo na parte superior para adicionar o CSS do nosso componente e exportar toda a classe para que possamos usá-la em outros arquivos.

import React, { Component } from 'react';
import './styles/App.css'
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">

      </div>
    );
  }
}

export default App;

Abra o seu arquivo App.css e adicione o seguinte css:

.App {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 650px;
    height: 400px;
    padding-left: 10px;
    margin: 50px auto;
    background-color: #FE0065;
    border-radius: 10px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22), 0 18px 45px rgba(0, 0, 0, 0.22);
}

 

  1. Usamos o display: flex para separar as duas visualizações que construiremos;
  2. Fixamos a largura e altura para a tela do desktop;
  3. Aplicamos margem superior e inferior para separar a vista dos cantos e esquerda e direita automaticamente para coloca-los no meio;
  4. Aplicamos cor ao fundo.

Com isso, concluímos a Parte 2! Até a próxima!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-2-3d119b07f9e0

Publicado em

Criando Pokedéx com React – Parte 1

Olá pessoal, hoje criaremos uma pokedex usando React e utilizando o PokeAPI para obter os dados dos pokémon. Para isso, precisamos entender sobre o fetch. Caso você não conheça o assunto, sugiro a leitura deste artigo. Mãos à obra.

Instalando React App

No seu prompt de comando (CMD), coloque o seguinte comando:

npm install –g create-react-app

Isso instalará o react-app globalmente. Agora, precisamos criar a pasta do projeto. Utilize o comando:

create-react-app pokedex

E, criada a pasta do projeto, entraremos nela:

cd pokedex

Você encontrará uma pasta chamada src dentro do seu arquivo pokedex. Exclua o arquivo logo.svg, ele não será utilizado.

Dentro da pasta src, criaremos uma pasta chamada test e outra pasta chamada components. Dentro da pasta components, crie uma pasta chamada styles.

Mova o arquivo App.js para a pasta components, o arquivo App.css para a pasta style. Mova o arquivo App.test.js para a pasta test.

Vamos aos códigos:

Abrindo o arquivo App.js e reescreva o conteúdo com o código a seguir:

import React, { Component } from 'react';
import './styles/App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        Ola Mundo
      </div>
    );
  }
}

export default App;

Agora, abra o seu arquivo App.css e delete o seu conteúdo. Ele será reescrito posteriormente.

No arquivo index.css, reescreva o conteúdo com o código a seguir:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Avenir Next', sans-serif;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

Este arquivo contém todos os nossos estilos top-level. Removemos todas as margens das tags h1, h2, h3, h4 e p e também, queremos que os elementos tenham o tamanho do border-box.

No arquivo index.js, precisamos importar os componentes do React, ReactDOM e os componentes do nosso App.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

Esse arquivo diz para o DOM renderizar o componente App no elemento com o ID “root”. O nosso componente APP conterá todos os componentes, que serão construídos. Para iniciar a aplicação, inicie com o comando:

npm start

E isso iniciará a nossa aplicação no navegador, então, toda vez que criarmos alterações no projeto. Se acontecer algum erro, o navegador exibirá informações sobre o erro.

Gostou? Fique atento aos próximos artigos!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-1-e1ba0b9387a7