Struggling with React? here are the building blocks of ReactJS, you need to learn.


Are you curious about React and ever tried to play around with it’s different concepts, ever wondered how React comes together with other libraries?


So if you are struggling with absolute basics of components in React, creating components, state and dynamic interfaces, Variations of Stateless Functional Components, PropTypes and other concepts then stick with this, we will discuss react concepts in much detail with practically implementing. So if you are a react learner it will be fun for you to explore and learn.

Here’s what we’ll cover:

  • What is a ReactJS?
  • React Developer tools
  • Different DOM concepts including ReactDOM rendering
  • Class components
  • JSX
  • State
  • props
  • StateLess Components
  • StateFull Components
  • Lifecycle methods of a component

What is ReactJS?

React is commonly mistaken as a framework because it feels like React is in competition with other javascript frameworks out there, mostly you will see these comparisons in different blogs and articles titled as Angular vs React vs Ember, you can use React with Angular & you can use React with Ember. React is a library not a framework, it’s open source and component based front end library and it is maintained by Facebook.

React is not used alone to build small and large scale applications other build systems are often used in React projects, there are also tools intended to support react specific projects, some of the famous one’s are React Router for handling routing in React apps, React Motion for creating animations in React, Redux for flux implementation, It includes React Redux which contains the official React bindings for Redux. It also includes Redux Thunk, middleware that provides a way of handling more complex architectures in Redux applications & React Fire which is Firebase for React.


React Developer Tools

before you start have a look at some of the developer tools that can be installed as browser extensions or add- ons that you may find useful as well.

react-detector

The react-detector is a Chrome extension that lets you know which websites are using React and which are not.

React Developer Tools

The React Developer Tools are a plugin that can extend the functionality of the browser’s developer tools. The React Developer Tools is installed as a new tab to let you view React elements.


The Concept Of DOM

ReactJS uses virtual DOM based mechanism to fill in data in HTML DOM. The beauty of React is that virtual DOM works fast by changing only individual DOM elements instead of reloading complete DOM every time which makes it so fast and reliable that development and debugging can be done simultaneously.

Consider these DOMS , HTML DOM second other virtual DOM and the third browser’s DOM, HTML DOM is where the component automatically renders as it see’s the change in the state of component due to React and virtual DOM is an in-memory representation of an actual DOM, HTML DOM utilizes the virtual DOM, most of the processing is done in virtual DOM to look for component’s last render cycle occurred.

A React application is made up of multiple components, each responsible for outputting a small, reusable piece of HTML. Components can be nested within other components to allow complex applications to be built out of simple building blocks. A component may also maintain internal state — for example, a TabList component may store a variable corresponding to the currently open tab.

virtual DOM rather than directly in the browser’s DOM, React can act quickly and only add, update, and remove components which have changed since the last render cycle occurred.


The concept of COMPONENT & PROPS

Every user interface is made up of parts, these parts are called components , a React application is made up of multiple components, every component has to be rendered in order to transfer data (views) in this case to virtual DOM and then the browser’s DOM, each component when rendered is responsible for outputting a small but reusable piece of HTML.

Components can be nested within other components to power complex applications to be made out of simple building blocks, a component also maintains internal state, as the state changes the component re-renders again and again inside virtual DOM. React components are written as JSX, which is domain-specific language. JSX allows us to write our component in pure HTML mixed with javascript, internally React processes this mixed code into virtual DOM which results in output of an HTML for us thus a component represents a portion of the view of your application. The split of a webpage into component can be seen in the image below.

Props are property types which are used to pass data and methods from a parent component to a child component, They are immutable and allow us to create re-useable components, React components provide us a way to specify and validate property types, Using these features will greatly reduce the amount of time spent debugging applications. By supplying incorrect property types a warning is being triggered which help us find bugs. Otherwise we surely had a tough time catching that bug.

Props are simply the attributes used on a JSX node.

(e.g. <FirstComponent exampleProp="this is a string given as a prop’s value" />),

Props are available and accessible inside the component. In the snippet above, inside of FirstComponent, we would have access to this.props, which will return the object as prop’s value {exampleProp: “this is a string…”}. To make it more clear think of react’s components as simple functions as they will take input in the form of props and produce HTML or markup.

There are three ways of creating a React component:

  1. Functional (“Stateless”) Components
  2. React.createClass()
  3. ES2015 Classes

But we will implement 3rd one as ES2015 = ES5 , ES6/7 are the default standard and most of the developers are shifting to this way of defining components. if you are not familiar with ES5/6 OR 7 then have a 5 min read and then come back.


Creating Reusable Component

what is State?

State in React components is essential to manage and communicate data in your application. It is represented as a JavaScript object and has component level scope, it can be thought of as the private data of your component.

A Component can be StateFull or stateLess, either it may maintain some state or may be not.

StateLess Component

StateLess Components are those components or classes in React which does not contain any state.

The above example is called a stateless component as it does not contain state (in the React sense of the word). Stateless functional components are much more reusable and have a positive performance impact on your application. This will produce identical markup in the browser which can be seen as “ Display the text ” on the screen, as a final note you have to keep in mind that Props are immutable which means that they cannot be modified till the parent component changes it. child component is totally dependent upon the value of the prop assigned by parent component, and if the value of props get changed the component re-renders to the Virtual Dom.

Stateful Components

Now let’s consider ‘stateful’ components. They have a state object that you have to define in React-Specific constructor method. By doing so you are able to access this.state inside the component wherever you want. Secondly you can change the state with the setState method accessing it by this.setState() but the state must be initialized in the constructor before it can be set.

instead of directly passing an object to setState, you can pass in an updater function that has the signature:

(prevState, props) => stateChange

prevState holds up the value of the last rendered state and is guarantees to be up to dated, and props refer to component’s props.


Lifecycle Methods of a component

To run code and interact with your component at different stages of it’s life Lifecycle methods are used, based around Mounting, Updating and Unmounting, there are different methods being called when the component the component goes through the process, these methods or functions are getDefaultProps(), getInitialState(), componentWillMount(), render(), componentDidMount(), getDefaultProps(), componentWillUnMount()

Lets discuss some key methods that have an impact to the component and are required to be understood before implementing it.

componentWillMount()

This function is used to make final changes to the component before it will be added to the DOM.

componentWillMount() {
...
}

componentWillUnMount()

This method is called before a component is unmounted from the DOM. it feels the best place for developers to perform cleaning up the redux states, removing EventListeners & clearing timers.

componentWillUnMount() {
document.removeEventListener("click", this.closeMenu);
}

Functions called for Prop changes

The first function called on props is componentWillReceiveProps(nextProps), when the component’s property changes React will call this function with new properties.

so when you want to access old props go for this.props, and for new props go with nextProps.

componentWillReceiveProps(nextProps) {
...
}

ComponentWillUpdate

This function is the same as ComponentWillMount() as the changes are not in the DOM. So you can do changes just before Updation, and you cannot use setState, but use nextState like nextProps in previous function discussed above.

componentWillUpdate(nextProps, nextState) {
...
}

At what state should we call Lifecycle methods?

To consider which methods will be called and in which sequence will be different for a component in different states.

When a component is initialized

  1. getDefaultProps
  2. getinitialState
  3. componentWillMount
  4. render
  5. componentDidMount

When component has state change

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidUpdate

When a component has prop changed

  1. componentWillReceiveProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

When a component is unmounting

  1. componentWillUnmount

By learning all these concepts before working on a real world project will totally change one’s perspective of debugging as it becomes very easy when you know the flow, Architecture and the processes. So keep learning React, conventional development community are shifting towards React due to it’s fast Learning curve because it is simple and light weight library with a component based structure and great developer tools.