React Redux Basics

Redux mapStateToProps and mapDispatchToProps Shorthand

View story at


React Basics – 3

Refs and the DOM

In the typical React dataflow, props are the only way that parent components interact with their children.

When to Use Refs

There are a few good use cases for refs:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

Avoid using refs for anything that can be done declaratively.

Lifecycle Methods in React

React Basics – 2

Understanding Props and State in React

What are props?

Per React’s Thinking in React documentation, props are best explained as “a way of passing data from parent to child.” That’s it. In essence, props are just a communication channel between components, always moving from top (parent) to bottom (child). A quick example:

Passing Data via Props

What is state?

State is another concept introduced by React and behaves a little bit differently from props. State is best described as how a component’s data looks at a given point in time. For example, consider our list of tacos from our props explanation above. Instead of using a static array to provide our list of tacos, let’s update our <Parent /> component to rely on state.


React Basics – 1

How many ways you can create a component?

Create a component:

ES6/7 classes:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div>Hey Sathya!</div>


const MyComponent = (props) => {
    return (
      <div>Hey Sathya!</div>

Whats the difference between ES6 classes and Functional Components?

Go with functional if your component doesn’t do much more than take in some props and render. You can think of these as pure functions because they will always render and behave the same, given the same props. Also, they don’t care about lifecycle methods or have their own internal state.

Because they’re lightweight, writing these simple components as functional components is pretty standard.

If your components need more functionality, like keeping state, use classes instead.

More info:

Container Vs Presentation Components

When to use Container and when to use Presentation components from the creator words..

React for beginners


Quick Crash Course is here..
View story at
View story at