-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a728f41
commit a8dd769
Showing
45 changed files
with
464 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
|
|
||
| <h1 align="center">"Hello World!" em React.js</h1> | ||
|
|
||
| <h4 align="center">Prof. Eduardo Ono</h4> | ||
|
|
||
| | ||
|
|
||
| ## Descrição | ||
|
|
||
| Primeiro projeto em React.js utilizano o "tooling" Vite e a linguagem de programação TypeScript. | ||
|
|
||
| | ||
|
|
||
| ## Criando um Novo Projeto React | ||
|
|
||
| * Entrar no diretório onde será criado o projeto. | ||
| * Executar o comando a seguir para criar o projeto `hello-world-react`. Um diretório com esse nome será criado no diretório atual. | ||
|
|
||
| ```cmd | ||
| npm create vite@latest | ||
| ``` | ||
|
|
||
| * No meu que irá aparecer, preencher os dados do projeto a ser criado: | ||
|
|
||
| ```cmd | ||
| Project name: hello-world-react | ||
| Select a framework: React | ||
| Select a variant: TypeScript + SWC | ||
| ``` | ||
|
|
||
| * Entrar no diretório do projeto | ||
|
|
||
| ```cmd | ||
| cd hello-world-react | ||
| ``` | ||
|
|
||
| * Instalar as dependências | ||
|
|
||
| ```cmd | ||
| npm install | ||
| ``` | ||
|
|
||
| * Executar o projeto | ||
|
|
||
| ```cmd | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ### Vídeos de Apoio | ||
|
|
||
| | Thumb | Descrição | | ||
| | --- | --- | | ||
| | [](https://www.youtube.com/watch?v=yx6bt-LSKq8) | <sup>[Código Fonte TV]</sup><br />[__Esqueça o "Create React App"! Crie Projetos React Assim...__](https://www.youtube.com/watch?v=yx6bt-LSKq8)<br><sub>(22:28, Youtube, 22/Jun/2023)</sub> | | ||
|
|
||
| | ||
|
|
||
| ## Packages | ||
|
|
||
| | ||
|
|
||
| ## Vídeos de Apoio | ||
|
|
||
| | Thumb | Título | | ||
| | --- | --- | | ||
| | [](https://www.youtube.com/watch?v=Mm6_DlO5vvs) | <sup>[PedroTech]</sup><br />[__React Folder Structure Best Practices - For Large Projects__](https://www.youtube.com/watch?v=Mm6_DlO5vvs)<br><sub>(17:26, Youtube, 28/Jun/2022)</sub> | | ||
|
|
||
| |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
|
|
||
| <h1 align="center">React.js :: Overview</h1> | ||
|
|
||
| <h4 align="center">Prof. Eduardo Ono</h4> | ||
|
|
||
| | ||
|
|
||
| |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
|
|
||
| <h1 align="center">TypeScript</h1> | ||
|
|
||
| <h4 align="center">Prof. Eduardo Ono</h4> | ||
|
|
||
| | ||
|
|
||
| ## Recursos | ||
|
|
||
| ### Canais no YouTube | ||
|
|
||
| * [ByteGrad](https://www.youtube.com/@ByteGrad) | ||
|
|
||
| | ||
|
|
||
| ## Vídeos Recomendados | ||
|
|
||
| | Thumb | Descrição | | ||
| | --- | --- | | ||
| | [](https://www.youtube.com/watch?v=TPACABQTHvM) | <sup>[ByteGrad]</sup><br />[__TypeScript in React - COMPLETE Tutorial (Crash Course)__](https://www.youtube.com/watch?v=TPACABQTHvM)<br /><sub>(53:21, Youtube, 4/Set/2023)</sub> | | ||
|
|
||
| |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,41 @@ | ||
| <table> | ||
| <tr> | ||
| <td>Desenvolvimento Web > Conteúdo</td> | ||
| <td><a href="http://eduardo-ono.github.io/Desenvolvimento-Web/conteudo/react-js/">Versão HTML</a></td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| # React.js | ||
| <h1 align="center">React.js</h1> | ||
|
|
||
| Prof. Eduardo Ono | ||
| <h4 align="center">Prof. Eduardo Ono</h4> | ||
|
|
||
| <br> | ||
| | ||
|
|
||
| ## Descrição | ||
|
|
||
| Desenvolvimento Web Front-end usando a biblioteca React.js e a linguagem de programação TypeScript. | ||
|
|
||
| | ||
|
|
||
| ## Sumário | ||
|
|
||
| * #### [Overview](./00-overview/README.md) | ||
| * [Overview](./00-overview/) | ||
| * [Ambiente de Desenvolvimento](./01-ambiente-de-desenvolvimento/) | ||
| * [Hello World!](./02-hello-world/) | ||
| * [TypeScript](./03-typescript/) | ||
| * [Exemplos](./exemplos/) | ||
| * [Projetos](./projetos/) | ||
|
|
||
| * #### [Exemplos](./exemplos/) | ||
| | ||
|
|
||
| <br> | ||
| ## Resources | ||
|
|
||
| * [https://vitejs.dev](https://vitejs.dev/) | ||
|
|
||
| | ||
|
|
||
| ## Vídeos Recomendados | ||
|
|
||
| | Thumb | Descrição | | ||
| | :-: | --- | | ||
| | [](https://www.youtube.com/watch?v=1Ws__ZbHNyc "DevPlenoLive - ReactJS") | <sup>[DevPleno]</sup> [__DevPlenoLive - ReactJS__](https://www.youtube.com/watch?v=1Ws__ZbHNyc)<br> <sub>(2:52:43, YouTube, Mar/2018)</sub> | ||
|
|
||
| | [](https://www.youtube.com/watch?v=1Ws__ZbHNyc "DevPlenoLive - ReactJS") | <sup>[DevPleno]</sup><br>[__DevPlenoLive - ReactJS__](https://www.youtube.com/watch?v=1Ws__ZbHNyc)<br><sub>(2:52:43, YouTube, Mar/2018)</sub> | | ||
|
|
||
| <br> | ||
| | ||
|
|
||
| ## Bibliografia | ||
|
|
||
| <br> | ||
| |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
|
|
||
| <h1 align="center">TypeScript :: Overview</h1> | ||
|
|
||
| <h4 align="center">Prof. Eduardo Ono</h4> | ||
|
|
||
| | ||
|
|
||
| ## Crash Courses | ||
|
|
||
| <table> | ||
| <tr> | ||
| <th>Thumb</th> | ||
| <th>Descrição</th> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <a href="https://www.youtube.com/watch?v=lCemyQeSCV8"><img src="https://img.youtube.com/vi/lCemyQeSCV8/default.jpg" alt="img"></a> | ||
| </td> | ||
| <td> | ||
| <sup>[Matheus Battisti - Hora de Codar]</sup><br> | ||
| <a href="https://www.youtube.com/watch?v=lCemyQeSCV8"><strong>CURSO DE TYPESCRIPT NA PRÁTICA - APRENDA TYPESCRIPT EM 1 HORA</strong></a><br> | ||
| <sub>(1:11:22, YouTube, 11/Jan/2022)</sub> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <a href="https://www.youtube.com/watch?v=BCg4U1FzODs"><img src="https://img.youtube.com/vi/BCg4U1FzODs/default.jpg" alt="img"></a> | ||
| </td> | ||
| <td> | ||
| <sup>[Traversy Media]</sup><br> | ||
| <a href="https://www.youtube.com/watch?v=BCg4U1FzODs"><strong>TypeScript Crash Course</strong></a><br> | ||
| <sub>(52:26, YouTube, 18/Ago/2021)</sub> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| | ||
|
|
||
| ## Cursos Introdutórios "Hands-on" | ||
|
|
||
| | ||
|
|
||
| ## Cursos "Completos" | ||
|
|
||
| |
15 changes: 15 additions & 0 deletions
15
conteudo/typescript/02-hello-world/exemplos/hello-world/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <h1 align="center">"Hello World!" com TypeScript</h1> | ||
|
|
||
| <h4 align="center">Prof. Eduardo Ono</h4> | ||
|
|
||
| | ||
|
|
||
| ## Descrição | ||
|
|
||
| Primeira página web usando a linguagem TypeScript. | ||
|
|
||
| ## Execução do "Hello World!" | ||
|
|
||
| Clicar [__aqui__](./index.html) (arquivo `index.html`) para abrir a página através do GitHub Pages. | ||
|
|
||
| |
18 changes: 18 additions & 0 deletions
18
conteudo/typescript/02-hello-world/exemplos/hello-world/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pt-BR"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="author" content="Eduardo Ono"> | ||
| <title>Hello World!</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="./index.js" defer></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="app"></div> | ||
| </body> | ||
|
|
||
| </html> |
5 changes: 5 additions & 0 deletions
5
conteudo/typescript/02-hello-world/exemplos/hello-world/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| "use strict"; | ||
| const app = document.getElementById('app'); | ||
| if (app) { | ||
| app.innerHTML = '<h1>Hello World!</h1>'; | ||
| } |
5 changes: 5 additions & 0 deletions
5
conteudo/typescript/02-hello-world/exemplos/hello-world/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
|
|
||
| const app = document.getElementById('app'); | ||
| if (app) { | ||
| app.innerHTML = '<h1>Hello World!</h1>'; | ||
| } |
3 changes: 3 additions & 0 deletions
3
conteudo/typescript/02-hello-world/exemplos/hello-world/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| body { | ||
| text-align: center; | ||
| } |
Oops, something went wrong.