Read it in English

Aplicação desenvolvida ao longo do curso de React Router da Alura.

O curso foca nos conceitos básicos do React Router, além de utilizar Axios e json-server para consumo de API. Durante o andamento do curso, optei por usar as versões mais recentes do React e do react-router-dom, além de refatorar o CSS comum para styled-components, como prática adicional.

Alterações em relação ao projeto original:

Update do React v17.0.1 pela v18.2.0

Update do React Router v5.2.0 pela v.6.3.0

Refatoração do CSS padrão para styled-components

Implicações: uso diferente de BrowserRouter, Routes e Route; descontinuado o uso do hook useRouteMatch; substituição do hook useHistory por useNavigate; remoção da importação do React onde desnecessário.

🪧 Vitrine.Dev
✨ Nome	Doguito Blog - Alura
🏷️ Tecnologias	React, Styled Components, Axios, json-server, JavaScript
🚀 URL	Veja como rodar localmente em ⚙️ Como usar
🔥 Desafio	Conteúdo do curso

Detalhes do projeto

Para experimentar a aplicação em sua totalidade, você pode roda-lo localmente. Para isso, siga as etapas a seguir:

1. Faça o download deste repositório através do botão verde Code no topo da página e, em seguida, clicando em Download ZIP. Ou, se preferir, através do terminal (Git Bash, Powershell, etc.), use o comando:

git clone https://github.com/sucodelarangela/doguito-blog.git

1. Acesse a pasta do projeto com seu terminal;

2. Rode o comando npm install para instalar as dependências;

3. Inicie o servidor localmente com o comando npm run server. Você deve receber a seguinte mensagem de confirmação:

> [email protected] server
> json-server --watch db.json --port 5000


  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:5000/categorias
  http://localhost:5000/posts

  Home
  http://localhost:5000

  Type s + enter at any time to create a snapshot of the database
  Watching...

1. Para iniciar a aplicação, rode o comando npm start no terminal. Você deve receber a seguinte mensagem de confirmação:

You can now view react-router in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.171:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

1. Para usar a aplicação, abra o seu browser preferido e acesse o endereço http://localhost:3000/

🔼 Voltar ao topo

---

🔎 Overview

Application developed during the React Router course from Alura.

This training courses focuses on React Router basic concepts and also makes use of Axios and json-server for API fetching. During this course, I've chosen to use the most recent versions of React and react-router-dom and have also refactored the standard CSS styles to styled-components as additional practice.

Changes made to the original project:

Update from React v17.0.1 to v18.2.0

Update from React Router v5.2.0 to v.6.3.0

Refactoring of standard CSS to styled-components

Implications: different use of BrowserRouter, Routes e Route; discontinuation of useRouteMatch hook; substitution of useHistory hook for useNavigate hook; deleting React imports where not necessary.

⚙️ How to use it

For full access to the app functionalities, you can run it locally on your machine. In order to do so, follow the steps below:

1. Download this repository by clicking the green Code button on top of the page and then clicking Download ZIP option. Or use the following command on your terminal (Git Bash, Powershell, etc.):

git clone https://github.com/sucodelarangela/doguito-blog.git

1. Access the project root folder on your terminal;

2. Run npm install to install all project dependencies;

3. Start the json-server locally with the command npm run server. You should receive the following message:

> [email protected] server
> json-server --watch db.json --port 5000


  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:5000/categorias
  http://localhost:5000/posts

  Home
  http://localhost:5000

  Type s + enter at any time to create a snapshot of the database
  Watching...

1. To start the application, run npm start on yout terminal. You should receive the following message:

You can now view react-router in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.171:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

1. To use the app, open your favorite browser and go to the URL http://localhost:3000/

🔼 Back to top

---

Developed with 🧡 by @sucodelarangela