reactjs, typescript, styled-components, eslint, prettier
Weather Forecast
Global weather forecast with temperature, humidity, heat sensation for the next 6 hours.
June 01, 2020
Weather Forecast
Project Name: Wheater Forecast
Development
- In the root directory (/weather-forecast) of the project, install all the necessary libraries for development with the command:
yarn install
- In the root directory (/weather-forecast) of the project, start the application in development mode at localhost with the command:
yarn start
Tech Introduction
- Developed using Typescript standards within React (create-react-app);
- The EsLint and Prettier libraries were used for identification and a better debugging of the code;
Basic Template
- Create the project with create-react-app;
create-react-app weather-forecast --template=typescript
Added Libraries
- Added the Eslint libraty to project in development mode:
yarn add eslint -D
- Added the following library in the development version, to import typescript by default:
yarn add eslint-import-resolver-typescript -D
- Added the Prettier library to the project in development mode:
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
- Added the Styled Components library to stylized the aplication:
yarn add styled-components
- Added the Axios library to HTTP request's:
yarn add axios
- Added the React Icons library to use some icons:
yarn add react-icons
Project Structure
The project contains the following folders
./src
- /components => Reusable application components;
- /pages => Application pages;
- /routes => Application routes;
- /styles => Global styles of aplication;
Some comments have been added to the code to improve understanding;