[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:07.78,0:00:10.94,Default,,0000,0000,0000,,Os componentes são parte essenciais\Nde um projeto next.
Dialogue: 0,0:00:10.94,0:00:13.01,Default,,0000,0000,0000,,Vamos criar o exemplo de components?
Dialogue: 0,0:00:13.01,0:00:17.20,Default,,0000,0000,0000,,Precisamos criar uma pasta\Ndentro do "src"
Dialogue: 0,0:00:17.20,0:00:18.48,Default,,0000,0000,0000,,chamada "components".
Dialogue: 0,0:00:18.48,0:00:18.97,Default,,0000,0000,0000,,Então vamos lá.
Dialogue: 0,0:00:18.97,0:00:24.36,Default,,0000,0000,0000,,Botão direito, "new folder",\N"components".
Dialogue: 0,0:00:24.36,0:00:25.79,Default,,0000,0000,0000,,E agora,
Dialogue: 0,0:00:25.79,0:00:29.35,Default,,0000,0000,0000,,botão direito em cima\Nde "components", "new file",
Dialogue: 0,0:00:29.35,0:00:35.80,Default,,0000,0000,0000,,eu vou criar com a primeira\Nletra maiúscula "Exemplo.jsx".
Dialogue: 0,0:00:35.80,0:00:40.41,Default,,0000,0000,0000,,Percebam que eu criei na extensão\N"jsx" porque é JavaScript.
Dialogue: 0,0:00:40.41,0:00:43.94,Default,,0000,0000,0000,,Com o projeto rodando\Ne o seu componente aberto,
Dialogue: 0,0:00:43.94,0:00:49.32,Default,,0000,0000,0000,,podemos verificar o que vai\Nacontecendo ao executar os comandos.
Dialogue: 0,0:00:49.32,0:00:52.22,Default,,0000,0000,0000,,Para você poder criar\Num exemplo de um projeto,
Dialogue: 0,0:00:52.22,0:00:55.81,Default,,0000,0000,0000,,você pode digitar o seguinte comando:\N"rafce"
Dialogue: 0,0:00:55.81,0:01:00.63,Default,,0000,0000,0000,,que ele já monta sua estrutura\Ne já com o exemplo aqui,
Dialogue: 0,0:01:00.63,0:01:03.36,Default,,0000,0000,0000,,Vou colar um código de um projeto feito\Nanteriormente
Dialogue: 0,0:01:03.36,0:01:06.54,Default,,0000,0000,0000,,para ser executado no navegador\Ne fazer a manipulação do componente.
Dialogue: 0,0:01:06.54,0:01:09.50,Default,,0000,0000,0000,,Com o código colado\Ntemos a seguinte codificação:
Dialogue: 0,0:01:09.50,0:01:13.05,Default,,0000,0000,0000,,Declaração de variáveis,\Nonde estou declarando a variável nome
Dialogue: 0,0:01:13.05,0:01:15.51,Default,,0000,0000,0000,,que recebe "Fiap",\Npor "exemplo1", 2 e 3
Dialogue: 0,0:01:15.51,0:01:19.62,Default,,0000,0000,0000,,e cada uma com os seus valores\Nem cima do "return".
Dialogue: 0,0:01:19.62,0:01:23.95,Default,,0000,0000,0000,,Tudo o que for de JavaScript\Nfica em cima do "return"
Dialogue: 0,0:01:23.95,0:01:27.82,Default,,0000,0000,0000,,e tudo o que for de html\Nabaixo do "return".
Dialogue: 0,0:01:27.82,0:01:31.19,Default,,0000,0000,0000,,Isso significa o porquê do jsx,
Dialogue: 0,0:01:31.19,0:01:34.63,Default,,0000,0000,0000,,que é a junção de html\Ncom o JavaScript.
Dialogue: 0,0:01:34.63,0:01:38.16,Default,,0000,0000,0000,,Percebam que ele não está\Naparecendo aqui na tela.
Dialogue: 0,0:01:38.16,0:01:42.37,Default,,0000,0000,0000,,Ainda continua o "Fiap"\Nque eu coloquei no "page".
Dialogue: 0,0:01:42.37,0:01:47.34,Default,,0000,0000,0000,,Isso é porque eu não estou\Nchamando esse componente "Exemplo".
Dialogue: 0,0:01:47.34,0:01:52.58,Default,,0000,0000,0000,,Ele está aqui em "components"\Ntemos "Exemplo" que é o componente,
Dialogue: 0,0:01:52.58,0:01:55.98,Default,,0000,0000,0000,,mas eu não estou chamando ele.
Dialogue: 0,0:01:55.98,0:01:58.04,Default,,0000,0000,0000,,Como vamos fazer isso?
Dialogue: 0,0:01:58.04,0:02:00.69,Default,,0000,0000,0000,,Bem, em "page"
Dialogue: 0,0:02:02.09,0:02:04.86,Default,,0000,0000,0000,,chamar esse componente, por exemplo.
Dialogue: 0,0:02:04.86,0:02:07.26,Default,,0000,0000,0000,,Exemplo
Dialogue: 0,0:02:07.26,0:02:08.83,Default,,0000,0000,0000,,e vou
Dialogue: 0,0:02:08.83,0:02:11.83,Default,,0000,0000,0000,,importá lo import.
Dialogue: 0,0:02:14.60,0:02:15.97,Default,,0000,0000,0000,,Exemplo.
Dialogue: 0,0:02:15.97,0:02:19.10,Default,,0000,0000,0000,,Observem que ao importar não tem
Dialogue: 0,0:02:20.61,0:02:24.38,Default,,0000,0000,0000,,exemplo e chamar ele aqui,\Nele já apareceu,
Dialogue: 0,0:02:24.94,0:02:27.95,Default,,0000,0000,0000,,então tudo que estava no exemplo
Dialogue: 0,0:02:28.21,0:02:30.65,Default,,0000,0000,0000,,agora aparece
Dialogue: 0,0:02:30.65,0:02:32.65,Default,,0000,0000,0000,,no nosso navegador como?
Dialogue: 0,0:02:32.65,0:02:36.66,Default,,0000,0000,0000,,Seja bem vindo ao NET\NLista de vantagens do Mac.
Dialogue: 0,0:02:37.39,0:02:41.76,Default,,0000,0000,0000,,Isso acontecem\Nporque o Page está renderizando.
Dialogue: 0,0:02:42.33,0:02:45.53,Default,,0000,0000,0000,,Exemplo Perceberam que foi muito rápido
Dialogue: 0,0:02:45.53,0:02:48.60,Default,,0000,0000,0000,,essa renderização\Ne foi uma das vantagens que o Mac tem.
Dialogue: 0,0:02:48.97,0:02:51.64,Default,,0000,0000,0000,,Então vamos ver\Ncomo ficou o nosso projeto.
Dialogue: 0,0:02:51.64,0:02:56.64,Default,,0000,0000,0000,,Temos as declarações em cima do return,\Ntemos aqui dentro do return,
Dialogue: 0,0:02:56.64,0:02:59.64,Default,,0000,0000,0000,,que é o que vai aparecer no seu navegador
Dialogue: 0,0:03:00.28,0:03:03.25,Default,,0000,0000,0000,,uma div h1 com o título.
Dialogue: 0,0:03:03.42,0:03:07.35,Default,,0000,0000,0000,,Observem que o as chaves com o nome
Dialogue: 0,0:03:07.35,0:03:10.76,Default,,0000,0000,0000,,está representando\No que você declarou aqui em cima.
Dialogue: 0,0:03:11.26,0:03:13.49,Default,,0000,0000,0000,,Isso vai acontecer com Exemplo\Num exemplo dois.
Dialogue: 0,0:03:13.49,0:03:15.09,Default,,0000,0000,0000,,Exemplo três Se você
Dialogue: 0,0:03:16.63,0:03:19.63,Default,,0000,0000,0000,,tirar o nome, o nome não aparece mais.
Dialogue: 0,0:03:19.83,0:03:22.87,Default,,0000,0000,0000,,Se colocar ele aparece e
Dialogue: 0,0:03:24.30,0:03:26.67,Default,,0000,0000,0000,,estamos na page
Dialogue: 0,0:03:26.67,0:03:30.04,Default,,0000,0000,0000,,chamando o componente Exemplo\Ncom o seu import.
Dialogue: 0,0:03:30.38,0:03:32.44,Default,,0000,0000,0000,,Sem ele
Dialogue: 0,0:03:32.44,0:03:34.31,Default,,0000,0000,0000,,ele apresenta um erro
Dialogue: 0,0:03:34.31,0:03:37.58,Default,,0000,0000,0000,,e trazendo ele novamente\Nele volta a funcionar.
Dialogue: 0,0:03:38.08,0:03:40.42,Default,,0000,0000,0000,,Fique atento\Ncom o importe do seu componente,
Dialogue: 0,0:03:40.42,0:03:43.92,Default,,0000,0000,0000,,isso pode lhe trazer erros que o Next\Nte ajuda a corrigir no navegador,
Dialogue: 0,0:03:44.36,0:03:46.66,Default,,0000,0000,0000,,tornando o seu projeto\Nmais rápido e dinâmico.