Why do we need to understand the ReactJs life cycle methods?

Why do we need to understand the ReactJs life cycle methods?  #javascript

  • When you build an application in ReactJs you will have to split the UI into reusable components and think about each of them in isolation.When the user interacts with our application in ReactJs, for example, by hovering, pressing a key, clicking… These actions trigger many other events on the UI…
  • So, why is understanding lifecycle methods so important?Let’s imagine that you are building an application in ReactJs, for example, a video player app, like Vimeo, Twitch or Youtube .
  • Now, your user is using the player app on his/her laptop and decides to search for a fun video to watch, found the video, and then selected to watch it.Let’s suppose that the player app is consuming only resources like network data and the battery power.After some time watching videos…
  • When we build an application in ReactJs , we can predict different type of actions by the user, placing some hooks and triggers.These triggers and hooks are available by component lifecycle methods in Reactjs.
  • They will help us to create the most efficient piece of the software as possible.To place correctly the hook methods into the components we need to learn more about the four stages of ReactJs component.The ReactJs component goes through the Four following is a little diagram to demonstrate those phases.InitializationIn…

Components are the core of ReactJs. When you build an application in ReactJs you will have to split the UI into reusable components and think about each of them in isolation. When the user interacts…
Continue reading “Why do we need to understand the ReactJs life cycle methods?”

ReactJS ‘getDefaultProps’ & ‘propTypes’ – Dan Buda – Medium

ReactJS ‘getDefaultProps’ & ‘propTypes’  #lifecycle #react #props #reactjs #reactjs

  • ReactJS ‘getDefaultProps’ ‘propTypes’So maybe it’s a relatively obscure React lifestyle event, but I finally found a practical use for `getDefaultProps`, so that’s cool.Basically, getDefaultProps allows you to give your component some props which can be overridden, but in case none are given to the component somewhere else in your code, you’ll have some defaults in there.Let’s say you have a component that uses a breakpoint to show something up until a certain screen width and shows something else at another.
  • You can set breakpoint as a default prop in your component at, for example, 500px to make sure your code operates as desired.But in another place in your code, you decide you need a different breakpoint set for a particular part.
  • You can set a new breakpoint and pass it in as a prop which will override the default setting.Setting a default breakpoint of 500:And then on the parent component, after importing the component above (lets call it “Child”) you can pass in props to override the default:Additionally, you can go back to the Child component and tell it what the breakpoint prop should look like with propTypes:propTypes can be any number of things: string, bool, number and more.So there it is.
  • A way to set some default props for a component while being able to easily override them if need be.

So maybe it’s a relatively obscure React lifestyle event, but I finally found a practical use for `getDefaultProps`, so that’s cool. Basically, getDefaultProps allows you to give your component some…
Continue reading “ReactJS ‘getDefaultProps’ & ‘propTypes’ – Dan Buda – Medium”

Understanding State and Props in React – Hacker Noon

Understanding State and Props in React @RuairidhWM  #JavaScript #Reactjs #WebDev

  • Understanding State and Props in ReactI’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around.So unless you’ve been living in a cave for the past few years, you’ll know that React is an awesome front-end library developed by the good folks at Facebook to make life easier for developers.It’s different to Angular or other frameworks as it is purely front-end (though see the comments below for a great clarification on this).
  • With that said, it’s extremely powerful.One of the concepts I struggled to understand during my learning more about React was the interaction between State and Props.
  • If you’re at all familiar with React then you should know that props flow downwards from the parent component.There is also the case that you can have default props so that props are set even if a parent component doesn’t pass props down.This is why people refer to React as having uni-directional data flow.
  • What happens when a component receives data from someone other than the parent?
  • This is super cool because that means React takes care of the hard work and is blazingly fast.As a little example of state, here is a snippet from a search bar (worth checking out this course if you want to learn more about React)Class SearchBar extends Component { constructor(props) { super(props);this.state = { term: ” }; }render() { return ( div className=”search-bar” input value={this.state.term} onChange={event = / /div ); }onInputChange(term) { this.setState({term}); }}SUMMARYProps and State do similar things but are used in different ways.

I’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around. So unless you’ve been living in a cave for the…
Continue reading “Understanding State and Props in React – Hacker Noon”

Understanding State and Props in React – Ruairidh Wynne-McHardy – Medium

Understanding State and Props in React  #javascript #development #react #es6 #reactjs

  • Understanding State and Props in ReactI’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around.So unless you’ve been living in a cave for the past few years, you’ll know that React is an awesome front-end library developed by the good folks at Facebook to make life easier for developers.It’s different to Angular or other frameworks as it is purely front-end.
  • With that said, it’s extremely powerful.One of the concepts I struggled to understand during my learning more about React was the interaction between State and Props.
  • If you’re at all familiar with React then you should know that props flow downwards from the parent component.There is also the case that you can have default props so that props are set even if a parent component doesn’t pass props down.This is why people refer to React as having uni-directional data flow.
  • What happens when a component receives data from someone other than the parent?
  • This is super cool because that means React takes care of the hard work and is blazingly fast.As a little example of state, here is a snippet from a search bar (worth checking out this course if you want to learn more about React)Class SearchBar extends Component { constructor(props) { super(props);this.state = { term: ” }; }render() { return ( div className=”search-bar” input value={this.state.term} onChange={event = / /div ); }onInputChange(term) { this.setState({term}); }}SUMMARYProps and State do similar things but are used in different ways.

I’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around. So unless you’ve been living in a cave for the…
Continue reading “Understanding State and Props in React – Ruairidh Wynne-McHardy – Medium”

How to Use jQuery Libraries in the React Ecosystem – Kaloyan Kosev – Medium

How to Use #jQuery Libraries in the #ReactJS Ecosystem:  by @superKalo91 #JavaScript

  • We need to initialize the library on the underlying
      DOM element.
  • Destroy the plugin when component unmounts.
  • ReactJS will re-render our component on every change, but we don’t want that.
  • jQuery UI Sortable provides an event that we can trigger to tell the plugin to unbind its DOM events and destroy.
  • omitted for brevity }; // Optional: set the default props, in case none are passed Sortable.defaultProps = { enable: true }; // Optional: set the prop types Sortable.propTypes = { enable: React.

Exploring a practical example of an approach how to use jQuery plugin in a React app. The plan is to create a React component that manages the jQuery plugin.
Continue reading “How to Use jQuery Libraries in the React Ecosystem – Kaloyan Kosev – Medium”

React.js getDefaultProps & propTypes by Dan on CodePen

Using propTypes & getDefaultProps in #React:  #Coding

  • export default React-createClass({ getDefaultProps: function() { return { breakpoint: 500 }; }, propTypes: { breakpoint: React.
  • export default React-createClass({ getDefaultProps: function() { return { breakpoint: 500 }; }, render: function() {
    Whatever goes here

    } });

  • You can set breakpoint as a default prop in your component at, for example, 500px to make sure your code operates as desired.
  • GetDefaultProps allows you to give your component some props which can be overridden, but in case none are given to the component somewhere else in your code, you’ll have some defaults in there.
  • A way to set some default props for a component while being able to easily override them if need be.

So maybe it’s a relatively obscure React lifestyle event, but I finally found a practical use for getDefaultProps, so that’s cool.
Continue reading “React.js getDefaultProps & propTypes by Dan on CodePen”

React.createClass versus extends React.Component @toddmotto

'React.createClass' versus 'extends React.Component' - which one do you prefer?  #ReactJS

  • import React from ‘react’ ; class Contacts extends React .
  • Component , which extends the Component class instead of calling createClass .
  • React traditionally provided the React.createClass method to create component classes, and released a small syntax sugar update to allow for better use with ES6 modules by extends React.
  • Component { constructor ( props ) { super ( props ); } render () { return ( < div >< /div > ); } } export default Contacts ;
  • JavaScript, Angular, React, conference speaker.

Read the full article, click here.


@ReactiveConf: “‘React.createClass’ versus ‘extends React.Component’ – which one do you prefer? #ReactJS”


Two ways to do the same thing. Almost. React traditionally provided the React.createClass method to create component classes, and released a small syntax sug…


React.createClass versus extends React.Component @toddmotto