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..

github with slack

Credits goes to Sudheer Kumar Tumarada for creating this article with clear explanation.

Introduction:-

Many of us already knew about GIT and Slack .These became  part of our daily life for team collaboration and code sharing .Here i just want to give brief introduction about them and how can we integrate both for better productivity and team collaboration.

 

Slack:-

Slack is a communication tool which allows us to get shared understanding across the teams which will makes us more productive.

1.It’s the foundation for teamwork

2.It simplifies communication

3.It helps everyone find the answers they need

4.It streamlines your work flows

 

Github:-

Github is system which will allow multiple developers/users to work on the same repository/code base.

 

Github-Slack Integration:-

We can have github-slack integration which will allow us to get the information about commits,pull request,deployment statuses and many more.

We can get the following notifications for the events done on our team repository :

  • Commit events
  • Pull requests
  • Issue events
  • PR review events
  • Deployment statuses

 

We can connect Github to slack with following steps:

1)Visit GitHub in Slack’s App Directory.

2)Click Install.

3)Select a channel where GitHub events will be posted.

or click create a new channel to make a brand new one.

4)Click Add GitHub Integration.

5)Click Authenticate your GitHub account.

6)Choose the repositories you’d like Slack notifications for.

7)Choose the GitHub events you’d like to post to Slack.

8)If you’d like, you can customize the way Github posts appear in Slack by choosing a custom display name and icon.

9)When you’re done, click Save Integration.

Once you are done, you will start receiving notification in your slack channel.

Slack will automatically configure and manage which messages we receive from GitHub. To do this, we require write permission to your public and private repos.

 

If you’d prefer not to authenticate your GitHub account, you can switch to unauthed mode and manage the events yourself.