Skip to content

Instantly share code, notes, and snippets.

@phaelfp

phaelfp/Aula-1.md

Last active February 24, 2022 00:23
Show Gist options
  • Save phaelfp/147fc8a3360bae32dd8c0e34d4145ee4 to your computer and use it in GitHub Desktop.
Save phaelfp/147fc8a3360bae32dd8c0e34d4145ee4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. phaelfp revised this gist Feb 24, 2022. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,10 @@

    O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com Squads utilizando React. Normalmente quando temos times focados em partes do produto e comum a adoção da arquitetura de Micro FrontEnd.

    Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-with-figma/CollabChat.fig)
    Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main/CollabChat.fig)

    ## Um gif do layout
    ![Amostra do Layout](https://raw.githubusercontent.com/phaelfp/chatcollab/main-with-figma/layout.gif)
    ![Amostra do Layout](https://raw.githubusercontent.com/phaelfp/chatcollab/main/layout.gif)

    ## Squads
    * Account
  2. phaelfp revised this gist Feb 23, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Aula-1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    * Explicado porque algumas ferramentas precisam de build ([bundle](https://webpack.js.org)) e algumas ferramentas para build [Web Pack](https://webpack.js.org/), [Gulp](https://gulpjs.com/), [RollupJS](https://rollupjs.org/guide/en/) é a que o Vite JS utiliza.
    * Explicado o que quem é responnsável compilação do JS do React JS [Babel](https://babeljs.io/) e que tem outros como o [EsBuild](https://esbuild.github.io/) e o [Remix](https://remix.run/)
    * Comandos para se criar um novo projeto React
    * yarn create vite [Name Project] --template react-js (Para projetos JavaScript)
    * yarn create vite [Name Project] --template react (Para projetos JavaScript)
    * yarn create vite [Name Project] --template react-ts (Para projetos com TypeScript)
    * npx create-next-app@latest ou yarn create next-app (Para projetos JavaScript)
    * npx create-next-app@latest --typescript ou yarn create next-app --typescript (Para projetos com TypeScript)
  3. phaelfp revised this gist Feb 23, 2022. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,9 @@ Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-
    ### Backend for FrontEnd
    ...

    [![IMAGE ALT TEXT](http://img.youtube.com/vi/FkpPwLTAx5E/0.jpg)](https://www.youtube.com/watch?v=FkpPwLTAx5E "Como criar setas com CSS - Parte I | Mód06 - Aula07")
    [![Como criar setas com CSS - Parte I | Mód06 - Aula07](http://img.youtube.com/vi/FkpPwLTAx5E/0.jpg)](https://www.youtube.com/watch?v=FkpPwLTAx5E "Como criar setas com CSS - Parte I | Mód06 - Aula07")

    [![Creating A ReactJS-Inspired “Props” Object In AngularJS](https://i.vimeocdn.com/video/532406841-b4f55535e68b3cf237193c9cbd17f62964b1796c7031a95dff0d0e5398c5466b-d_1280x720)](https://vimeo.com/137478352 "Creating A ReactJS-Inspired “Props” Object In AngularJS")

    ## VS Code - IDE

  4. phaelfp revised this gist Feb 23, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,6 +23,8 @@ Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-
    ### Backend for FrontEnd
    ...

    [![IMAGE ALT TEXT](http://img.youtube.com/vi/FkpPwLTAx5E/0.jpg)](https://www.youtube.com/watch?v=FkpPwLTAx5E "Como criar setas com CSS - Parte I | Mód06 - Aula07")

    ## VS Code - IDE

    Plugins recomendados
  5. phaelfp revised this gist Feb 23, 2022. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions Aula-2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,11 +45,14 @@ O parametro `-D` é utilizado para instalar o pacote somente em desenvolvimento.
    Depois do termino da instalação abrir o arquivo .eslintrc acessar a sessão extends e adicionar `"prettier"` depois de `"airbnb",`

    Depois abrir o arquivo .prettierrc e colar o código abaixo

    ```JSON
    {
    "singleQuote": true,
    "trailingComma": "all",
    "semi": true
    }
    ```

    `Ctrl + Shift + p` digitar `Save without Formatting` e clicar

  6. phaelfp revised this gist Feb 22, 2022. 1 changed file with 83 additions and 0 deletions.
    83 changes: 83 additions & 0 deletions Aula-3.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    Esplicou o conseito de JSON e a sua extruturação como exemplo ele pegou o nome dos usuários do chat e a cor que aparece o nome do usuário.

    chat.json

    ```JSON
    {
    "user": "Ryhu02",
    "color": "orange"
    }
    ```
    Exemplicou como seria em xml

    chat.xml

    ```XML
    <chat>
    <user>
    <name>Ryhu02</name>
    <color>orange</color>
    </user>
    </chat>
    ```

    Como temos que representar uma lista de usuários utilizamos o []

    chat.json

    ```JSON
    {
    "chat" :[
    {
    "name":"tostavioo",
    "color":"orange"
    },{
    "name":"HakkoFrost",
    "color":"black"
    },{
    "name":"Dymar",
    "color":"yellow"
    }
    ]
    }
    ```

    Mesmo arquivo se fosse no formato XML

    chat.xml

    ```XML
    <chat>
    <user>
    <name>tostavioo</name>
    <color>orange</color>
    </user>
    <user>
    <name>HakkoFrost</name>
    <color>black</color>
    </user>
    <user>
    <name>Dymar</name>
    <color>yellow</color>
    </user>
    </chat>
    ```

    Falou sobre a dúvida da Danicaus quando utilizar o JSON.parse() e o JSON.stringfy()
    ```JS
    const json = '{"result": true, "count":42}';

    const obj = JSON.parse(json);

    // isso não funciona
    // console.log(json.count);

    console.log(obj.count);

    console.log(obj.result);

    console.log(obj);

    console.log(JSON.stringfy(obj));

    ```
  7. phaelfp revised this gist Feb 21, 2022. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,3 +23,9 @@ Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-
    ### Backend for FrontEnd
    ...

    ## VS Code - IDE

    Plugins recomendados
    * [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
    * [Intelli Code](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
    * [CSS Class Completion for HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
  8. phaelfp revised this gist Feb 18, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com

    Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-with-figma/CollabChat.fig)

    ##Um gif do layout
    ## Um gif do layout
    ![Amostra do Layout](https://raw.githubusercontent.com/phaelfp/chatcollab/main-with-figma/layout.gif)

    ## Squads
  9. phaelfp revised this gist Feb 18, 2022. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,8 @@ O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com

    Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-with-figma/CollabChat.fig)

    Um gif do layout ![Amostra do Layout](https://raw.githubusercontent.com/phaelfp/chatcollab/main-with-figma/layout.gif)
    ##Um gif do layout
    ![Amostra do Layout](https://raw.githubusercontent.com/phaelfp/chatcollab/main-with-figma/layout.gif)

    ## Squads
    * Account
  10. phaelfp revised this gist Feb 18, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com

    Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-with-figma/CollabChat.fig)

    Um gif do layout ![Amostra do Layout](https://github.com/phaelfp/chatcollab/raw/main-with-figma/layout.gif)
    Um gif do layout ![Amostra do Layout](https://raw.githubusercontent.com/phaelfp/chatcollab/main-with-figma/layout.gif)

    ## Squads
    * Account
  11. phaelfp revised this gist Feb 18, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,8 @@ O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com

    Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-with-figma/CollabChat.fig)

    Um gif do layout ![Amostra do Layout](https://github.com/phaelfp/chatcollab/raw/main-with-figma/layout.gif)

    ## Squads
    * Account
    * Home
  12. phaelfp revised this gist Feb 18, 2022. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions Aula-2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,13 +45,11 @@ O parametro `-D` é utilizado para instalar o pacote somente em desenvolvimento.
    Depois do termino da instalação abrir o arquivo .eslintrc acessar a sessão extends e adicionar `"prettier"` depois de `"airbnb",`

    Depois abrir o arquivo .prettierrc e colar o código abaixo
    ´´´js
    {
    "singleQuote": true,
    "trailingComma": "all",
    "semi": true
    }
    ´´´

    `Ctrl + Shift + p` digitar `Save without Formatting` e clicar

  13. phaelfp revised this gist Feb 18, 2022. 2 changed files with 78 additions and 3 deletions.
    78 changes: 75 additions & 3 deletions Aula-2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,11 +45,13 @@ O parametro `-D` é utilizado para instalar o pacote somente em desenvolvimento.
    Depois do termino da instalação abrir o arquivo .eslintrc acessar a sessão extends e adicionar `"prettier"` depois de `"airbnb",`

    Depois abrir o arquivo .prettierrc e colar o código abaixo
    ´´´js
    {
    "singleQuote": true,
    "trailingComma": "all",
    "semi": true
    }
    ´´´

    `Ctrl + Shift + p` digitar `Save without Formatting` e clicar

    @@ -83,15 +85,85 @@ Agora vamos continuar o processo de versionamento.
    #/home/rfpereira/github/live/chatcollab>git commit
    `Não precissa passar o -m já que vamos utilizar o gitmoji`

    ## Storebook

    ## Storybook

    Uma das mais utilizadas ferramentas de documentação de interface principalmente com React.

    ### Instalar no projeto
    * `npx sb init`

    ### Iniciar o Storybook
    * `yarn storybook`

    Dentro do projeto vamos criar um pasta dentro de `src` com o nome `components`

    # Criação do nosso primeiro componente

    Vamos criar o component Title para o título de boas-vindas.

    Dentro da pasta `components` vamos criar uma pasta `Title` e dentro dela vamos criar os arquivos:
    - index.js
    - Title.stories.jsx `Documentação do component para o Storybook`
    - Title.jsx
    - Title.style.js

    ## Title.stories.jsx
    ```js
    import React from 'react';
    import Title from '.';

    export default {
    title: 'Components/Title',
    component: Title,
    };

    const Template = (args) => <Title {...args} />;

    export const Default = Template.bind({});
    Default.args = {
    children: 'Default',
    };

    export const Small = Template.bind({});
    Small.args = {
    children: 'Small',
    };
    ```

    ## Title.jsx
    ```js
    import Style from './Title.style';

    const Title = function titleComponent({ children }) {
    return <Style.Title>{children}</Style.Title>;
    };

    export default Title;
    ```

    ## index.js
    ```js
    import Title from './Title';

    export default Title;
    ```

    ## Title.style.js
    ```js
    import styled from 'styled-components';

    const Style = {};

    Style.Title = styled.h1`
    font-size: 40px;
    `;

    export default Style;
    ```

    ### Instalar uma dependencia para tratar o CSS o [Styled Components](https://styled-components.com/)

    * yarn add styled-components

    * [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
    ### Plugin Visual Code - IDE
    * Adicionar o [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) não esqueca de clicar na engrenagem e adicionar o plugin no Workspace como fizemos nos outros plugins
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,9 @@
    # :tada: React com Micro FrontEnd - Aulas de React Feliz

    O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com Squads utilizando React. Normalmente quando temos times focados em partes do produto e comum a adoção da arquitetura de Micro FrontEnd.

    Layout no Figma [CollabChat.fig](https://github.com/phaelfp/chatcollab/raw/main-with-figma/CollabChat.fig)

    ## Squads
    * Account
    * Home
  14. phaelfp revised this gist Feb 18, 2022. 2 changed files with 76 additions and 9 deletions.
    2 changes: 1 addition & 1 deletion Aula-1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # :sparkles: Aula 1º
    # :sparkles: 1ª Aula

    ## Tópicos abordados:
    * Layout Mobile First - Técnica muito utilizada no mercado!
    83 changes: 75 additions & 8 deletions Aula-2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +1,97 @@
    #:sparkles: - Aula 2
    # :sparkles: - 2ª Aula

    ## Criando o repositório no github e comitando o trabalho anterior

    #/home/rfpereira/github/live/chatcollab> git init

    #/home/rfpereira/github/live/chatcollab> git remote add origin [email protected]:phaelfp/chatcollab.git

    Antes de continuar vamos fazer algumas configurações para padronização de código em projetos

    ### [EsLint](https://eslint.org/)

    * Instalar o eslint `yarn create @eslint/config`
    * How would you like to use ESLint? `style`
    * What type of modules does your project use? `esm`
    * Which framework does your project use? `react`
    * Does your project use TypeScript? `No`
    * Where does your code run? `browser`
    * How would you like to define a style for your project?
    `Use a popular style guide` -> `airbnb`
    * What format do you wnat your config file to be in? `JSON`
    * Would you like to install them now with npm? `Yes`

    ## Visual Code - IDE de desenvolvimento
    ### [Prettier](https://github.com/prettier/eslint-config-prettier)

    Para auxiliar o eslint na padronização de código utilizamos o Prettier

    Antes de fazermos esta configuração temos que instalar os plugins para nossa IDE

    ## Visual Code - IDE de desenvolvimento

    Podemos utilizar para isso o eslint e junto com ele o Prettier
    Abrir o vscode com o projeto
    #/user/rfpereira/github/lives/chatcollab>code .

    ### Plugins
    * Para utilizar o [EsLint](https://eslint.org/) usamos o [VS Code Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    * Para ajudar na formatação/padronização do código com o [Prettier](https://github.com/prettier/eslint-config-prettier) usamos o [Prettier VS COde](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
    * [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
    * Para ter os recursos do Eslint na IDE usamos o plugin [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    * Para ajudar na formatação/padronização do código usamos o plugin [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

    Depois de instalar os plugins voltamos ao terminal para fazer a instalação do eslint config with prettier e o prettier

    #/user/rfpereira/github/lives/chatcollab>yarn add -D eslint-config-prettier prettier

    O parametro `-D` é utilizado para instalar o pacote somente em desenvolvimento.

    ## Controle de versão - GIT
    Depois do termino da instalação abrir o arquivo .eslintrc acessar a sessão extends e adicionar `"prettier"` depois de `"airbnb",`

    Depois abrir o arquivo .prettierrc e colar o código abaixo
    {
    "singleQuote": true,
    "trailingComma": "all",
    "semi": true
    }

    `Ctrl + Shift + p` digitar `Save without Formatting` e clicar

    Para verificar `Ctrl + ,` e clicar no icon da configuração JSON no topo a direita e verificar se tem a linha `"editor.formatOnSave": true,` e a linha `"[javascriptreact]":{"editor.defaultFormatter": "esbenp.prettier-vscode"}`

    Para que esta configuração siga em todos que iram trabalhar no projeto temos que copiar aa linhas mensionadas acima e no projeto criar uma pasta .vscode e dentro dela criar m arquivo settings.json e colar as linhas entre `{}` abrir bigodes e fechar bigodes

    Para informar os plugins necessários também acompanharem o projeto é só irmos em cada Plugin clicar na engrenagem e depois em na ultima opção `Add to Workspace Recommendations` e depois disso será criado dentro da pasta .vscode o arquivo extensions.json

    Mesmo tendo o Eslint e o Prettier instalado e configurado no Visual Code o desenvolvedor pode desablitar a sua funcionalidade
    Então utilizamos um recurso do Git chamada Hooks.

    Navegando no diretório do projeto após ter executado o git init temos um diretório oculto (.git) dentro dele temos o diretório hooks com exemplos das ações do git que podemos fazer o hook.

    Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o [Husky](https://github.com/typicode/husky)
    Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o [Husky](https://github.com/typicode/husky) sendo que tem uma forma de utiliza-lo melhor que é [lint-staged](https://github.com/okonet/lint-staged)

    #/user/rfpereira/github/lives/chatcollab>npx mrm@2 lint-staged

    Já vai instalar e configurar o lint-staged e o husky para gente ficar feliz!

    Para padronizar os commits vamos utilizar o [gitmoji](https://www.npmjs.com/package/gitmoji-cli)
    * npm i -g gitmoji-cli

    Para configurar o hook prepare-commit-msg para utilizar o padrão do commit
    * npx gitmoji -i

    Agora vamos continuar o processo de versionamento.

    #/home/rfpereira/github/live/chatcollab>git add .

    #/home/rfpereira/github/live/chatcollab>git commit
    `Não precissa passar o -m já que vamos utilizar o gitmoji`

    ## Storebook



    ### Instalar no projeto
    * `npx sb init`





    * [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
  15. phaelfp revised this gist Feb 17, 2022. 2 changed files with 17 additions and 2 deletions.
    8 changes: 7 additions & 1 deletion Aula-1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,4 +17,10 @@
    * npx create-next-app@latest ou yarn create next-app (Para projetos JavaScript)
    * npx create-next-app@latest --typescript ou yarn create next-app --typescript (Para projetos com TypeScript)
    * npx create-react-app my-app ou yarn create react-app my-app (Para projetos JavaScript)
    * npx create-react-app my-app --template typescript ou yarn create react-app my-app --template typescript (Para projetos --template typescript)
    * npx create-react-app my-app --template typescript ou yarn create react-app my-app --template typescript (Para projetos --template typescript)

    yarn create vite chatcollab --template react-js

    cd chatcollab

    continua na próxima aula
    11 changes: 10 additions & 1 deletion Aula-2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,17 @@
    #:sparkles: - Aula 2

    ## Criando o repositório no github e comitando o trabalho anterior

    #/home/rfpereira/github/live/chatcollab> git init
    #/home/rfpereira/github/live/chatcollab> git remote add origin [email protected]:phaelfp/chatcollab.git

    Antes de continuar vamos fazer algumas configurações para padronização de código em projetos

    * Instalar o eslint `yarn create @eslint/config`

    ## Visual Code - IDE de desenvolvimento

    * Para se trabalhar em equipes grandes é necessário a adoção de padrões de código.


    Podemos utilizar para isso o eslint e junto com ele o Prettier

  16. phaelfp revised this gist Feb 17, 2022. 2 changed files with 22 additions and 25 deletions.
    23 changes: 1 addition & 22 deletions Aula-1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,25 +17,4 @@
    * npx create-next-app@latest ou yarn create next-app (Para projetos JavaScript)
    * npx create-next-app@latest --typescript ou yarn create next-app --typescript (Para projetos com TypeScript)
    * npx create-react-app my-app ou yarn create react-app my-app (Para projetos JavaScript)
    * npx create-react-app my-app --template typescript ou yarn create react-app my-app --template typescript (Para projetos --template typescript)

    # Visual Code - IDE de desenvolvimento

    * Para se trabalhar em equipes grandes é necessário a adoção de padrões de código.

    Podemos utilizar para isso o eslint e junto com ele o Prettier

    ## Plugins
    * Para utilizar o [EsLint](https://eslint.org/) usamos o [VS Code Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    * Para ajudar na formatação/padronização do código com o [Prettier](https://github.com/prettier/eslint-config-prettier) usamos o [Prettier VS COde](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

    # Controle de versão - GIT

    Mesmo tendo o Eslint e o Prettier instalado e configurado no Visual Code o desenvolvedor pode desablitar a sua funcionalidade
    Então utilizamos um recurso do Git chamada Hooks.

    Navegando no diretório do projeto após ter executado o git init temos um diretório oculto (.git) dentro dele temos o diretório hooks com exemplos das ações do git que podemos fazer o hook.

    Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o [Husky](https://github.com/typicode/husky)

    ##
    * npx create-react-app my-app --template typescript ou yarn create react-app my-app --template typescript (Para projetos --template typescript)
    24 changes: 21 additions & 3 deletions Aula-2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,21 @@
    # Visual Code
    ## Plugin VS Code
    * [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
    #:sparkles: - Aula 2

    ## Visual Code - IDE de desenvolvimento

    * Para se trabalhar em equipes grandes é necessário a adoção de padrões de código.

    Podemos utilizar para isso o eslint e junto com ele o Prettier

    ### Plugins
    * Para utilizar o [EsLint](https://eslint.org/) usamos o [VS Code Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    * Para ajudar na formatação/padronização do código com o [Prettier](https://github.com/prettier/eslint-config-prettier) usamos o [Prettier VS COde](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
    * [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)

    ## Controle de versão - GIT

    Mesmo tendo o Eslint e o Prettier instalado e configurado no Visual Code o desenvolvedor pode desablitar a sua funcionalidade
    Então utilizamos um recurso do Git chamada Hooks.

    Navegando no diretório do projeto após ter executado o git init temos um diretório oculto (.git) dentro dele temos o diretório hooks com exemplos das ações do git que podemos fazer o hook.

    Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o [Husky](https://github.com/typicode/husky)
  17. phaelfp revised this gist Feb 17, 2022. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions Aula-2.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    # Visual Code
    ## Plugin VS Code
    * [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
  18. phaelfp revised this gist Feb 17, 2022. 1 changed file with 12 additions and 1 deletion.
    13 changes: 12 additions & 1 deletion Aula-1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -27,4 +27,15 @@ Podemos utilizar para isso o eslint e junto com ele o Prettier

    ## Plugins
    * Para utilizar o [EsLint](https://eslint.org/) usamos o [VS Code Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    * Para ajudar na formatação/padronização do código [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
    * Para ajudar na formatação/padronização do código com o [Prettier](https://github.com/prettier/eslint-config-prettier) usamos o [Prettier VS COde](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

    # Controle de versão - GIT

    Mesmo tendo o Eslint e o Prettier instalado e configurado no Visual Code o desenvolvedor pode desablitar a sua funcionalidade
    Então utilizamos um recurso do Git chamada Hooks.

    Navegando no diretório do projeto após ter executado o git init temos um diretório oculto (.git) dentro dele temos o diretório hooks com exemplos das ações do git que podemos fazer o hook.

    Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o [Husky](https://github.com/typicode/husky)

    ##
  19. phaelfp revised this gist Feb 17, 2022. 1 changed file with 21 additions and 2 deletions.
    23 changes: 21 additions & 2 deletions Aula-1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    ## :sparkles: Aula 1º
    # :sparkles: Aula 1º

    ## Tópicos abordados:
    * Layout Mobile First - Técnica muito utilizada no mercado!
    * Primeiro se faz o layout para o mobile e depois para o desktop
    * Porque a maioria dos acessos as aplicações web hoje são provenientes do Celular.
    @@ -8,4 +9,22 @@
    * Site do [Vite Js](https://vitejs.dev/) :rocket: Iremos utilizar este
    * Site do [Create React App](https://create-react-app.dev/) - Foi o primeiro a ser desenvolvido
    * Site do [Next JS](https://nextjs.org/) - É um Framework para utilizar com o React
    * Explicado porque algumas ferramentas precisam de build e algumas ferramentas para build [Web Pack](https://webpack.js.org/), [Gulp](https://gulpjs.com/), [RollupJS](https://rollupjs.org/guide/en/) é a que o Vite JS utiliza.
    * Explicado porque algumas ferramentas precisam de build ([bundle](https://webpack.js.org)) e algumas ferramentas para build [Web Pack](https://webpack.js.org/), [Gulp](https://gulpjs.com/), [RollupJS](https://rollupjs.org/guide/en/) é a que o Vite JS utiliza.
    * Explicado o que quem é responnsável compilação do JS do React JS [Babel](https://babeljs.io/) e que tem outros como o [EsBuild](https://esbuild.github.io/) e o [Remix](https://remix.run/)
    * Comandos para se criar um novo projeto React
    * yarn create vite [Name Project] --template react-js (Para projetos JavaScript)
    * yarn create vite [Name Project] --template react-ts (Para projetos com TypeScript)
    * npx create-next-app@latest ou yarn create next-app (Para projetos JavaScript)
    * npx create-next-app@latest --typescript ou yarn create next-app --typescript (Para projetos com TypeScript)
    * npx create-react-app my-app ou yarn create react-app my-app (Para projetos JavaScript)
    * npx create-react-app my-app --template typescript ou yarn create react-app my-app --template typescript (Para projetos --template typescript)

    # Visual Code - IDE de desenvolvimento

    * Para se trabalhar em equipes grandes é necessário a adoção de padrões de código.

    Podemos utilizar para isso o eslint e junto com ele o Prettier

    ## Plugins
    * Para utilizar o [EsLint](https://eslint.org/) usamos o [VS Code Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    * Para ajudar na formatação/padronização do código [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
  20. phaelfp revised this gist Feb 17, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,5 +15,5 @@ O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com
    * client-collabchat-home

    ### Backend for FrontEnd
    * continues
    ...

  21. phaelfp revised this gist Feb 17, 2022. 2 changed files with 11 additions and 10 deletions.
    11 changes: 11 additions & 0 deletions Aula-1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    ## :sparkles: Aula 1º

    * Layout Mobile First - Técnica muito utilizada no mercado!
    * Primeiro se faz o layout para o mobile e depois para o desktop
    * Porque a maioria dos acessos as aplicações web hoje são provenientes do Celular.
    * Explicado o conceito de Squads e [Micro FrondEnd](https://micro-frontends.org/). Exemplos: Gmail, Spotify.
    * Explicado o que é React e as formas de se criar um projeto com React
    * Site do [Vite Js](https://vitejs.dev/) :rocket: Iremos utilizar este
    * Site do [Create React App](https://create-react-app.dev/) - Foi o primeiro a ser desenvolvido
    * Site do [Next JS](https://nextjs.org/) - É um Framework para utilizar com o React
    * Explicado porque algumas ferramentas precisam de build e algumas ferramentas para build [Web Pack](https://webpack.js.org/), [Gulp](https://gulpjs.com/), [RollupJS](https://rollupjs.org/guide/en/) é a que o Vite JS utiliza.
    10 changes: 0 additions & 10 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,13 +17,3 @@ O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com
    ### Backend for FrontEnd
    * continues

    ## :sparkles: Aula 1º

    * Layout Mobile First - Técnica muito utilizada no mercado!
    * Primeiro se faz o layout para o mobile e depois para o desktop
    * Porque a maioria dos acessos as aplicações web hoje são provenientes do Celular.
    * Explicado o conceito de Squads e [Micro FrondEnd](https://micro-frontends.org/). Exemplos: Gmail, Spotify.
    * Explicado o que é React e as formas de se criar um projeto com React
    * [Vite Js](https://vitejs.dev/)
    * [Create React App](https://create-react-app.dev/)
    * [Next JS]()
  22. phaelfp revised this gist Feb 17, 2022. 1 changed file with 25 additions and 3 deletions.
    28 changes: 25 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,29 @@
    # Aulas de React Feliz
    # :tada: React com Micro FrontEnd - Aulas de React Feliz

    ## Aula 1º
    O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com Squads utilizando React. Normalmente quando temos times focados em partes do produto e comum a adoção da arquitetura de Micro FrontEnd.
    ## Squads
    * Account
    * Home
    * Chat

    ## Projects

    ### Clients
    * client-collabchat
    * client-collabchat-account
    * client-collabchat-chat
    * client-collabchat-home

    ### Backend for FrontEnd
    * continues

    ## :sparkles: Aula 1º

    * Layout Mobile First - Técnica muito utilizada no mercado!
    * Primeiro se faz o layout para o mobile e depois para o desktop
    * Porque a maioria dos acessos as aplicações web hoje são provenientes do Celular.
    * Porque a maioria dos acessos as aplicações web hoje são provenientes do Celular.
    * Explicado o conceito de Squads e [Micro FrondEnd](https://micro-frontends.org/). Exemplos: Gmail, Spotify.
    * Explicado o que é React e as formas de se criar um projeto com React
    * [Vite Js](https://vitejs.dev/)
    * [Create React App](https://create-react-app.dev/)
    * [Next JS]()
  23. phaelfp created this gist Feb 17, 2022.
    7 changes: 7 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    # Aulas de React Feliz

    ## Aula 1º

    * Layout Mobile First - Técnica muito utilizada no mercado!
    * Primeiro se faz o layout para o mobile e depois para o desktop
    * Porque a maioria dos acessos as aplicações web hoje são provenientes do Celular.