Raiannecaroline / teste-estagio-react

Este repositório é para o teste do estágio

Home Page:https://teste-estagio-react-inky.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React + TypeScript + Vite

Olá 👋, eu sou a Raiane

Teste estágio 2023/2

🔭 Descrição do Projeto

Desenvolvi uma página, que consome a API do The Meal DB, que consiste em trazer receitas diversas. O desafio foi proposto pela Arise Technology e cumprido com muito esforço e dedicação.

Status do projeto

Finalizado

Link da demo

Tecnologias Utilizadas

html5 bash git react tailwind

javascript typescript

nodejs

📁 Acesso ao projeto

Indique como é possível baixar ou acessar o código fonte do projeto, seja projeto inicial ou final

🛠️ Abrir e rodar o projeto

Passo 1: Instalação do Node.js e npm ou Yarn

Certifique-se de ter o Node.js instalado no seu sistema. Você pode baixá-lo em nodejs.org.

Passo 2: Instalação do Vite

O Vite é uma ferramenta de desenvolvimento rápida que será usada para criar o projeto React. Você pode instalá-lo globalmente com o seguinte comando:

npm install -g create-vite
# ou, usando Yarn
yarn global add create-vite

Passo 3: Criação do Projeto

Agora, você pode criar um novo projeto React usando o Vite com o template "react":

create-vite my-react-app --template react
# ou, usando Yarn
yarn create vite my-react-app --template react

Isso criará uma estrutura básica de projeto React usando o Vite.

Passo 4: Acessando a Pasta do Projeto

Vá para a pasta do projeto recém-criado:

cd my-react-app

Passo 5: Instalação das Dependências

Dentro da pasta do projeto, você deve instalar as dependências do projeto, incluindo o Tailwind CSS e o React:

npm install
# ou, usando Yarn
yarn install

Passo 6: Configuração do Tailwind CSS

Agora, você precisa configurar o Tailwind CSS. Crie um arquivo de configuração do Tailwind chamado tailwind.config.js na raiz do seu projeto:

npx tailwindcss init -p

Isso criará um arquivo de configuração tailwind.config.js. Você pode personalizar as configurações do Tailwind conforme necessário.

Passo 7: Importação do Tailwind CSS

Abra o arquivo src/index.css e importe o Tailwind CSS:

/* src/index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Passo 8: Executando o Projeto

Agora, você pode iniciar o servidor de desenvolvimento para executar o projeto:

npm run dev
# ou, usando Yarn
yarn dev

O servidor de desenvolvimento Vite iniciará, e seu projeto React com o Tailwind CSS estará disponível em (alguma porta, que indicar no terminal)

Autora


Raiane Caroline Souza Teixeira Ferreira

Meu LinkedIn

https://www.linkedin.com/in/raiannecaroline/

About

Este repositório é para o teste do estágio

https://teste-estagio-react-inky.vercel.app


Languages

Language:TypeScript 94.0%Language:JavaScript 3.1%Language:HTML 1.6%Language:CSS 1.3%