Reactjs: the building blocks for biginners

2020-12-04T11:28:16.240Z

Welcome,

ReactJS is a JavaScript library that makes it possible to painlessly create an Interactive User Interface, react.js main concept is to enable developer build application with views (Components) that has individual state but share data.
react component can share its data at a particular state of the application using its one-way data binding features, but in case any state changes only the necessary component view is updated.


React is component-based, which means, developers can separate every functionality of their application into an individual component that is able to manage its state.
in this, I post will point out some concepts which react.js has some form improved the user interface development process.

Components

previously I mentioned that reactJS is a component-based framework, what exactly does this mean?

ReactJS makes dividing your user interface into functions possible, each part of your user interface handling a specific task or group of interrelated tasks, so you can have a login component that;
accepts input, validate the input, connect to an API, send data to a backend, show and hide loaders while performing these task and return a success message or error message independently.
The same will go for a register user component, checkout component, menu component, forgot password component and more the power of components comes to play in the concept of (DRY) don’t repeat yourself

  1. Re-usability: Re-usability comes in hand with Components in reactJS, a component can be easily imported and re-render in any part of an application.
  2. Maintainability: a bug fix or enhancement in a component goes across all the parts of the application where the component is rendered.
  3. Code readability and file structure: application files can be structured and grouped into folders with related functionalities.

A react component can be as simple as having just a single render() life cycle method with a state or props while it can also be a complex reactJS component that has a state, props, several life cycle methods, constants, and functions.

What makes a reactJS component.

JSX

JSX is a syntax extension to JavaScript, a JSX code looks like a mix of HTML and javascript, in the actual sense that is what it is, react js uses babel compiler translates these JSX syntaxes into actual javascript code before rendering it to the DOM.

Props

the props are short for (properties), this is a javascript object which represents data passed to a component from a parent component.
react.js uses the props feature to accept data from parent components which it also renders to view.

State

A component’s state represents the current value of variables within the component, the state is a regular javascript object, it represents what is currently rendered in the view.
any change or update to a state property forces a re-render of the component to update the view.
though it is only available to the class-based component, it is a powerful feature in a component.
read about.

  1. Function-based component - The simplest way to define a component is to write a JavaScript function, it takes a single property the "props" and returns a JSX.

    function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
    }
  2. Class-based component - React.js components can also be constructed using ES6 class, the class-based component uses one of the react.js life cycle methods to render its JSX to the DOM.

    class Welcome extends React.Component {
     render() {
       return <h1>Hello, {this.props.name}</h1>;
     }
    }

Lifecycle methods

class-based react.js component provides more features, it comes with lifecycle methods or functions which is called at some point within the components, react.js lifecycle methods are called when a component is created, rendered to the DOM, mounted, updated, or unmounted from the DOM.
these methods can be overridden in order to perform a particular action at a particular point in your application.

render()

The render() method is the only required method in a class-based component. this method constantly examines the props and state of the component and returns a JSX or any value to the view.

import React, { Component } from "react"

class Listings extends Component {
  
   //---
  
  render() {
    return <div>React.js Demo</div>
  }
  //---
}

export default Listings

componentDidMount()

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree), If you need to load data from an external API or set up any subscriptions., this is a good place to instantiate the network request.

import React, { Component } from "react"

class Listings extends Component {
  
  componentDidMount(){
     //TODOS handle states, props
  }
  
   //---
}

export default Listings

componentDidUpdate()

this method is invoked immediately after updating a value in the state or components props changes. This method is not called for the initial render, this method will always be called whether you declare it explicitly in your code, but it can be overridden to perform other function order than update the view.

import React, { Component } from "react"

class Listings extends Component {
  
  componentDidUpdate(nextProps, nextState) {
    return nextProps.isFavourite != this.props.isFavourite
  }
  
  //---
}

export default Listings

componentWillUnmount()

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests.

import React, { Component } from "react"

class Listings extends Component {
  
  componentWillUnmount() {
        //TODOS handle aftermath operations, clear state, dom close events
    }
  
  //---
}

export default Listings

shouldComponentUpdate()

shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases, you should rely on the default behavior.

import React, { Component } from "react"

class Listings extends Component {
  
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.isFavourite != this.props.isFavourite
  }
  
  //---
}

export default Listings

read more about components lifecycle methods here, the lifecycle methods provide a way to manage a component, data, and utilities within your application.

DOM Elements

React implements a browser-independent DOM system for performance and cross-browser compatibility. react.js team took the opportunity to clean up a few rough edges in browser DOM implementations.
React DOM element attributes like class, onchange, readonly changed to className, onChange, readOnly respectively.

Conditional Rendering

Conditional rendering in React.js is used within your application render to view distinct components or elements depending on the current state of your application.
using the if.. statement, if…else, and conditional operators to create an element representing your current application state.

React.js is a powerful Javascript frame which makes developing single page application a lot easier and realistic, also support server-side rendering using Node and power mobile application development using React Native.

understanding these above concepts as a javascript developer is a bump towards creating a fast, performance, and cross-browser compatible single page application.
to get a further in dept of these concepts and more advanced concept in react js continue reading here

Get the Latest Information


© 2022, Enwemasor Barnabas