Add state management content

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-conext-state.md

@@ -1 +1,8 @@
-# Conext state
+# Context
+
+Context provides a way to pass data through the component tree without having to pass props down manually at every level.
+
+In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/context.html'>Official React Context Docs</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md

@@ -1 +1,9 @@
 # Redux
+
+Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/introduction/getting-started'>Official Getting Started to Redux</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://redux.js.org/tutorials/essentials/part-1-overview-concepts'>Official Tutorial to Learn Redux</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867'>Fundamentals of Redux Course from Dan Abramov</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md

@@ -1 +1,8 @@
-# Mobx
+# MobX
+
+MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mobx.js.org/'>MobX Official Website</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=WQQq1QbYlAw'>Intro to MobX Tutorial</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md

@@ -1 +1,6 @@
-# State management
+# State Management
+
+Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink>