Build a React Typescript and Axios example to consume Web API with Router & React-Bootstrap.
Functions:
- List all characters view
- Display an indicator to know if a character is in favorites list
- Filter characters by name, status or gender
- Detail character’s view
- Display a button to add the character to a favorites list, in case the character is in favorites list it will be removed from favorites list
- 404 Page
Rules Build the frontend using:
- React with Hooks
- Context as state management tool
- react-bootstrap library
- Typescript
Additional JS libraries:
- axios Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
- react-icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
This project was bootstrapped with Create React App.
.env
PORT=8081
In the project directory, you can run:
npm install
# or
yarn install
or
npm start
# or
yarn start
Open http://localhost:8081 to view it in the browser.
The page will reload if you make edits.