React.Js
In this module, you will learn about ReactJS – an open-source JavaScript Library. This react.js is maintained by Facebook and mainly used for building user interfaces. The prominent feature of this JavaScript library is that it plays an important role in developing mobile or single-page applications. Moreover, in this section, you will get through various components of React, the importance of DOM, and the concept of Nesting. Below you will find a list of key concepts of ReactJS.
Our Course Content
Introduction
- Introduction
- Why Should I Learn React.Js
Introduction
- An Introduction to Web Application Development – Basic building blocks of Web Application Development. – HTML-CSS-JS
- Real World SPAs and React Web Apps.
- An Overview of ReactJS.
- Understanding Single Page Apps and Multi-Page Applications.
- What is a DOM, VirtualDOM, and ShadowDOM?
- Installing ReactJS and writing our first Hello World code.
- The Folder Structure of React Application.
- Basic Building Blocks of React JS – (components,state,props,jsx)
- What are the components? Understanding the component basics and different types of components.
- What are the functional components and container components?
- Creating your first class-based component and functional component.
- Understanding JSX and JSX restrictions.
- Creating more components and using them.
- Component Nesting.
- What are props and a simple understanding of props?
- Passing Props into components.
- Accessing props inside the components.
- Creating reusable dynamic components
React UI Frameworks and Styling Components
- 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.
React Architecture
- 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.
- Introducing Lifecycle methods.
- Why use Lifecycle methods
- Refactoring data loading to Lifecycle methods.
- Showing a loading spinner.
- Handling User Input with forms and events.
- Creating a SearchBar and Event Handlers
- Controlled Elements versus uncontrolled elements.
- Handling forms submitted.
- Understanding this in Javascript and solving context issues.
- Communicating child to parent.
- Invoking callbacks in children.
- Creating a custom Dynamic Input Component.
- Setting up a JS Config for the Form.
- Dynamically create inputs based on JSConfig.
- Adding a Dropdown component.
- Handling user Input of dynamic forms
- Handling form submission(MAKING API CALL USING AXIOS OR FETCH )
- Adding Custom Form Validation.
- Showing validation errors and other error messages.
- Handling overall form validity.
Redux
- 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.
- What is the provider and adding the provider?
- 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
- Updating the State and the Array Immutable.
- Outsourcing ACTION_TYPES
- Combining multiple Reducers.
- Understanding State types.
- Combining Local UI State and Redux.
- Handling Authentication in React.
- Handling Forms using REDUX-FORM.
- What are React Portals and when to use them?
- The Context System with React.
- Replacing Redux with Context or using both together.
- Higher-Order Components in React.
- The concept of Render Props.
- React Debugging
- Error Boundaries.
- React Fragments
- Memoizing in React.
- The concept of Render-Props in React.