#VemProReact #1

Especial DHO

#VemProReact

Quem sou eu?

Daniel Xavier

https://www.linkedin.com/in/danieljxavier/

  • Especialista em JavaScript
  • Um cara que acredita que um grande desenvolvedor é muito mais do que alguém que escreve códigos
  • Princípio de desenvolvimento: KISS

O que importa aqui:

Sou o carinha que vai te ajudar a aprender React!   \o/

#VemProReact

React

É de comer?

#VemProReact

React

É de comer?

#VemProReact

React

É uma linguagem de programação?

#VemProReact

React

É uma linguagem de programação?

#VemProReact

React

É um framework?

#VemProReact

React

Ou é uma library?

#VemProReact

React

É uma library!

"Uma biblioteca JavaScript para criar interfaces de usuário"

Fonte: https://pt-br.reactjs.org/

#VemProReact

Momento "Uai É"?

Library: É um conjunto de funções que pode ser usado onde e quando quiser

Framework: É um conjunto de funções que deve ser usado de uma forma específica

Na prática: uma library, geralmente, te dá mais liberdade no desenvolvimento

#VemProReact

React

Pra que serve?

#VemProReact

React

Na teoria:

Para criar uma página web interativa e impressionar os coleguinhas

#VemProReact

React

Na prática:

Para desenvolver sistemas incríveis, complexos e se divertir com isto

#VemProReact

React

Consigo fazer tudo isto só com HTML, CSS e JavaScript?

#VemProReact

React

Claro que SIM!

WTF?!?

#VemProReact

React

Então, por que usar React?

#VemProReact

React

Componentes?

#VemProReact

React

Componentes?

Sim!

Você pode dividir sua aplicação da maneira que achar melhor, facilitando a manutenção

#VemProReact

React

Controle de estado?

#VemProReact

React

Sim!

Você pode dar inteligência para sua aplicação e poupar muito esforço

Controle de estado?

#VemProReact

React

Reatividade?

#VemProReact

React

Reatividade?

Sim! Claro!

Você pode compartilhar informações entre diversas partes da aplicação e atualizar todas de uma vez só

#VemProReact

React

Mercado?

#VemProReact

React

Mercado?

Sim!

O mercado Front End está em alta e deve continuar assim por um bom tempo

#VemProReact

React

Mercado?

Sim!

O mercado Front End React está em alta e deve continuar assim por um bom tempo

#VemProReact

React

O que eu preciso para começar?

#VemProReact

React

  • Dominar HTML
  • Dominar JavaScript
  • Aprender o básico de CSS
  • Saber se virar com o npm
  • Saber usar o Google (de preferência, "in English")

#VemProReact

React

  • Dominar HTML
  • Dominar JavaScript
  • Aprender o básico de CSS
  • Saber se virar com o npm
  • Saber usar o Google (de preferência em inglês)

Na verdade, você só precisa ter:

UM EDITOR DE TEXTO E VONTADE DE APRENDER

#VemProReact

React

Bó começar então!

#VemProReact

HTML

  • É uma linguagem de programação marcação
  • É a base de qualquer projeto web
  • É a estrutura da sua página

HyperText Markup Language

Referências para estudos:

https://www.w3schools.com/html/

https://developer.mozilla.org/pt-BR/docs/Web/HTML

#VemProReact

HTML

Exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>#VemProReact</title>
    </head>
    <body>
        <h1>#VemProReact #1</h1>
        <p>Esta é nossa primeira aula!</p>
    </body>
</html>

#VemProReact

CSS

  • É uma linguagem extremamente simples
  • Trabalha com a estrutura de chave/valor
  • É o que vai definir os estilos da sua aplicação

Cascading Style Sheets

Referências para estudos:

https://www.w3schools.com/css/

https://developer.mozilla.org/pt-BR/docs/Web/CSS

#VemProReact

CSS

Exemplo:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

#VemProReact

JavaScript

  • É uma linguagem de programação interpretada
  • É baseada em objetos
  • É a principal linguagem das aplicações web modernas, inclusive React

Referências para estudos:

https://www.w3schools.com/js/

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

#VemProReact

npm 

  • É um enorme repositório de códigos
  • É um gerenciador de pacotes JavaScript
  • Permite instalarmos bibliotecas auxiliares e vincularmos aos nossos projetos

Node Package Manager

Referências para estudos:

https://docs.npmjs.com/

#VemProReact

React

Falamos de HTML, CSS, JavaScript, npm...

Orrax, mas este curso não era de React?

Calma que eu consigo explicar!

#VemProReact

React

Resumindo e traduzindo para um português simples e claro:

Tudo isto faz parte do ecossistema React!

Com o npm, vamos instalar a biblioteca React (e outras), que por sua vez, utiliza HTML, CSS e JavaScript

#AgoraTudoFazSentido

#VemProReact

React

O que faz isto funcionar no React é o JSX

#VemProReact

JSX

const element = <h1>#VemProReact</h1>;
  • É uma definição de sintaxe
  • É uma "linguagem" de templates
  • Não é suportada pelos browsers

Na prática, visualmente, é uma mistura louca de variáveis e funções JavaScript com tags HTML

#VemProReact

Momento "Uai É"?

Existe um pacote npm chamado create-react-app que cria toda a estrutura inicial de um projeto React

https://github.com/facebook/create-react-app

#VemProReact

README.md

create-react-app

#VemProReact

README.md

É o cartão de visitas do projeto. Contém informações sobre o projeto, instruções para instalação, execução e qualquer outra informação relevante para quem estiver vendo o projeto pela primeira vez

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `npm test`

#VemProReact

Dúvidas?

#VemProReact

Obrigado!

#VemProReact #1 DHO

By Softplan Planejamento e Sistemas

Made with Slides.com

#VemProReact #1 DHO

  • 75

More from Softplan Planejamento e Sistemas