As 10 skills que todo front end deve saber
Tags: react, nextjs, graphql, typescript
Published: 2022-06-27 07:44:08

Olá devs no post de hoje vamos listar as 10 skills que todo front end deve saber.

Essas skills que estão listadas neste post vão ti transformar em um desenvolvedor front end mais capacitado para enfrentar os desafios do mercado de trabalho.

As skills são as seguintes. 

## 1- Reactjs

Reactjs é  uma biblioteca javascript criada pelo Facebook que facilita o desenvolvimento de interfaces web, mobile, desktop e TV.

O Reactjs é uma das skills mais procuradas pelos recrutadores das empresas. 

Algumas empresas que usam o Reactjs para criar as suas interfaces Facebook, NETFLIX, Uber,Walmart, Instagram,Tesla, playpal e muito.

Alguns lugares para aprender react.
- [Discover da rocketseat](https://app.rocketseat.com.br/discover/course/especializar-react)
- [w3schools](https://www.w3schools.com/react/default.asp)



## 2- Nextjs

Nextjs  é  um Framework React criado pela vercerl que facilita a geração de páginas estáticas e geração de páginas no lado servidor assim melhorando o desempenho das páginas na web.

Alguns lugares para aprender Nextjs 

- [Site do nextjs](https://nextjs.org/)


## 3- Typescript

Typescript é um superset do javascript ou um linguagem de programação baseada no javascript que adiciona tipagem na syntax do javascript.

Alguns lugares para aprender Typescript

- [w3schools](https://www.w3schools.com/typescript/index.php)
- [Video da rocketseat](https://youtu.be/0mYq5LrQN1s)
- [Video Matheus Battisti](https://youtu.be/lCemyQeSCV8)


## 4- Tailwind CSS
Tawind css é uma biblioteca css tipo Materializar e bootstrap que não escrevemos css só adicionamos classes no html e o html fica estilizado.

Existe uma diferença entre Tailwind css e outras bibliotecas css que só adicionam classes no html.

As outras bibliotecas css já vêm com layouts prontos. Para você usar já  o Tailwind css você é quem cria o seu próprio layout.

Alguns lugares para aprender Tailwind css.

- [Tailwind css](https://tailwindcss.com/docs/installation)

## 5- Axios
Axios é uma biblioteca javascript que facilita requisição de apis.

Alguns lugares para aprender Axios.

- [Axios](https://axios-http.com/docs/intro)


## 6- Graphcms

Graphcms é cms Headless que facilita o gerenciamento de dados para aplicações e fornece esses  dados através de uma api graphQL.

Alguns lugares para aprender Graphqlcms

- [Graphcms](https://graphcms.com/)

## 7- GraphQL
GraphQL é uma query language criada pelo Facebook que  vêm com a proposta de acabar com os problemas de dados a menos  ou dados  a mais que apis restfull  enfrentam.

GraphQL só retorna os dados que aplicação necessita nada a menos nem nada a mais.

Alguns lugares para aprender GraphQL

- [Full cycle](https://youtu.be/NJsSsLmQPN4)


## 8- Apollo-client

Apolo-client é  uma biblioteca que facilita a requisição de apis GraphQL.

Alguns lugares para aprender Apollo-client

- [apollo-client](https://www.apollographql.com/docs/react/)


## 9- ODM / ORM

ODM e ORM são ferramentas que facilita o trabalho na hora de trabalhar com bancos de dados.

Alguns ODM

- [Mongoose](https://mongoosejs.com/)

Alguns ORM 

- [Prisma](https://www.prisma.io/)
- [TypeORM](https://typeorm.io/)

## 10- Google analytcs

Google analytcs é uma ferramenta para analisar as métricas dos teu sites.

Quantas views teve uma página, quando tempo um usuário demorou no teu site, qunado de dinheiro faturou esse mês esses é muitos outros dados você encontra no Google analytcs 

Alguns lugares para aprender Google analytcs 

- [Google analytcs](https://analytics.google.com/analytics/web/)


Com todas essas skills no teu currículo com certeza a tua carreira vai sair do zero para o 100%.

Si este conteúdo foi relevante para você por favor si inscreve no meu Blog porque todas as semanas vai ter conteúdo novos sobre programação no celular termux vim nodejs reactjs nextjs javascript html css e muito mais até ao próximo post dev. o lema é **Mão na Massa**.

Link do meu blog [mao-na-massa](https://mao-na-massa.vercel.app/)