Create components in React JS web-app

In this article, you will learn how to Create a components in your react js web-app. including some standard of code

What is Components

Components are the building blocks of react application, which returns a set of react elements that should appear on frontend screen. components can be created of two types Class and function

1. Class Component
class components should inherit Reacts component using extends React.Component and gives access to React.
the component also requires render method that will contains view HTML.
there should be constructor method where we initiate the component’s properties. by including the super() statement, which executes the parent component’s constructor function, and our component has access to all the functions of the parent component.
Here is example for simple class component witch will show welcome message to screen.

import React from 'react';

class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {initMessage: 'Hello'};
  }
  
  render() {
  	return (
      <div>
      	Welcome to React component
      </div>
    );
  }
}

2. Function Component
function component also returns HTML. and behaves pretty much the same way as a Class component.

Here is example for simple function component that also shows welcome message to screen.

function Message () {
  return (
    <div>
          Welcome to React component
  	</div>
  );
};

Naming Component

Component name should be in Capitalized format. like in above we should not set name like message or messageItem so you can set the name as Message or MessageItem.

State and Lifecycle

State is variables you can use in your component for store any type of values and use it through component.

for both type of component (class and function) there is different way to use state. In Class component state should be defined and initialize in constructor method using this.state = {variablename: “value”}. after this can be used with this.state.variablename in any function through current component including render. while in other hand, functional component need to use hooks of react js useState for declare and initialize like this const [variablename, setVariableFunc] = useState(‘initvalue’); and then inside current component you can use it’s by variablename.

lifecycle methods are help you to use your variables in proper way and in proper flow from initialize and update and render. Same as state lifecycle methods are also different.

• In Class Component you need to use this methods
• constructor – called when component initialized
• componentDidMount – called when components take place to view.
• componentDidUpdate – called when any state or props changes made and need to update component.
• componentDidUnmount – called when components is about to leave from view.

import React from 'react';

class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {userName: ''};
  }
  
  componentDidMount(prevProps){
    // Typical usage (don't forget to compare props):
    if (this.props.user !== prevProps.user) {
       this.setState({userName: this.props.user});
    }
  }
  
  render() {
  	return (
      <div>
      	<h1>Hi, {this.state.userName} </h1>
      	Welcome to React component
      </div>
    );
  }
}
export default Message;

In function component you need to use this methods

• useEffect – this will combination for 3 methods of class component (Mount, Update, Unmount).

import React from 'react';

function Message (props) {
  const [userName, setUserName] = React.useState('');
  
  React.useEffect(() => {
	setUserName(props.user);
  }, [ props.user ]);
  
  return (
    <div>
      <h1>Hi, {userName}</h1>
      Welcome to React component
    </div>
  );
}

export default Message;

if you want to get more about lifecycle you can also refer react documentation: here

What is props?

props are basically derived from parent component and it can be any type of variables or function. like in above example we are accessing variable user that is derived from parent component.

props can be pass to component by set attributes. like this

<Message 
	user={"gvtechnolab"} 
	onEvent={()=>{
      //some event
    }} 
  />

here user is variable contains string value, and onEvent is variable that holds function.

Typechecking

As you will use your component to multiple places with different or same parameters as requirements so there is possibility, you can catch a lot of bugs with type checking. you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. other then this you can use React’s some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special propTypes property:

import React from 'react';
import PropTypes from 'prop-types';

class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {userName: ''};
  }
  
  componentDidMount(prevProps){
    // Typical usage (don't forget to compare props):
    if (this.props.user !== prevProps.user) {
       this.setState({userName: this.props.user});
    }
  }
  
  render() {
  	return (
      <div>
      	<h1>Hi, {this.state.userName} </h1>
      	Welcome to React component
      </div>
    );
  }
}

// Specifies the default values for props:
Message.defaultProps = {
  user: 'Stranger'
};

Message.propTypes = {
  user: PropTypes.string
};

extends default Message;

import React from 'react';

function Message (props) {
  const [userName, setUserName] = React.useState('');
  
  React.useEffect(() => {
	setUserName(props.user);
  }, [ props.user ]);
  
  return (
    <div>
      <h1>Hi, {userName}</h1>
      Welcome to React component
    </div>
  );
}

// Specifies the default values for props:
Message.defaultProps = {
  user: 'Stranger'
};

Message.propTypes = {
  user: PropTypes.string
};

extends default Message;

That’s it you have made a component that have use of lifecycle event, state variable, props variable, type checking for props variable similar to this you can create your components as per your requirements.

thanks for reading let us know if this article help you in your code. enjoy coding.