React Redux Basics

Redux mapStateToProps and mapDispatchToProps Shorthand

View story at Medium.com

Advertisements

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

https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

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.

Source: https://themeteorchef.com/tutorials/understanding-props-and-state-in-react

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>
    );
  }
}

Functional:


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: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Container Vs Presentation Components

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

React for beginners

Lifecycle:

Quick Crash Course is here..

https://medium.freecodecamp.org/rock-solid-react-js-foundations-a-beginners-guide-c45c93f5a923

https://engineering.opsgenie.com/i-wish-i-knew-these-before-diving-into-react-301e0ee2e488
https://medium.freecodecamp.org/rock-solid-react-js-foundations-a-beginners-guide-c45c93f5a923
View story at Medium.com
View story at Medium.com