leticiacamposs2 / curso-react-bootcamp Goto Github PK

Crie uma aplicação na qual o usuário vai inserir um texto e clicar em pesquisar, abaixo deverá exibir 1 gif relacionado ao que foi digitado no campo.

Api: https://developers.giphy.com/docs/api

⚡️ Projeto final de curso:

Currículos de devs para speed hiring (uma solução para contratação)

Principais funcionalidades:

• Listagem de eventos/bootcamps/workshops realizados;
• Listagem de participantes de cada evento;
• Visualização de CV de participantes;
• Cadastro de empresa;
• Cadastro de participante do evento;
• Tratamento de dados sensíveis, permitindo a visualização dos CV das participantes através de um código de acesso;

Projeto em andamento, sendo desenvolvido no seguinte repositório:
https://github.com/React-Bootcamp-WoMarkersCode/cv-speed-hiring

O objetivo do desafio é criar uma aplicação que lista os filmes do Studio Ghibli.

link da api é esse:
https://ghibliapi.herokuapp.com

Você vai ver que existem vários recursos para obter diferentes tipos de dados.

Para este desafio você deverá consumir o seguinte endpoint API:
https://ghibliapi.herokuapp.com/films

A atividade é sobre criar rotas no React, sendo que as rotas são aqueles caminhos na URL de um site que nos leva para outra página.

Exemplo:
Temos o site https://www.livup.com.br quando clicamos no botão "Conheça nosso cardápio" a URL do site muda para https://www.livup.com.br/nosso-cardapio. Nesse caso, colocamos um evento de clique no botão para ele redirecionar o site para a rota "/nosso-cardapio" na qual ele vai rederizar outro componente na tela.

Nessa atividade será preciso ler a documentação do react-router e ler um artigo que explica como criar um projetinho simples usando o create-react-app.

Siga as instruções da documentação -> https://redux.js.org/basics/example/

Projeto base para construir o todolist -> https://github.com/brenndafarinha/todo-list-challenge

Seguir o artigo: Formik hooks — API oficial! 🎉

https://medium.com/@yuriwtoledo/formik-hooks-api-oficial-a79f803970a1

Criar um formulário de CEP que preenche todos os campos quando a API responde o endereço.

Refatorar o fonte "me-transforme-em-função.js" seguindo boas práticas e técnicas de hooks.

Código a ser refatorado:

`
import React, { Component } from 'react';
import { Form, Button } from 'semantic-react-ui'

class ExampleComponent extends Component {

state = {
    showForm: false,
    email: "",
    name: this.props.name
}

componentDidMount() {

    /* algum fetch de dado que a gente quer rodar somente uma vez
    ....................
    */
}

handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}

handleSubmit = (e) => {
    e.preventDefault()

    /* executa alguma request 
    ....................
    */
}


toggleShowForm = (e) => {

    this.setState({
        showForm: !this.state.showForm,
    })
}

// RENDERS ------------------------------

renderForm() {
    return <Form onSubmit={this.handleSubmit}>
        <Form.Input name="name" value={this.state.name} onChange={this.handleFormChange} />
        <Form.Input name="email" value={this.state.email} onChange={this.handleFormChange} />
        <Form.Button type="submit">Submit!</Form.Button>
    </Form>
}

// RENDER --------------------------------
render() {

    return (
        <div >
            {this.state.showForm ? this.renderForm()
                : <Fragment>
                    <h3>Hi, {this.state.name}</h3>
                    <Button onClick={this.toggleShowForm} >Enter Email Address!</Button>
                </Fragment>
            }
        </div>
    )
}

}

export default ExampleComponent
`

Fazer um formulário de cadastro de alunas e validar se todos os campos estão preenchidos antes de dar submit, caso não esteja deve exibir a mensagem para o usuário.

Formulário de exemplo, proposto na aula 3: