Projeto desenvolvido na missão ReactJS no NLW #06

Last update: Jul 26, 2022

Letmeask

NLW Together 06 Stars License

Letmeask


🧪 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

🚀 Como executar

Clone o projeto e acesse a pasta do mesmo.

$ git clone https://github.com/rocketseat-education/nlw-06-reactjs
$ cd nlw-06-reactjs

Para iniciá-lo, siga os passos abaixo:

# Instalar as dependências
$ yarn

# Iniciar o projeto
$ yarn start

O app estará disponível no seu browser pelo endereço http://localhost:3000.

Lembrando que será necessário criar uma conta no Firebase e um projeto para disponibilizar um Realtime Database.

💻 Projeto

Letmeask é perfeito para criadores de conteúdos poderem criar salas de Q&A com o seu público, de uma forma muito organizada e democrática.

Este é um projeto desenvolvido durante a Next Level Week Together, apresentada dos dias 20 a 27 de Junho de 2021.

🔖 Layout

Você pode visualizar o layout do projeto através do link abaixo:

Lembrando que você precisa ter uma conta no Figma.

📝 License

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


Feito com 💜 by Rocketseat 👋🏻 Participe da nossa comunidade

GitHub

https://github.com/rocketseat-education/nlw-06-reactjs
Comments
  • 1. React Router V5 vs V6 - diferenças nas declarações de: BrowserRouter, Switch, useHistory, exact entre outras

    Na aula 02 encontrei um problema com a versão do react-router-dom e como tratar as rotas. Abri um request #7 e lá enviei a solução. Porem, por conta dessa nova versão outras diferenças de como fazer as declarações mudaram também, então segue aqui.


    <Switch> tornou: <Routes>

    // v5
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/profile" component={Profile} />
    </Switch>
    
    
    // v6
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/profile" element={<Profile />} />
    </Routes>
    

    Na v6, você não precisa mais usar um exact


    useHistory tornou: useNavigate

    // v5
    import { useHistory } from 'react-router-dom';
    
    function MyButton() {
      let history = useHistory();
      function handleClick() {
        history.push('/home');
      };
      return <button onClick={handleClick}>Submit</button>;
    };
    
    
    // v6
    import { useNavigate } from 'react-router-dom';
    
    function MyButton() {
      let navigate = useNavigate();
      function handleClick() {
        navigate('/home');
      };
      return <button onClick={handleClick}>Submit</button>;
    };
    

    Na v6 não se faz necessário o uso do .push ou do .replace

    // v5
    history.push('/home');
    history.replace('/home');
    
    // v6
    navigate('/home');
    navigate('/home', {replace: true});
    

    Essas foram as soluções que encontrei em dezembro/2021. fontes: https://ichi.pro/pt/o-que-ha-de-novo-no-roteador-react-v6-54507686506060 e https://dev.to/arunavamodak/react-router-v5-vs-v6-dp0

    Reviewed by huannvictor at 2021-12-14 13:59
  • 2.

    Olá pessoal, Estava dando uma olhada em alguns NLW passados e resolvi revê-los para fixar os conhecimentos. Porém, na aula 03, em pages/Room.tsx, ao inserir o componente RoomCode, retorna um erro dizendo que o tipo 'string | undefined', não foi setado para 'string'. Se no componente RoomCode, eu coloco na tipagem que o code é do tipo string | undefined, o erro na página Room.tsx é corrigido, mas ocorre um erro no componente RoomCode no navigator.clipboard. Alguém pode dar uma luz?

    https://gist.github.com/walterjaworski/ea7bd2ca88fb02406041c61caddea5c2

    Reviewed by walterjaworski at 2021-12-28 19:57
  • 3. Aula 02 - react-router-dom updated

    A biblioteca de rotas react-router-dom sofreou algumas alterações na forma de fazer as rotas.

    Versão descontinuada:

    import { BrowserRouter, Route } from 'react-router-dom'
    
    return (
      <BrowserRouter>
        <AuthContextProvider>
          <Route path="/" exact component={Home} />
          <Route path="/rooms/new" component={NewRoom} />
        </AuthContextProvider>
      </BrowserRouter>
      );
    

    Versão que corrige o bug em dezembro/2021

    import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
    
    return (
      <Router>
        <AuthContextProvider>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path='/rooms/new' element={<NewRoom />} />
          </Routes>
        </AuthContextProvider>
      </Router>
    );
    

    fonte: https://v5.reactrouter.com/web/api/Route/component

    Reviewed by huannvictor at 2021-12-13 13:30
  • 4. Erro com o Sass - aula 02: node sass does not yet support your current environment

    Estou tentando instalar o Sass versão 5, que foi o indicado na aula. Meu nodeJS é 16 e tá dando erro no ambiente. unknown

    Na comunidade do discord vi um problema que apresentaram instalar o windows-build-tools mas também não consegui. (não completa a instalação)

    Também não estou achando como faz o downgrade do Node (se é que é possível)

    abaixo o package.json onde nem tem o sass na dependência, so a partir da versão 7 aparece. Mas o React app pede pra ser a versão >= 5

    {
      "name": "letmeask",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "@types/jest": "^26.0.15",
        "@types/node": "^12.0.0",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "firebase": "^9.6.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3",
        "typescript": "^4.1.2",
        "web-vitals": "^1.0.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {}
    }
    
    Reviewed by huannvictor at 2021-12-12 12:35
  • 5. AdminPage não aparece

    Quando entro na sala das perguntas, com a conta do dono da página, em vez de aparecer-me a página admin aparece-me a página para convidados. A única forma de entrar no admin é através do URL a escrever "/admin" e mesmo assim não realiza verificação do utilizador, então qualquer um pode aceder à página admin. Como posso resolver isto? Tenho quase a certeza que não é suposto estar a acontecer.

    Reviewed by nmferraz at 2021-12-23 13:36
  • 6. auth.esm.js:60 A boolean is being passed as a fourth parameter to window.open. This is not used and may cause an exception in a future release.

    Ao tentar criar uma sala, o popup de autenticação aparece, depois fecha sozinho, e no log de erro aparece:

    auth.esm.js:60 A boolean is being passed as a fourth parameter to window.open. This is not used and may cause an exception in a future release.
    

    Criei também função a seguir no AuthContext.tsx

      async function signOut() {
        await auth.signOut()
    
        setUser(undefined)
      }
    

    Chamei esta função em page/Rooms.tsx num botão para fazer o signOut() e incluí uma chamada ao signIn()

    Depois de desconectar, eu tento logar novamente e ocorre o erro também.

    Reviewed by brunoreale at 2021-06-29 17:43
Projeto desenvolvido durante a NLW #06, apresentado pela Rocketseat entre 20 a 27 de Junho de 2021. 💜 #NLW #ReactJS #Rocketseat

?? Projeto Let Me Ask é um projeto desenvolvido durante a Next Level Week #6, apresentado pela Rocketseat entre 20 a 27 de Junho de 2021. ?? Aula 1 Au

Jun 29, 2021
Projeto da 6 NLW de React da @Rocketseat, desenvolvido utilizando Firebase, Styled-Components e Typescript.
Projeto da 6 NLW de React da @Rocketseat, desenvolvido utilizando Firebase, Styled-Components e Typescript.

Letmeask ?? Crie salas de Q&A ao-vivo. Tire as suas dúvidas da sua audiência em tempo-real ?? Tecnologias usadas ReactJS + Typescript Styled-component

Jul 19, 2022
Projeto para NLW - Rocketseat - feito em React - Instrutor dieegosf
Projeto para NLW - Rocketseat - feito em React - Instrutor dieegosf

LetMeAsk é um projeto para a trilha de React da #NLW 6 - Rocketseat https://letmeask-bf77e.web.app/ #neverstoplearning ?? Technologies This project wa

Jun 28, 2021
Projeto realizado na trilha React da NLW 06 da Rocketseat.

??‍?? Projeto realizado na trilha React da NLW 06 ?? Tecnologias ?? Projeto Letmeask é perfeito para criadores de conteúdos poderem criar salas de Q&A

Nov 30, 2021
Projeto desenvolvido durante a imersão React oferecido pela Alura
Projeto desenvolvido durante a imersão React oferecido pela Alura

Alurakut ?? Sobre o projeto Projeto com a ideia de representar o nostálgico Orkut. Realizado durante a Imersão React oferecido pela Alura. ?? Tecnolog

Mar 25, 2022
Projeto desenvolvido na imersão React organizada pela Alura
Projeto desenvolvido na imersão React organizada pela Alura

Projeto Alurakut Imersão React Alura - 2021 Projeto desenvolvido na semana de imersão React oferecida pela escola Alura entre os dias 12 e 18/07/21 ut

Jan 21, 2022
📜 Spacetraveling é blog que foi desenvolvido como desafio no Ignite da trilha de ReactJs da Rocketseat.
📜 Spacetraveling é blog que foi desenvolvido como desafio no Ignite da trilha de ReactJs da Rocketseat.

SpaceTraveling - Next.js Aplicação em formato de blog utilizando Prismic CMS ?? Sobre o projeto O projeto tem como objetivo o estudo e desenvolvimento

Dec 14, 2021
Projeto da Semana de Imersão React da Alura.
Projeto da Semana de Imersão React da Alura.

imersao-alurakut Projeto da Semana de Imersão React da Alura.

Oct 26, 2021
Projeto construido durante a Imersão React edição Alurakut da Alura!
Projeto construido durante a Imersão React edição Alurakut da Alura!

Alurakut Base Seja bem vindo ao projeto base do Alurakut !!! Passos fundamentais: Marque esse projeto com uma estrela Siga as instruções das aulas e c

Jul 26, 2022
Projeto do jogo Resident Evil 2 Remake feito por fã que gosta muito da franquia.
Projeto do jogo Resident Evil 2 Remake feito por fã que gosta muito da franquia.

Projeto Resident Evil 2 Desenvolvido por Fã com muito carinho e amor. Foi desenvolvido em React junto a algumas dependências que serão citadas abaixo.

May 17, 2022
Projeto clone do banco inter realizado no curso da DIO
Projeto clone do banco inter realizado no curso da DIO

Api_Banco_Inter Projeto clone do banco inter realizado no curso da DIO: ReactJs , Node express, e PostgreSQL Front-end login: cadastro: #dashboard: Ba

Jul 22, 2022
Projeto de Cadastro de Clientes usando Next.js, React e JavaScript

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-n

Mar 23, 2022
Projeto-dsmovie - A web page with a list of some movies, built with react.js
Projeto-dsmovie - A web page with a list of some movies, built with react.js

projeto-DSMovie Sobre o projeto DSMovie é uma aplicação full stack web e mobile

Apr 18, 2022
An SVG loader component for ReactJS

react-inlinesvg Load inline, local or remote SVGs in your React components. Highlights ?? Easy to use: Just set the src ?? Flexible: Personalize the o

Jul 28, 2022
Render visualizer for ReactJS
Render visualizer for ReactJS

React Render Visualizer A visual way to see what is (re)rendering and why. Features Shows when component is being mounted or updated by highlighting (

Aug 5, 2022
🎉 基于 reactjs 开发的可视化项目实战

?? 基于 reactjs 开发的可视化项目实战

Aug 2, 2022
Calculadora simples usando classes do ReactJS

React Calc This calculator was developed by me using ReactJS during my JavaScript studies.

Jun 23, 2021
Consuming GitHub API, showing user's profile and repositories, with ReactJS
Consuming GitHub API, showing user's profile and repositories, with ReactJS

GitHubProfiles Project made with ReactJS to practice API consuming using GitHub API, in order to show in a simple way user's profile and repositories.

Jun 16, 2022
Imersão Alura - 3º Edição. Criando o Alurakut, baseado no antigo Orkut. Usando ReactJs, NextJs e StyledComponents, em um semana de muito aprendizado.
Imersão Alura - 3º Edição. Criando o Alurakut, baseado no antigo Orkut. Usando ReactJs, NextJs e StyledComponents, em um semana de muito aprendizado.

????‍♀️ ?? Cuidado - Obras em andamento ?? Olá pessoa, seja bem vindo ao Alurakut da Ana Esse tem a minha carinha, mas você pode ter o seu também! O A

Mar 7, 2022