How to create Ecommerce app using React +MobX +Typescript +Bootstrap | React Mobx Project | Part -

How to create Ecommerce app using React +MobX +Typescript +Bootstrap | React Mobx Project | react project kaise banaye | Part - 1

Mobx is an open-source state management library. MobX helps to manage the library in the web application. We can use the state management library in large applications. MobX is the same as Redux.

Project link: https://github.com/anujsingla/ecommercewebsitewithmobx.git
Part2 video link: https://youtu.be/JC1teG8Gf1s
APIs - https://fakestoreapi.com/docs

⏰ Timecodes ⏰
0:00 Introduction to Ecommerce app using React + MobX
5:07 Create React project with create react app
8:07 Include Bootstrap CSS in the project
10:07 Create Components and structure
32:07 Include React router in the project
42:07 Conclusion


/*
KeyNotes:

State management is a very important part of web applications.
State management means how our application handles data in the component, shares data
between components.
Suppose if we fetch the data from the server, how we will share between
components and manage states like loading, fetching, and error state.

There are multiple ways to manage state in React app:
useState Hook
Context
Redux
MobX
Recoil

There are multiple factors to decide the state management library:
- Size and complexity of the app
- How many components need to share the data

small state - useState, context
medium state - Recoil
Large state - Redux, MobX

Question: What is the MobX state management library?

Answer: It is an open-source state management library. It helps to manage the library in the web application. We can use this library in large applications. It is the same as Redux.

It is standalone and does not depend on any frontend library or framework.
It can work with any framework like React, Vue, Angular.

There are multiple concepts in MobX
State - state is the data that drives your application. The state can be an object,
array or a primitive value.

Store - The main responsibility of the store is to move
the logic and state out of components that can be used
in multiple components.

The store is any data structure like an array, object, or primitive value. We should
marked all the values in the store as "observale" so that MobX can track them.

Action - Actions are methods that manipulate and update the state.
We can trigger action on user events, backend data pushes, scheduled events.

observer - it is a higher-order component. we use observer in the react component. It will help to render the component or update the UI if the state
changes.

how data flow in MobX
action - state - update state - update UI
Event trigger - Action - observable state - computed values - side-effect (UI)

*/

Support my channel:
https://www.buymeacoffee.com/anujsingla

(Free Courses)
React course :- https://bit.ly/3qXnSYU
Javascript course :- https://bit.ly/3qYCG9u
Typescript course :- https://bit.ly/3qY9Fe6
Frontend Interview Questions and Answer - https://www.youtube.com/playlist?list=PLEtjGa9VEukMRyitRx0nitoCD8u2XEYiz
HTML Tutorial for Beginners to advance - https://www.youtube.com/playlist?list=PLEtjGa9VEukMJvP4Z8O01LvkCB7-1myXu
NPM - https://www.youtube.com/playlist?list=PLEtjGa9VEukO4Ud2SGoHhuFYCPfDAzFjd
Remix run React framework Tutorial in Hindi - https://www.youtube.com/playlist?list=PLEtjGa9VEukMKVhD0GKHthRmwVMFWjaeW

(Social Media Links)
Twitter : https://twitter.com/singla387
Facebook page : https://bit.ly/3nZlyyx
Telegram : https://bit.ly/3nX2v8f
LinkedIn : https://bit.ly/3rIMt2A



About Me:-
I am Anuj Singla, and working as a Senior Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, Typescript. I want to teach web development to everybody.



Key Points:


Tags :-
#mobx #mobxproject #react #anujsingla #typescript #hindi #html #css

------------------------------------------------------------------------------------
Special thanks to Tarun Garg for the video edit and Thumbnail Design.

Instagram :- https://www.instagram.com/tarunnn_4
------------------------------------------------------------------------------------