In this section, you will come across all the UI frameworks of React along with their usage, features, importance, and popularity. These frameworks are built using a set of React Components for easier and faster web development. You will also learn about the usage of stylish components in ReactJS. You will get through some of the key essentials of frameworks and components below

• Styling React components. The different ways of styling the react components.
• Inline styles and external styles to the components.
• Styling patterns in React Components – using sass
• Using styled-components.
• Introduction to ReactJS UI frameworks – react bootstrap, reactstrap,react-semantic UI , material-ui etc.
• Integrating and using the above UI frameworks in ReactJS.
• Creating a navigation-bar in reactJS using the above frameworks.
• Creating page-views components.
• Creating a reasonable dynamic Jumbotron/banner.
• Introduction to React Router.
• Creating Routes to our Navigation Bar.

Learning Outcome :
By the end of this module, you will gain expertise in using various React components for quick web application development and you will also understand the importance of React UI frameworks.

• Advanced Components configuration with the state, props, and children.
• Props and prop-types and default props, Understanding the children property, Understanding and using state, and Differences between props and state
• Handling Events with methods
• Manipulating the state with setState() method
• Difference between stateless and stateful components.
• Passing method references between components.
• Adding two-way binding.
• Rendering content conditionally.
• Making API REQUESTS with React.
• Fetching data – Axios vs Fetch.
• Building Lists of Customers.
• Handling requests with async-await.
• Updating state immutably and after async request.
• Rendering Customers.
• Review of Map Statements.
• Rendering Lists of components.
• The purpose of keys in lists and Implementing keys in lists.
• Handling errors gracefully.

Learning Outcome :
You will gain a clear idea about React.js architecture and its components upon the completion of this module.

In this segment, you will gain a clear understanding of the open-source JavaScript library called Redux. It is used along with the most frequently used libraries such as Angular and React for managing the state of the application. The Redux framework has an architecture similar to that of Facebook's Flux architecture and is used for building user interfaces. Furthermore, you will come across advanced react concepts in this section like performing actions for retrieving and passing data, reducer setup, form handling, debugging, and many more. You will get to know more about key highlights of Redux and the advanced concepts of React below

• Using Refs for DOM Access.
• Redux, and The complexity of managing state.
• Understanding the Redux flow.
• Adding Redux to the React Project and Redux Devtools.
• Setting Up the Reducer and the Store.
• Dispatching the Actions.
• Adding Subscriptions.
• Connecting React to Redux.
• Connecting the store to react.
• Dispatching the Actions from within the Component.
• Passing and Retrieving Data with Actions.
• Switch Case in the reducer

Learning Outcome :
By the end of this section, you will gain deeper insights into the Redux framework and its applications. You can manage the state of the applications using Redux easily.

Hooks are the latest additional feature in the React 16.11. They provide the best ways to use other React features and state without declaring a class. Additionally, they allow users to share reusable behaviors that are independent of components implementation. Below you will get more key details about React hooks.

• React Hooks – An Introduction, Why React Hooks
• Moving from classes to functional components
• Introducing the first Hook: useState Hook and Second Hook: useEffect Hook
• Data Fetching with hooks/replacing the class lifecycle methods
• Fetching data on component mount with useEffect
• Using async/wait for fetching data in useEffect
• Building custom Hooks
• Hooks under the hood: How hooks work
• Implementing a login form using Hooks and multiple state values.
• Implementing a register form using hooks
• Comparing ways of managing state
• Fetching search results on component update with useEffect

Learning Outcome :
You will gain expertise on hooks and also you can manipulate the state of the functional components without converting them into class components by the end of this section.