React is Javascript library for building fast and interactive user interfaces. It was developed at Facebook in 2011 and it’s the most popular Javascript library for building user interfaces. If you see in the Google trends, React is dominating the space of libraries and frameworks for building user interfaces. The other two players are Angular and Vue. So, if you want to expand your job opportunities as front-end developer, you should have React in your resume.

At the heart of all React applications are components, a component is essentially a piece of user interface. So, when building applications with React, we build a bunch of independent, isolated and reusable components and then compose them to build complex user interfaces. Every React application has at least one component, which we refer to as the root component. This component represents the entire application and contains other child components. So, every React application is essentially a tree of components.

Here is an example, let’s imagine we want to build an application like Facebook, so we can split the page into components like navbar, profile, trends and feed. You can build each components in isolation and compose them to build the whole user interfaces.

We have designed a basic guideline to get started with React. Once you have finished this, you will have taken a step towards becoming a skillful front-end developer in React. Are you ready to dive? Then let’s get started.

1. Introduction JS frameworks & Libraries
          1.1. What are the frameworks and Libraries?
          1.2. What is the difference between a traditional Website and a SPA?
          1.3. Why should we learn the frameworks?
          1.4. Which frameworks should we learn?

2. Introduction to ReactJS
          2.1. How Reactjs works?
          2.2. How to set up the environment?
          2.3. Folder structure and hello world in Reactjs
          2.4. What is JSX?
          2.5. How to use JSX?
          2.6. Rendering Elements
          2.7. Fragments

3. Components in ReactJS
          3.1. What is the component?
          3.2. Types of React components
          3.3. Specifying Children
          3.4. Embedding expressions and setting attributes
          3.5. Rendering lists
          3.6. Conditional rendering

4. State & Props in ReactJS
          4.1. What are the state and props?
          4.2. Why do we need the state?
          4.3. How to update the state?
          4.4. How to pass props?
          4.5. Props vs State
          4.6. Lifting the state up
          4.7. Destructuring arguments

5. Composing Components in ReactJS
          5.1. Introduction
          5.2. Composing components
          5.3. Passing data to components
          5.4. Passing Children
          5.5. Render props
          5.6. Type Checking with PropTypes
          5.7. Understand the default props

6. Handling Events in ReactJS
          6.1. What is the event?
          6.2. Binding event handlers
          6.3. Raising and handling events

7. Life cycle phases in ReactJS
         7.1. Mounting phase
         7.2. Updating phase
         7.3. Unmounting phase

8. Client Storage
         8.1. Introduction
         8.2. Building a form
         8.3. Controlled and uncontrolled Elements
         8.4. Handling multiple inputs
         8.5. Handling form submission
         8.6. Validation
         8.7. Building signup and login form

9. Introduction to Hooks in ReactJS
         9.1. Introduction
         9.2. useState hook
         9.3. useEffect hook
         9.4. useRef hook
         9.5. useLayoutEffect hook
         9.6. useCallback hook
         9.7. useMemo hook

10. Introduction to Router
         10.1. Introduction
         10.2. Setup
         10.3. Adding Routing
         10.4. Switch
         10.5. Link
         10.6. Route props
         10.7. Passing Props
         10.8. Route Parameters
         10.9. Optional Parameters
         10.10. Query String Parameters
         10.11. Redirect
         10.12. Programmatic Navigation

11. Introduction to Redux
         11.1. Introduction
         11.2. Why do we need redux?
         11.3. Understanding the core concepts of Redux
         11.4. CreateStore
         11.5. CombineStore
         11.6. ApplyMiddleware
         11.7. BindActionCreators
         11.8. Compose