Semana Spring React - Episódio 1

Crie um app inédito para seu portfólio com as tecnologias mais demandadas do mercado

Realização

DevSuperior - Escola de programação

Objetivos do projeto para esta aula

Criar projetos backend e frontend
Salvar os projeto no Github em monorepo
Montar o visual estático do front end

AVISO: as aulas ficarão disponíveis somente até domingo às 23h59

AVISO: Instruções sobre certificado no Github do aqui

Checklist

Passo: preparação

Dica: extensões do VS Code

Conferir Node (16 LTS) e Yarn

Guia de instalação das ferramentas

node -v
yarn -v

Caso precise instalar o Yarn, faça o comando:

npm install --global yarn

Design Figma

https://www.figma.com/file/hpQuzpGHq2MmrI87xnfMoT/DSMovie1

https://www.figma.com/file/svCMhNqgpAZuN86w9IHJ4v/DSMovie2

https://www.figma.com/file/gEZYKqJJs2gEhIB6k9ksGB/DSMovie3

https://www.figma.com/file/hyovBMIxwrn2Bb5MZLrxHL/DSMovie4

Passo: criar projeto ReactJS

ATENÇÃO: esta será a estrutura de pastas que vamos criar:

yarn create react-app frontend --template typescript

OU:

npx create-react-app frontend --template typescript

IMPORTANTE: deletar subpasta .git

Lembrete: ver extensões e arquivos ocultos

Passo: criar projeto Spring Boot

Criar projeto Spring Boot no Spring Initializr com as seguintes dependências:
- Web
- JPA
- H2
- Postgres
- Security
Ajuste no arquivo pom.xml:

<plugin>
	<groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-resources-plugin</artifactId>
	<version>3.1.0</version>
</plugin>

Botão direito no projeto -> Maven -> Update project (force update)

Passo: salvar primeira versão no Github

Playlist de introdução e configuração do Git/Github

git config --global user.name <seu nome>
git config --global user.email <seu email>

git init

git add .

git commit -m "Project created"

git remote ...

git status

git remote -v

git branch -M main

git push -u origin main

Passo: "limpar" o projeto ReactJS

Deletar arquivos não usados
COMMIT: Project clean

Passo: adicionar Bootstrap e CSS ao projeto

Bootstrap

yarn add [email protected]

Arquivo index.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

:root {
  --color-primary: #4D41C0;
}

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

html, body {
    background-color: #E5E5E5;
}

a, a:hover {
  text-decoration: none;
  color: unset;
}

Arquivo index.tsx

import 'bootstrap/dist/css/bootstrap.css';
import './index.css';

COMMIT: Bootstrap

Passo: Componente Navbar

ATENÇÃO: no arquivo tsconfig.json: "baseUrl": "./src" (reinicie o app)

<header>
    <nav className="container">
        <div className="dsmovie-nav-content">
            <h1>DSMovie</h1>
            <a href="https://github.com/devsuperior" target="_blank" rel="noreferrer">
                <div className="dsmovie-contact-container">
                    <GithubIcon />
                    <p className="dsmovie-contact-link">/devsuperior</p>
                </div>
            </a>
        </div>
    </nav>
</header>

header {
    height: 60px;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
}

.dsmovie-nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.dsmovie-nav-content h1 {
    font-size: 24px;
    margin: 0;
    font-weight: 700;
}

.dsmovie-contact-container {
    display: flex;
    align-items: center;
}

.dsmovie-contact-link {
    margin: 0 0 0 10px;
    font-size: 12px;
}

COMMIT: Navbar

Passo: Rotas

Instalar React Router DOM

yarn add [email protected] @types/[email protected]

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import Listing from 'pages/Listing';
import Form from 'pages/Form';
import Navbar from "components/Navbar";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Listing />} />
        <Route path="/form">
          <Route path=":movieId" element={<Form />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

COMMIT: Routes

Passo: Tela de formulário

const movie = {
    id: 1,
    image: "https://www.themoviedb.org/t/p/w533_and_h300_bestv2/jBJWaqoSCiARWtfV0GlqHrcdidd.jpg",
    title: "The Witcher",
    count: 2,
    score: 4.5
};

<div className="dsmovie-form-container">
    <img className="dsmovie-movie-card-image" src="url" alt="The Witcher" />
    <div className="dsmovie-card-bottom-container">
        <h3>"The Witcher"</h3>
        <form className="dsmovie-form">
            <div className="form-group dsmovie-form-group">
                <label htmlFor="email">Informe seu email</label>
                <input type="email" className="form-control" id="email" />
            </div>
            <div className="form-group dsmovie-form-group">
                <label htmlFor="score">Informe sua avaliação</label>
                <select className="form-control" id="score">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div className="dsmovie-form-btn-container">
                <button type="submit" className="btn btn-primary dsmovie-btn">Salvar</button>
            </div>
        </form >
        <button className="btn btn-primary dsmovie-btn mt-3">Cancelar</button>
    </div >
</div >

.dsmovie-form-container {
    max-width: 480px;
    margin: 40px auto;
    padding: 20px;
}

.dsmovie-form {
    width: calc(100% - 20px);
}

.dsmovie-form-group {
    margin-bottom: 20px;
}

.dsmovie-form-group label {
    font-size: 12px;
    color: #aaa;
}

.dsmovie-form-btn-container {
    display: flex;
    justify-content: center;
}

.dsmovie-movie-card-image {
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.dsmovie-card-bottom-container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 20px 10px;
    border-radius: 0 0 8px 8px;
}

.dsmovie-card-bottom-container h3 {
    color: #4A4A4A;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    min-height: 40px;
}

.dsmovie-btn {
    background-color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    height: 40px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

COMMIT: Form layout

Passo: Pagination

<div className="dsmovie-pagination-container">
    <div className="dsmovie-pagination-box">
        <button className="dsmovie-pagination-button" disabled={true} >
            <Arrow />
        </button>
        <p>{`${1} de ${3}`}</p>
        <button className="dsmovie-pagination-button" disabled={false} >
            <Arrow className="dsmovie-flip-horizontal" />
        </button>
    </div>
</div>

.dsmovie-pagination-container {
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dsmovie-pagination-box {
    width: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dsmovie-pagination-box form {
    width: 100%;
    display: flex;
}

.dsmovie-pagination-button {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-primary);
    cursor: pointer;
}

.dsmovie-pagination-button svg {
    filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(7395%) hue-rotate(234deg) brightness(89%) contrast(92%);
}

.dsmovie-pagination-button:disabled {
    border: 1px solid #c2c2c2;
    cursor: unset;
}

.dsmovie-pagination-button:disabled svg {
    filter: none;
}

.dsmovie-pagination-container p {
    margin: 0;
    font-size: 12px;
    color: var(--color-primary);
}

.dsmovie-flip-horizontal {
    transform: rotate(180deg);
}

COMMIT: Pagination layout

Passo: MovieCard

MovieStars

<div className="dsmovie-stars-container">
  <StarFull />
  <StarFull />
  <StarFull />
  <StarHalf />
  <StarEmpty />
</div>

.dsmovie-stars-container {
    width: 130px;
    display: flex;
    justify-content: space-between;
}

.dsmovie-stars-container svg {
    width: 22px;
    height: auto;
}

MovieScore

<div className="dsmovie-score-container">
    <p className="dsmovie-score-value">{score > 0 ? score.toFixed(1) : '-'}</p>
    <MovieStars />
    <p className="dsmovie-score-count">{count} avaliações</p>
</div>

.dsmovie-score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dsmovie-score-value {
    margin: 0;
    color: #FFBB3A;
    font-size: 16px;
    font-weight: 700;
}

.dsmovie-score-count {
    font-size: 12px;
    color: #989898;
    margin: 4px 0 10px 0;
}

MovieCard

<div>
    <img className="dsmovie-movie-card-image" src={movie.image} alt={movie.title} />
    <div className="dsmovie-card-bottom-container">
        <h3>{movie.title}</h3>
        <MovieScore />
        <div className="btn btn-primary dsmovie-btn">Avaliar</div>
    </div>
</div>

COMMIT: MovieCard

Passo: Navegação dos botões

COMMIT: Navigation buttons

PARABÉNS!

Quero muito saber seu feedback
- O que você está achando da nossa abordagem?
- Você está conseguindo acompanhar?
- O que você está achando do evento?
Participe
- Comente no Instagram e marque a gente @devsuperior.ig
- Divulgue seu projeto no Linkedin e marque a DevSuperior

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Semana Spring React - Episódio 1

Realização

Objetivos do projeto para esta aula

AVISO: as aulas ficarão disponíveis somente até domingo às 23h59

AVISO: Instruções sobre certificado no Github do aqui

Checklist

Passo: preparação

Dica: extensões do VS Code

Conferir Node (16 LTS) e Yarn

Design Figma

Passo: criar projeto ReactJS

Passo: criar projeto Spring Boot

Passo: salvar primeira versão no Github

Passo: "limpar" o projeto ReactJS

Passo: adicionar Bootstrap e CSS ao projeto

Passo: Componente Navbar

Passo: Rotas

Passo: Tela de formulário

Passo: Pagination

Passo: MovieCard

MovieStars

MovieScore

MovieCard

Passo: Navegação dos botões

PARABÉNS!

About

Uh oh!

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
backend		backend
frontend		frontend
README.md		README.md

MarcoMoura21/dsmovie

Folders and files

Latest commit

History

Repository files navigation

Semana Spring React - Episódio 1

Realização

Objetivos do projeto para esta aula

AVISO: as aulas ficarão disponíveis somente até domingo às 23h59

AVISO: Instruções sobre certificado no Github do aqui

Checklist

Passo: preparação

Dica: extensões do VS Code

Conferir Node (16 LTS) e Yarn

Design Figma

Passo: criar projeto ReactJS

Passo: criar projeto Spring Boot

Passo: salvar primeira versão no Github

Passo: "limpar" o projeto ReactJS

Passo: adicionar Bootstrap e CSS ao projeto

Passo: Componente Navbar

Passo: Rotas

Passo: Tela de formulário

Passo: Pagination

Passo: MovieCard

MovieStars

MovieScore

MovieCard

Passo: Navegação dos botões

PARABÉNS!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages