#VemProReact #2

#VemProReact

#VemProReact #1

#VemProReact

create-react-app

A estrutura do projeto

#VemProReact

create-react-app

node_modules

#VemProReact

node_modules

Neste diretório estarão os pacotes npm instalados no projeto. Inclusive o React!

#VemProReact

create-react-app

public/index.html

#VemProReact

public/index.html

Este é o arquivo que o browser irá interpretar primeiro. Contém configurações iniciais da página e um container onde o React será "executado".

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

#VemProReact

src/App.css

create-react-app

#VemProReact

src/App.css

Contém os estilos (CSS) do component App

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#VemProReact

src/App.js

create-react-app

#VemProReact

src/App.js

Este é um componente React

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

#VemProReact

src/App.test.js

create-react-app

#VemProReact

src/App.test.js

Contém um exemplo de teste unitário do component App

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

#VemProReact

src/index.css

create-react-app

#VemProReact

src/index.css

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

Contém os estilos (CSS) gerais da aplicação

#VemProReact

src/index.js

create-react-app

#VemProReact

src/index.js

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

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

serviceWorker.unregister();

Este é o arquivo que irá "instanciar" o React e aplicá-lo ao container que vimos no index.html

#VemProReact

package.json

create-react-app

#VemProReact

package.json

{
  "name": "vem-pro-react-2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

...
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Este arquivo contém as informações do projeto, dependências de pacotes, scripts que podem ser executados e outras configurações

#VemProReact

yarn.lock

create-react-app

#VemProReact

yarn.lock

Contém todos os detalhes dos pacotes instalados no projeto, bem como suas dependências

 optionalDependencies:
    fsevents "2.0.6"

react@16.8.6:
  version "16.8.6"
  resolved "https://artifactory.softplan.com.br/artifactory/api/npm/npm/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
  integrity sha1-rWw6lhT9Ok6e9REX9U2IjaAfK74=
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.2"
    scheduler "^0.13.6"

read-pkg-up@^2.0.0:
  version "2.0.0"

#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

Perceberam o HTML, CSS e JavaScript juntos?

create-react-app

#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

Dúvidas?

#VemProReact

Dever de casa!

Alterar o título da página para "#VemProReact"

Fazer o logo do React girar para o outro lado e com o dobro da velocidade

Dividir o App.js em pelo menos 3 componentes, mantendo o funcionamento da aplicação

Estudar o conceito de Arrow Functions e trazer o que entendeu para o nosso próximo encontro

#VemProReact

Obrigado!