Olá React

Introdução

Primeiros componentes

Revisão tipo de dados

Revisão Let/Const

Revisão Mod 1

Agenda

ReactJS

  npm install -g create-react-app

  create-react-app meu-projeto

 cd meu-projeto

npm start

componentes

class Welcome extends React.Component {
  render() {
    return <h1>Oi pessoa, bem vinda ao React!</h1>;
  }
}

componente como classe de um elemento

class Welcome extends React.Component {
  render() {
    return (
      <div>
        <h1>Oi pessoa</h1>
        <p>Bem vindo ao React!</p>
      </div>
    );
  }
}

componente como classe com vários elementos

compondo componentes

criando um sticker

import React, { Component } from 'react';

class Sticker extends Component {
  render() {
    return (
      <div>
        <img
          src={
            "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
          }
        />
      </div>
    );
  }
}

export default Sticker;

criando um sticker

renderizando vários stickers

 import Sticker from './Sticker'

 ...
 render() {
   return(
     <div>
       <Sticker>
       <Sticker>
       <Sticker>
     </div>
   )
 }

renderizando stickers

variáveis

let string = 'texto';

let numero = 206;

let booleano = true;

let objeto = {
  nome: 'Cicero',
  idade: 24,
  vivo: true,
};

let array = [ // Coisas que eu gosto
  'Anime',
  'Jogos',
  'Musica',
];

Variavel Local

let nome = 'Cicero';

Variável Global

let sobrenome = 'Matos';

renderIdade() {
  return <p> 24 anos </p>
}

Método

render

  import React, { Component } from 'react';
	
  let sobrenome = 'Matos';
  class Sticker extends Component {
    renderIdade() {
      return <p>24 anos</p>
    }

    render() {
      let nome = 'Cicero';
      
      return (
       <div className="App">
         <p>{nome}</p>
         <p>{sobrenome}</p>
         <p>{this.renderIdade()}</p>
        </div>
      );
    }
  }

  export default Sticker;