index.md

Next Level Week #4

  Day 01 - Fundamentos do React
  Day 02 - Next.Js
  Day 03 - Context API
  Day 04 - Use Effect e Notification

---

Day 01

Criando o Projeto

Yarn:

C:\Users\usuario\Documentos\NLW4> yarn create react-app moveit --template=typescript

Npm:

C:\Users\usuario\Documentos\NLW4> npx create-react-app moveit --template=typescript

Startando o Projeto

Yarn:

C:\Users\usuario\Documentos\NLW4\moveit> yarn start

Npm:

C:\Users\usuario\Documentos\NLW4\moveit> npm start

Criando Componentes no React JS

Componente.tsx

    export function MostrarTexto(){
	return(
		<div className='container'>
			<h1>Bem Vindo A RocketSeat</h1>
			<span>#Juntos Para o Proximo Nivel</span>
		</div>
	)
}

App.tsx

export function MostrarTexto(){
	return(
		<div className='container'>
			<h1>Bem Vindo A RocketSeat</h1>
			<span>#Juntos Para o Proximo Nivel</span>
		</div>
	)
})
}

Index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
    <App/>,
  document.getElementById('root')
);

---

Day 02

Next.Js - Framework Para React

Criando o Projeto

Yarn:

C:\Users\user> yarn create next-app nomedoapp

Npm:

C:\Users\user> yarn create-next-app nomedoapp

Startando o Projeto

Yarn:

C:\Users\user> yarn dev

Npm:

C:\Users\user> npm run dev

Instalando Dependencias(Typescript, react-dom, e node)

Yarn:

C:\Users\user> yarn add typescript @types/react @types/react-dom @types/node -D

Npm:

C:\Users\user> npm install typescript @types/react @types/react-dom @types/node -D

---

Day 03

Context API

fornece uma maneira de passar os dados de componentes sem ter que passar manualmente em todos os níveis.

Context.tsx

import { createContext, useState, ReactNode } from 'react';

interface ChallengeContextData{
    ChallengesCompleted:number;

}

interface ChallengesProviderProps{
    children:ReactNode;//propriedade de componentes react
}

//cria o context
export const ChallengesContext = createContext({} as ChallengeContextData)
//o texto segue o formato do interface passado la em cima

export function ChallengesProvider({children}:ChallengesProviderProps){//props

    const [ChallengesCompleted, SetChallengesCompleted] = useState(0)
    
//quando o componente recebe outro dentro dele se chama children e precisa passar props
    return(
        <ChallengesContext.Provider 
        value={
            ChallengesCompleted
              }>
            {children}
        </ChallengesContext.Provider>
    )
}

App.tsx

import { useContext } from 'react';
import { ChallengesContext } from '../contexts/ChallengesContext';

export function CompletedChallenges(){

    const { ChallengesCompleted } = useContext(ChallengesContext);

    return(
        <div className={styles.completedChallengesContainer}>
            <span>Desafios Completos</span>
            <span>{ChallengesCompleted}</span>
        </div>
    );
}

---

Day 04

Use Effect e Notification

App.tsx

import { useEffect } from 'react';

useEffect(()=>{
        Notification.requestPermission();//pede permissão se pode notificar
    },[])//se houver um array vazio significa que ele só será mostrado uma vez em tela

new Audio('/notification.mp3').play();//toca o audio da notificação

//verifica se a notificação foi permitida para notificar
if(Notification.permission === 'granted'){
			//cria notificação
      new Notification('Move.it - Novo desafio 🎉',{
                body:`Valendo ${challenge.amount} xp`,
                icon:'favicon.png'                
           })
   }