/Portfolio_TypeScript

Primary LanguageTypeScript

đź“Ś Requisitos:

  1. A lista de tecnologias deve ser um array onde no HTML você irá fazer um map para listar

  2. Ao clicar no botão de linguagem o texto de apresentação "Olá meu nome...." muda para a linguagem selecionada

  3. O botão de linguagem deve ser um componente onde você passará 3 propriedades: Título, ícone e o click dele

  4. Nesse projeto eu utilizei React com Styled Components

icons8-reaccionar-80 (2) styled

Passo a passo do Projeto

1Âş NODE

2Âş YARN OU NPM

3Âş PowerShell

  • npm create vite@latest
  • Vai fazer uma pergunda e digitamos y
  • Vai pedir o nome do projeto
  • Vai pedir o Framework que será utilizado
  • Por fim vai pedir a variant que no meu caso Ă© o TypeScript

Após o procedimento acima, basta selecionarmos a pasta aonde o arquivo foi criado utilizando o comando cd + o nome da pasta. Após isso digitamos npm install e logo em seguida abrimos nosso Visual code e digitamos no terminal o comando npm run dev que irá abrir o browser de compilação no Local: http://127.0.0.1:5173/

Instalando nosso Styled Components

Em nosso terminal do VsCode digitamos o comando a seguir:

npm install --save styled-components.

Essa biblioteca nos permite trabalhar com o CSS dentro do React com TypeScript, mas para isso temos que importá-la para o projeto e utilizá-la em nossos arquivos de style.ts de cada pasta criada.Para cada tag que eu criei em meu arquivo index.tsx eu dei um nome sugestivo e coloquei dentro do import para ser usado e estilizado no styed component do arquivo ts aonde criei e exportei uma const como o nome importado(Sugestivo) e atráves do styled. eu pude dizer se era um botão, uma div ou uma h1 e por ai vai. Vale a pena ressaltar que para o estilo global tivemos que importar o createGlobalStyle e criar uma constante e exportá-la para ser utilizado em todo o projeto (export const GlobalStyle = createGlobalStyle). Nesse projeto criei três pastas e cada uma ficou responsável por uma funcionalidade e todas possuem o index.tsx e um style.ts :

  • Uma com o nome componente e sua subpasta chamada botĂŁo,

  • Outra pasta criada foi a Header,

  • E a outra foi a Pages com uma subpasta chamada home.

    No componente botão fiz o uso do useState a qual foi importado e iniciei ele com a escrita principal "Olá meu nome...." a qual seria mudada segundo os botões criados na imagem abaixo que condiz com 3 funções criada nessa pasta a qual cada uma muda o estado principal da state para a linguagem selecionada.Fiz também o uso do props, aonde no app.tsx coloquei as informações referente a linguagem dos botões e através da função do Botão coloquei como parâmetro o comando props para conseguir usar as informações criadas no componente do App.tsx. Exemplo:

App.tsx

image

Pasta Botao export function Botao(props)

{props.pt} => Através do parâmetro consigo associar a propriedade ao compontent botão, ou seja, cada botão com sua escrita particular.

A pasta Header ficou responsável pelo cabeçalho do projeto e a pasta Pages responsável pelas páginas do projeto. Dentro da página Home no arquivo index.tsx, fiz três arrays, uma para cada coluna de tecnologia proposta no enunciado, e utilizei para cada array uma const coluna aonde foi possível fazer o map desses arrays e apartir dai chamei para dentro do meu codigo html da pasta Home. Exemplo:

const lista1 = ["JavaScript", "React", "Vue Js", "Tailwind CSS"]; const coluna1 = lista1.map(

(a) => <ul><li>{a}</li></ul>

)

  <Coluna1>{coluna1}</Coluna1>
  <Coluna2>{coluna2}</Coluna2>
  <Coluna3>{coluna3}</Coluna3>

Todas as páginas criadas foram exportadas para ser importadas em nosso arquivo App.tsx, que praticamente integra todas elas e esse arquivo App.tsx é exportado para main.tsx.

import { Header } from './Header/index'

function App() {

return (

<>
  <Header />
  <Home />
  <Botao />
  <GlobalStyle />

</>

) }

export default App

portugues

ingles

espanhol