• +91 9988773176
  • office@simbacourse.com

Syllabus

Basics of JS

  • History of JavaScript
  • What is ES6
  • Block scope, let & const
  • Template literals
  • Arrow functions
  • Spread and Rest operators
  • Object literal improvements
  • Classes
  • Inheritance
  • Static properties and methods
  • Promises
  • Iterators and Iterables
  • Generators
  • Modules
  • Set and Map

ReactJS

  • What is React?
  • Templating using JSX
  • Working with React Create Element, Expressions, Using logical operators, Specifying attributes, Specifying children

Components:

  • Significance of component architecture
  • Types of components
  • Functional
  • Class based
  • Pure
  • Component Composition

State and props

  • What is state and it significance
  • Read state and set state
  • Passing data to component using props
  • Validating props using prop Types
  • Supplying default values to props using default Props

Rendering lists

  • Using React key prop
  • Using map function to iterate on arrays to generate elements

Event Handling in React

  • Understanding React event system
  • Understanding Synthetic event
  • Passing arguments to event handlers

Working with forms

  • >Controlled components
  • Uncontrolled components
  • Understand the significance to default Value prop
  • Using react ref prop to get access to DOM element

Routing with react router

  • Setting up react router
  • Understand routing in single page applications
  • Working with Browser Router and Hash Router components
  • Configuring route with Route component
  • Using Switch component to define routing rules
  • Making routes dynamic using route params
  • Working with nested routes
  • Navigating to pages using Link and Nav Link component
  • Redirect routes using Redirect Component
  • Using Prompt component to get consent of user for navigation
  • Path less Route to handle failed matches

Just Redux

  • What is redux
  • Why redux
  • Redux principles
  • Install and setup redux
  • Creating actions, reducer and store

Immutable.js for immutable data structures

  • What is Immutable.js?
  • Immutable collections
  • Lists
  • Maps
  • Sets

React Redux

  • What is React Redux
  • Why React Redux
  • Install and setup
  • Presentational vs Container components
  • Understand high order component
  • Understanding mapStateToProps and map DispatchtToProps usage

Webpack primer

  • What is webpack
  • Why webpack
  • Install and setup webpack
  • Working with webpack configuration file
  • Working with loaders
  • Quick word on code splitting, lazy loading, tree shaking
  • Setting up Hot Module Replacement

Server-side rendering with React

  • What is server-side rendering (SSR)?
  • Why SSR
  • Working with render To String and render To Static Markup methods

Feature of ReactJS

  • Virtual DOM- Like an actual DOM, virtual DOM is also a node tree that lists the elements and their attributes and content as Objects and their properties. React’s render function creates a node tree out of the react components. Then, it updates this tree in data model caused by various actions done either by the user or by the system.
  • JSX- JSX stands for JavaScript XML and is a React extension that allows us to write JavaScript that looks like HTML. JSX makes React a lot more elegant and it is an object-oriented programming language designed to run on modern web browsers.
  • Server-Side Rendering (SSR) - Server-Side rendering allows you to pre-render the initial state of your react components at the server side only. The server’s response to the browser becomes only the HTML of the page which is now ready to be rendered with SSR. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed.
  • One-way Data Binding- Unlike other frameworks, ReactJS follows unidirectional data flow or one-way data binding. The main benefit of One-Way-Data binding is that throughout the application the data flows in a single direction which gives you better control over it.
  • Learning Curve- With a basic knowledge of programming you can learn ReactJS. If you have previous knowledge of HTML, you can easily learn ReactJS.

Benefits of ReactJS

  • Single Page Application
  • Entire page remains the same but only a few components change
  • A Code is easy to scale and maintain
  • More functionalities as HTML is created from JS
  • Isomorphic Rendering (Server-side rendering)
  • Easy to learn and use
  • Simplicity