면책 성명

Agradecimento Special para o Bootcamp daRocketSeatque ensinou essa base toda de React jápara muita gente.
Pressupoe se que vocêtenha o gerenciador de pacotesyarn instalado(ao 작곡가 do PHP e pip do Python) e tenhaum conhecimento b ásicoemJavascript ES6.Se não tiver、nãSe culpe、identifique o que não sabe e dáuma googlada🤓.
Sugestões e feedbacks sãmais do que muito bem vindos.

반응하다

React foi parido em 2013 pelo Facebook para melhorar a maneira como atéentão estavam sendo criadas interfaces com Javascript.
Foi o primeiro framework reativo e,atualmente,éomais popular na webe também a mesma forma de programmar pode ser usada em interfaces mobile,usando React Native.vers ão web do React é chamada de React DOM, porque manipula a a á rvore do DOM e renderiza os elementos com muito mais performance!교과 과정 논단.Sabe por què?
Porque vocêaltera os dados e a interface reage a isso.Ésério!Vale a pena aprender,então trago aqui um gostinho de como ele functiona.

Primeiros passos 회사

O básico do básico para começar com React,principalmente para quem veio do Javascript com JQuery como eu vim,éentender 3 besteirinhas que sãO a base toda do framework:

구성 요소

Propriedade

Estado

Com esses três játemos meio caminho andado,o restoélucro.

코모 로달 이소는 나비가도가 없나?

Se voc ès óquer ler de boas esse artigo e n ão 가장rodar projeto nenhum,pule direto paraComponentes.Sequiserrodar,vailevarmaisque 5분, erecomendoveressaintrodecomoconfigurar 웹packe babel.

Criando 프로젝트

Aqui vamos criar a 파스타 e inicializar o projeto com o 실.Vocêpode usar o npm,queéquase igual,mas Vocêconfere como usar um e outroaqui.
👨‍💻 에어 스테이션

mkdir react-7minutos
cd react-7minutos
yarn init -y

Babel e 웹 패키지

Esses ãos dois caras que vão pegar o teu có digo React,feito com todas as features mais modernas do Javascript e rodar naquele navegador bosta que só tem 2 고객 teus que ainda usam mas voc êprecisa dar suporte.

바벨:faz tradu de código javascript para código que o navegador entende

웹 패키지:usaostradutoresdecadatipodearquivo(.js,.css,.png,.json)paraimportá-los e converte los deuma forma differente.

캐리어: 이미지 캐리어, 바베타 캐리어, css 캐리어, 세인트폴 페로 패키지para carregar os arquivos nas aplica öes

Adicionando dependencias e configurando os dois:
👨‍💻 에어 스테이션

yarn add babel-cli @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli

👨‍💻 에어 스테이션

yarn add babel-loader css-loader style-loader file-loader

Criando arquivos de configuração
📄 ./바벨.구성회사 명
Esse arquivo vai dizer para o babel quais são as préconfiguraões que ele vai usar

module.exports = {
  presets : [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
};

📄 ./웹 패키지.구성회사 명
Esse arquivo adiciona as regras para o webpack saber quem vai fazer a conversão de cada tipo de arquivo

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
        ]
      },
      {
        test: /.*\.(gif|png|jpe?g)$/i,
        use: {
          loader: 'file-loader',
        }
      }
    ]
  },
};

Rodar comando 패키지 em modo dev, aqui ele vai jogar uma c*ralhada de coisas para o arquivo/공용/번들js.Isso tudoéo que ele faz para carregar e traduzir cada arquivo.
👨‍💻 에어 스테이션

yarn webpack --mode development

Para que webpack fique monitorando arquivos e jáfaça automaticamente a traduço de cada um,pode ser usado webpack dev server como dependencia de dev.
👨‍💻 에어 스테이션

yarn add webpack-dev-server -D

E agora sim,rodar o webpack dev server em modo dev.
Automaticamente um servidor na porta 8080éativado,e vocêpode ver cada alteraèo do código pelo navegador,com live reload,acessando localhost:8080.
👨‍💻 에어 스테이션

yarn webpack-dev-server --mode development

A partir daqui táclear para iniciar um novo projeto.
참고로react 응용 프로그램을 만듭니다.gatsby e todos os outros geradores de boilerplate criamuma estrutura semelhante a essa para rodar react no navegador e ficar humanamente fácil de escrever código.Sócoisa chata,mas tem que fazer né.Bora pro básico dos 구성 요소.

구성 요소

Aqui vocêvai veruma sintaxe parecida com HTML,mas é escrita nos có digos Javascript는 확실히 반응할 것이다.chamadade JSX e praticamente toda tag HTML tem uma irmã-gemea em JSX.
Vou mostrando alguns arquivos e como eles estão sendo montados.
📄 ./src/인덱스.회사 명
o método render que faz a mágica,ele que vai montar a página como ela deve ser a partir do que for programado em JSX.Começamos aqui com um Hello World numa tag h1.

import React from 'react';
import { render } from 'react-dom';

render(
  <h1>Hello World</h1>, document.getElementById('app')
)

_maboa prática sempre isolar os components,cada um em um arquivo.
📄 ./src/App.회사 명
Criamos o componente chamado 응용 프로그램, em forma de uma fun ão que returnaum JSX, igual ao que foi feito antes.

import React from 'react';

function App() {
  return <h1>
    Hello World
  </h1>
}

export default App;

📄 ./src/인덱스.회사 명
Aqui nós trocamos o componente direto,pelo novo componente personalizado 응용 프로그램.

import React from 'react';
import { render } from 'react-dom';

import App from './App'

render(
  <App />, document.getElementById('app')
)

vscode가 없습니다.ajudateressasconfiguraçes에arquivo 설정이 없습니다.json,para ajudar o emmet a completar JSX em arquivos.js.
📝 vscode 코드📄 설치.json

"emmet.syntaxProfiles": {
  "javascript": "jsx"
},
"emmet.includeLanguages": {
  "javascript": "javascriptreact"
},

Para ficar mais organizado,podemos criar uma pasta Exclusive a Para componentes,como um componente de cabeçalho.Esse component e vai ajudar a reutilizar Esse elemento em cada uma das páginas que forem criadas.
📄 ./src/components/Header.회사 명
Aqui ainda foi alterado o export default para antes da funão,para ficar mais enxuto.Resultadoéo mesmo.

import React from "react";

export default function Header() {
  return <h1>ReactJS</h1>;
}

Para adicionar mais de um componente dentro de outro componente,pode ser usado o fragment._maregra que o React tem de que cada component pode returnar apenas um elemento,ou seja,uma tag que abre e fecha.O세션 vai FUNCIONOR como uma tag em branco.
📄 ./src/components/App.회사 명
Não faz muito sentido adicionar dois headers igais em uma página,maséum exemplo,Não seja cricri.

import React from 'react';

import Header from './components/Header';
function App() {
  return <>
    <Header/>
    <Header/>
  </>
}

export default App;

✨ Resultado 결과

Propriedades(도구)

Atéagora tudo fácil.Sóum 제목 comum texto.Sóque nem todo componenteéessa belezinha né?
Aquique entram은 propriedades입니다.São formas de passar informaçes para cada componente,para ter uma maneira de não deixar eles tão estáticos,como esse que criamos com o texto ReactJS dentro dele.
헤딩이 없습니다. faz sentido que a gente tenhaum t ítulo nele, e cada component e possa chamar o t ítulo conforme for a página.
📄 ./src/components/App.회사 명
Adicionamos um atributo na tag Header,na chamada do componente,chamado title(título).Ébem institivo e fica parecendo uma tag html comum,e não JSX.

import React from 'react';

import Header from './components/Header';
function App() {
  return <>
    <Header title="Home"/>
    <Header title="Área do assinante"/>
  </>
}

export default App;

📄 ./src/components/Header.회사 명
Dentro do componente,ele pode receber com par–metro um elemento que chamamos de props,mas aqui poderia ser qualquer nome para a variável.Dentro dessa 도구,est áo title que nós passamos na chamada do componente.Para usálo no componente,ésóusar{chaves}.

import React from "react";

export default function Header(props) {
  return <h1>{props.title}</h1>;
}

Fica legal e mais limpo sótrazer a propriedade que vai ser usada,usando destruturaão.

import React from "react";

export default function Header({ title }) {
  return <h1>{title}</h1>;
}

✨ Resultado 결과

Todo componente React tem uma propriedade chamanda children,que nada maisédo que o conteúdo dentro da tag.
📄 ./src/components/App.회사 명
Dentro do Header comtitleHome adicionamos uma lista<ul>com 3<li>s.E o segundo Header continua como estava.

import React from 'react';

import Header from './components/Header';
function App() {
  return <>
    <Header title="Home">
      <ul>
        <li>Solução</li>
        <li>Clientes</li>
        <li>Contato</li>
      </ul>
    </Header>
    <Header title="Área do assinante"/>
  </>
}

export default App;

📄 ./src/components/Header.회사 명
구성 요소가 없습니다. chamomos a propriedade children e usamos dentro do componente.Coloquei aqui também um header do html5 para circundar o conteúdo,para ficar no padrão.

import React from "react";

export default function Header({ title, children }) {
  return (
    <header>
      <h1>{title}</h1>
      {children}
    </header>
  );
}

✨ Resultado 결과

Estado e imutabilidade 회사

Montamos o componente de Header,adicionamos uma propriedade de título para mudar o<h1>em cada um.Agora nós vamos criar mais um Header que lista alguns livros,que estãem um array.Isso tudo para entender o queéo estado e porque eleétão mágico.
📄 ./src/components/App.회사 명
Aqui importamos o useState da lib do React para trabalhar com o estado.Ele returna um array com dois elementos,uméo próprio valor e o segundoéuma funão para alterar esse valor.
Aqui chamamos de books,e setBooks,porque faz mais sentido,mas pode ser usado qualquer nome.
구성 요소 제목 de livros가 없습니다. nós pegamos esses livros(books)e fazemosum map para percorrer todo o array e trazer o<li>formatadinho com o nome do livro

import React, { useState } from "react";

import Header from './components/Header';
function App() {
  const [ books, setBooks ] = useState([
    'LOTR: a sociedade do anel',
    'LOTR: as duas torres',
    'LOTR: o retorno do rei',
  ])
  return <>
    <Header title="Home"/>
    <Header title="Livros">
      <ul>
        {books.map( book => (
            <li key={book}>{book}</li>
          )
        )}
      </ul>

    </Header>
    <Header title="Área do assinante"/>
  </>
}

export default App;

✨ Resultado 결과

🙉 Tá,mas uma lista estática eu jásabia adicionar,isso a gente jáfez antes.
Calma,agora que entra a mágica.Vamos adicionar um botão para adicionar um novo livro e ver ele atualizar na tela.
📄 ./src/components/App.회사 명
Adicionamosum bot ão que tem on Click chamando 재미있는 Criamos 매뉴얼입니다.Essa função usa o método useState para alterar o estado,e aísim,o React járenderiza automagicamente na tela o novo livro adicionado.
Cada livro tem 시간 스탬프 só para diferenceiarmos Cada novo livro adicionado.

import React, { useState } from "react";

import Header from './components/Header';
function App() {
  const [ books, setBooks ] = useState([
    'LOTR: a sociedade do anel',
    'LOTR: as duas torres',
    'LOTR: o retorno do rei',
  ]);

  function handleAddBook() {
    setBooks(
      [
        ...books,
        `Livro (${Date.now()})`
      ]
    );
    console.log(books);
  }

  return <>
    <Header title="Home"/>
    <Header title="Livros">
      <ul>
        {books.map( book => (
            <li key={book}>{book}</li>
          )
        )}
      </ul>
      <button type='button' onClick={handleAddBook}>Adicionar livro</button>
    </Header>
    <Header title="Área do assinante"/>
  </>
}

export default App;

✨ Resultado 결과

Pronto,agora vocêjápode:

🗣️ Correr pros teus amigos e dizer que sabe React

🕴️ Adicionar nova competência no LinkedIn

✅ Fazer um projeto cliche deTo do List,ContadorouCalculadora.

🙈 Publicar um curso de primeiros passos no Udemy

🤓 Começar a estudar React(a dicaéostarter da RocketSeat,que além da didática serótima em vídeo tambémé0800)