llucasmota/desafio-bootcamp-facebook-clone

Projeto referente ao desafio do bootcamp da rocketseat que visa criar uma das telas do facebook

Desafio 4: Introdução ao React

“Sucesso não é o resultado de um jogo, mas o destino de uma jornada”!

Sobre o desafio   |    Entrega   |    Licença

🚀 Sobre o desafio

Crie uma aplicação do zero utilizando Webpack, Babel, Webpack Dev Server e ReactJS.

Nessa aplicação você irá desenvolver uma interface semelhante com a do Facebook utilizando React.

As informações contidas na interface são estáticas e não precisam refletir nenhuma API REST ou back-end.

Tela da aplicação

O layout não precisa ficar exatamente igual, você pode utilizar sua criatividade para modificar da maneira que preferir.

O mais importante é que todos elementos apareçam em tela.

O layout da aplicação está nesse link que pode ser aberto por essa ferramenta gratuita e online: https://www.figma.com/

Componentes

Na imagem abaixo destaquei cada componente que você criará e abaixo da imagem está a descrição e responsabilidades de cada um:

Header (Amarelo): Responsável por exibir a logo e o link para acessar o perfil;

PostList (Verde): Responsável por armazenar os dados da listagem de post, esses dados devem ficar dentro do state do componente e não em uma variável comum, por exemplo:

class PostList extends Component {
  state = {
    posts: [
      {
        id: 1,
        author: {
          name: 'Julio Alcantara',
          avatar: 'http://url-da-imagem.com/imagem.jpg',
        },
        date: '04 Jun 2019',
        content: 'Pessoal, alguém sabe se a Rocketseat está contratando?',
        comments: [
          {
            id: 1,
            author: {
              name: 'Diego Fernandes',
              avatar: 'http://url-da-imagem.com/imagem.jpg',
            },
            content: 'Conteúdo do comentário',
          },
        ],
      },
      {
        id: 2,
        // Restante dos dados de um novo post
      },
    ],
  };
}

Post (Vermelho): Responsável por exibir os dados do post, esses dados devem vir através de uma propriedade recebida do componente PostList, ou seja, lá no PostList você terá algo assim:

posts.map(post => <Post key={post.id} data={post} />);

Comment (Azul): Responsável por exibir um comentário. Os dados do comentário virão por uma propriedade do componente. Dentro do componente Post você terá um novo .map para listar os comentários do post:

data.comments.map(comment => <Comment key={comment.id} data={comment} />);

Instruções de uso do projeto:

Como instalar as dependências do projeto:

• Executar na raiz do projeto o comando: yarn ou yarn install.

Como iniciar a aplicação:

• Executar o seguinte comando na raiz do projeto: yarn dev.
• Para acessá-la: localhost:8080.

Como executar o empacotamento do webpack?

• Executar o seguinte comando na raiz do projeto: yarn build.

📅 Entrega

Esse desafio não precisa ser entregue e não receberá correção, mas você pode ver o resultado do código do desafio aqui. Após concluir o desafio, adicionar esse código ao seu Github é uma boa forma de demonstrar seus conhecimentos para oportunidades futuras.

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com ♥ by Rocketseat 👋 Entre na nossa comunidade!