Usando React para listar e filtrar receitas
help
{{apiData.me.position}}˚ no Ranking
profile pic account_circle
Login Comece agora
Iniciar Desafio Iniciar Desafio Fórum
{{apiData.participant_count}} Participantes
Criado Por: Created by Bruno Ventura
React
ES6
Javascript
Testes unitários

Usando React para listar e filtrar receitas

Neste desafio, você criará uma interface para listar e filtrar receitas.

Tópicos

Com esse desafio, você aprenderá:

  • React
  • ES6
  • Javascript
  • Testes unitários

Requisitos

Você precisará do Nodejs (LTS ou Current) instalado em sua máquina.

Detalhes

Dentro da pasta src, você encontrará a estrutura básica do projeto React. . Além disso, todos os arquivos necessários já estão criados assim como a estrutura em relação a HTML e CSS. Sua missão neste desafio será criar a lógica dos componentes para deixá-lo dinâmico.

Dentro da pasta sample_data, você terá uma listagem de receitas que deverá ser impressa na tela.

Tarefas

  1. Renderizar dinamicamente o componente RecipeItems para todos os elementos dentro dos dados de amostra;
  2. Ao digitar um texto no input dentro do component Navbar, os RecipeItems deverão ser filtrados, tanto pelo title quanto pelo ingredients;
  3. O filtro deverá ser case insensitive;
  4. (Bônus) fazer o highlight do texto pesquisado dentro do title e ingredients utilizando a tag <mark>.

Exemplo

Atenção

  • NÃO MUDE o nome dos componentes, eles são utilizados para a realização dos testes.
  • O componente App deve utilizar o state chamado searchString para realizar o filtro de RecipeItems, garantindo assim o funcionamento adequado dos teste.

Rodando a aplicação

Na primeira execução rodar o comando:

npm install

Para rodar a aplicação:

npm start
codenation code review

Para receber Code review, compartilhe o link abaixo com colegas ou em nosso fórum de discussões:

codenation code review

Para receber Code review, você precisa primeiramente finalizar o desafio.

{{apiData.participant_count}} Participantes

Para definir seu posicionamento no ranking do desafio, utilizaremos a nota mais alta que tiver conquistado nele. Caso outra pessoa participante obtenha a mesma nota que a sua, o critério de desempate será data e hora de envio da mais recente.

empty ranking Ainda não temos participantes suficientes para o ranking!
Aproveite e seja um dos primeiros a participar desse desafio.
CODE:NOME NOTA
{{candidate.position}}. {{candidate.name}} {{candidate.score.toFixed(2)}}%
Installing Node.js via package manager

[Inglês] Guide to how install Node.js

Javascript Eloquente

Esse livro é sobre JavaScript, programação e maravilhas digitais

React Official Documentation

[Inglês] Documentação oficial do React

O que é React

Introdução ao que é o React

Testing React with Jest and Enzyme

[Inglês] Como testar componenentes React com Jest e Enzyme

Criando componentes em React

Como começar seu desenvolvimento em React com componentes

ES6 - JavaScript aprimorado

Atualizações da linguagem JavaScript