What is component in React?

Components are like functions that return HTML elements.

How many components does ReactJS have?

Components come in two types, Class components and Function components.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Note: When creating a React component, the component's name MUST start with an upper case letter.

Let's discuss first about how class component is used in React.

A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

Here is an example of a class component:

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Now let's discuss function component.

A Function component also returns HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand.

Here is the same example as above, but created using a Function component instead.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

How can you render a component in React?

The React application we created above has a component called Car, which returns an <h2> element. To use this component in our application, let's use similar syntax as normal HTML: <Car /> by rendering it this way:

ReactDOM.render(<Car />, document.getElementById('root'));

How can you pass properties in a React component?

Components can be passed as props, which stands for properties.

Props are like function arguments, and you send them into the component as attributes.

Here is an example of how to pass props in a component:

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

How to refer to a component inside component in React?

It can easily be done with the example below:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

How to make your code re-usable in other files.

React is all about re-using code, and it is recommended to split your components into separate files. To do that, create a new file with a .js file extension and put the code inside it

Code sample on how to get it done:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

Always remember that the filename must start with an uppercase character.

So, if you want to re-use the component above in other components, you have to import the file in your application.

Here is an example:

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

You will notice that Car was imported from the file Car.js to the code sample above, so that it can be reused in it.