React and Context API

What is Context API

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

Difference between Context API and Redux

Context API prompts a re-render on each update of the state and re-renders all components regardless. Redux, however, only re-renders the updated components. This can be monitored on the console as there’s a log in each component.

Context API Example

Getting Started

1. Create react app using npx create-react-app.

• I am going to use font-awesome for icons:

<link rel=”stylesheet” href=”https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity=”sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p” crossorigin=”anonymous”/>

• CSS I am going to use bootstrap and react-bootstrap

npm i react-bootstrap

1. create context API component

3. Add context API to the app in index.js file

4.Create files. App.js, App.css, Enteries.js, Enteries.css, Entry.js, Entry.css, AddNew.js , AddNew.css, Totals.js, Total.css

5. App.js structure:

6. Add State to our context API

7. Connect Context Api to Entery.js

8. Create Entry.js

Go ahead and try context API but adding these functionalities:

1. Create Entry
2. Edit Entry
3. Delete Entry
4. Add totals

Checkout answers from this repository

https://github.com/maru25-alt/react-contextApi.git

Happy Coding