React components

As you know, React is a JavaScript library for building user interfaces. It can use to build complex, interactive and reactive user interfaces simpler using the Components.

What is a Component?

Components are made up of HTML, CSS and JavaScript. It will help you to split the User Interface into independent and reusable pieces. Through that you can implement reusabaility (don’t repeat yourself) and seperation of concerns (clean and focused) in your code.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

React allows you to create reusable and reactive components using the declarative approach. So you can foucs on the desired states and React will figure out the actual JavaScript DOM instuctions.

Accessing the components

Mostly we export Class component using export default, which is an ES6 festure and simply means if you import this whole file. The export JavaScript keyword makes this function accessible outside of this file and the default keyword tells other files using your code that it’s the main function in your file.

Functions Components

Function components are the pure JavaScript functions that accepts props object and return React elements:

function helloWorld({ message }) {
  return <h1>{`Hello, ${message}`}</h1>;
}
// exporting the component
export default helloWorld;

Class Components

ES6 class to define a class component.

class helloWorld extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>;
  }
}