#################################################################################################### 01. Abertura: Neste módulo aprenderemos a desenvolver aplicações Web utilizando ReactJS. #################################################################################################### 02. Apresentando o projeto: # Links [Figma do Projeto RocketNotes](https://www.figma.com/file/hbBzycZDR4WGSVWyK5aOqV/RocketNotes/duplicate) #################################################################################################### 04. O que é ReactJS: Nessa aula aprenderemos o que é o ReactJS e porque ele é chamado de biblioteca e o seu objetivo na programação Web. #################################################################################################### 05. Vite: Nessa aula aprenderemos o que é o Vite e qual a diferença dele entre o Create React App (CRA). #################################################################################################### 06. Criando projeto: [Commit: Criando projeto](https://github.com/rocketseat-education/explorer-stage-09/tree/5f6bb25176d3d3c6b407a2e0bb67fac2c5689dd1) Nessa aula aprenderemos a criar um projeto em React utilizando o Vite. Utilizando o seguinte comando: ```bash npm create vite rocketnotes --template react ``` #################################################################################################### 07. Estrutura de pastas e arquivos: Nessa aula aprenderemos a sobre a estrutura de pastas e arquivos dentro de um projeto ReactJS. ![estrutura-pastas-arquivos](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-09/esttrutura-pastas-arquivos.png) #################################################################################################### 08. Executando o projeto: Nessa aula aprenderemos o comando para execução do nosso projeto. #################################################################################################### 09. Funcionamento do ReactJS: Nessa aula aprenderemos o funcionamento do ReactJS por baixo dos panos, como ele faz para renderizar arquivos `.jsx` #################################################################################################### 10. JSX: [Commit: JSX](https://github.com/rocketseat-education/explorer-stage-09/tree/7a80d0be60695fe81f77453f3c9f74dbddee8f07) Nessa aula aprenderemos como criar um componente e o que é o arquivo `.jsx` e sua estrutura. #################################################################################################### 11. Fragment: [Commit: Fragment](https://github.com/rocketseat-education/explorer-stage-09/tree/fbda4211bafb6a64bae74e75c76722f5247209ad) Nessa aula aprenderemos o que é o Fragment no ReactJS. #################################################################################################### 12. Adicionando CSS: [Commit: Adicionando CSS](https://github.com/rocketseat-education/explorer-stage-09/tree/6c44e5d1376fc84eec8b247bb120b41e056617f4) Nessa aula aprenderemos a criar o arquivo `.css` e como organizar a estrutura para começarmos a estilizar o nosso projeto. #################################################################################################### 14. CSS in JS: [Commit: CSS in JS](https://github.com/rocketseat-education/explorer-stage-09/tree/c377d52616813711abd5d5ef3ae5c5c4d6420f2b) # CSS in JS Nessa aula aprenderemos o que é o **styled-components** e como adicionar em nosso projeto.\n[Acesse aqui a documentação do styled-components](https://styled-components.com/) ## Como instalar o styled-components? De acordo com a documentação, para instalar o styled-components, digite o comando abaixo no terminal (dentro da pasta do projeto): ```jsx npm install --save styled-components ``` ## Código do arquivo styles.js (antes styles.css): ```jsx import styled from "styled-components"; export const Container = styled.div` background-color: red; ` ``` ## Código do arquivo index.js em /Details: ```jsx import {Container} from "./styles"; export function Details() { return (

Hello World

 ) }; ``` #################################################################################################### 15. Tema: [Commit: Tema](https://github.com/rocketseat-education/explorer-stage-09/tree/2ca602c8a82914f680803df3bb1f001a9d3aa5a6) Nessa aula aprenderemos a criar temas globais para nosso projeto e importá-los para iniciarmos a estilização do mesmo. Figma - Rocket Notes: [RocketNotes](https://www.figma.com/file/8BIVG01rJIEwn5xvoxipUf/RocketNotes/duplicate) ```jsx export default { COLORS: { BACKGROUND_900: "#232129", BACKGROUND_800: "#312E38", BACKGROUND_700: "#3E3B47", WHITE: "#F4EDE8", ORANGE: "#FF9000", GRAY_100: "#999591", GRAY_300: "#666360", RED: "#FF002E" } } ``` #################################################################################################### 16. Estilo Global: [Commit: Estilo Global](https://github.com/rocketseat-education/explorer-stage-09/tree/ee38fbac5db9dcefa05452fd2179072c25e23e34) Nessa aula aprenderemos como criar um arquivo de estilização global para utilizarmos dentro do nosso projeto e com isso, o projeto já trará algumas configurações de estilos padronizadas. #################################################################################################### 18. Fontes personalizados: [Commit: Fontes personalizados](https://github.com/rocketseat-education/explorer-stage-09/tree/85ae9d216f39683556584ec9789add9925a574e1) Nessa aula aprenderemos como adicionar fontes personalizadas em nosso projeto utilizando o [Google Fonts](https://fonts.google.com/specimen/Roboto+Slab?query=roboto+slab). #################################################################################################### 19. Componente: [Commit: Componente](https://github.com/rocketseat-education/explorer-stage-09/tree/867b89746bcd6ed845ead893e94c053d1716aaeb) Nessa aula aprenderemos o que é componentes no ReactJS e criaremos o nosso primeiro componente, o `*