Bem vindos!

Front-End Frameworks - Prof. Claudiany

 Agenda

1. Sobre a disciplina
2. Sobre a avaliação
3. Dúvidas
 Disciplina
Os principais tópicos a serem administrados são:
• Frameworks no desenvolvimento front-end;
• Os princípios do desenvolvimento utilizando framework;
• Formas de integração back-end e front-end.
 Disciplina
● Aulas expositivas;
● Atividades práticas em laboratório;
● Lista de atividades;
● Avaliação 1 e 2;
● Projeto.
 Avaliação
Os critérios de aprovação/reprovação são:
● Média Parcial maior ou igual a 7,0 (sete) => APROVADO
● Média Parcial menor a 7,0 (sete) ou maior ou igual a 4,0 (quatro) =>
AVALIAÇÃO FINAL
● Média Parcial menor a 4,0 (quatro) => REPROVADO

Os critérios de aprovação/reprovação para quem está em AVALIAÇÃO FINAL:

● Média Final maior ou igual a 5,0 (cinco) => APROVADO
● Média Final menor a 5,0 (cinco) => REPROVADO
Dúvidas
 Front-End Frameworks

● O que são Frameworks?

● Quais os principais Frameworks Front-End?

 Front-End Frameworks

Frameworks
● É uma estrutura que pode ser utilizada como base na criação de
softwares.
● Objetivo é ganhar tempo e ter qualidade de código.
● Um framework possui várias bibliotecas, que por sua vez, possui
várias funções, cujo objetivo é facilitar a implementação de
softwares.
 Front-End Frameworks
Frameworks mais utilizados
Java:
Javascript: ● Spring Framework
● Angular ● Hibernate
● Vue.js ● Quarkus
● React Js ● JSF — Java Server Faces
CSS: Python:
● Bootstrap ● Django
● Semantic UI ● CherryPy
● Skeleton ● Web2Py
● UIKit ● Flask
PHP: Agile:
● Laravel ● Scrum
● Symfony ● Kanban
● Phalcon ● Extreme Programming
● Zend (XP)
 Front-End Frameworks

Frameworks x Bibliotecas

● O que são bibliotecas?

 Front-End Frameworks

Biblioteca é uma coleção de funções cujo objetivo é resolver um

determinado tipo de problema.

React: Biblioteca JavaScript

Math: Biblioteca de funções matemáticas

Chart.js: Biblioteca para a criação de gráficos

 Front-End Frameworks

O que vamos usar para pôr a mão na massa

- Visual studio code
- NodeJS
- NPM
- GIT
- GITHUB
- JSON
- JavaScript
- Lógica de programação
 Front-End Frameworks

❖ Instalar os softwares que vamos precisar

 Front-End Frameworks

React é uma biblioteca JavaScript para construir interfaces de

usuário interativas.

Frameworks para React

● Next.js
● Remix
● Gatsby
 Front-End Frameworks

Objetivo

➔ Aprender Aprender React

➔ Utilizar um framework front-end
para React para criar uma aplicação
 Front-End Frameworks
React - https://react.dev/ 3 - execute o comando
1- Instalar o node.js
https://nodejs.org/en npx create-react-app nome-da-aplicacao

2 - Abrir o terminal e executar os

comandos
node -v
npm -v
 Front-End Frameworks
Como executar a aplicação que você criou com o create-react-app?
Navegar até o diretório onde sua aplicação foi instalada:

cd nome-da-aplicacao

Executar um comando do npm para ver sua aplicação ao vivo no

localhost:
npm start
Front-End Frameworks
 Front-End Frameworks

React - Estrutura de pastas

Front-End Frameworks
 Front-End Frameworks

Criar componente na app React

 Front-End Frameworks
Atividade

- Criar projeto React

- Criar componente
- Colocar projeto no github
- Enviar o link do github para o e-mail mp.claudiany@gmail.com
Front-End Frameworks
Front-End Frameworks

dançarina
Front-End Frameworks