Components in React are independent, reusable parts which can be put together to build complex user interfaces. A component can be thought of as a piece of the UI — for example a button, a form, or a navigation bar could each be defined as a separate component. Components can also contain other components, allowing complex UIs to be built up out of simple pieces.

Functional components

A functional component is a plain JavaScript function which accepts props as an argument and returns a React element. Functional components are simpler and easier to test in comparison to class components.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class Components

Class components are more complex than functional components. They are defined as ES6 classes and have a render method. The render method returns a React element (the JSX to render), and the class components can also include other lifecycle methods for more control over how the component behaves.

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

Props

Props(short for property) are how components talk to each other. Components cannot directly modify any properties passed to them, but can only read them. Props are read-only.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render( 
<Welcome name="Sara" />, 
  document.getElementById('root') 
);

React JS is a tool used by programmers to build websites. It's like a big box of Lego blocks, where you can pick out different shapes and sizes to make something unique and fun! Each of these blocks is what we call a 'component'.

What is a Component?

Imagine you're playing with your favourite toy set. You would have a bunch of different pieces, like a wheel, a truck body, or a doll's head. In React JS, these pieces are called 'components'. They're the individual parts you use to build something bigger.

How do we use Components?

Just like when you play with Lego or another toy set, you can put together the 'components' in different ways to build different things. You might take a wheel component and a truck body component and put them together to make a toy truck!

Building with Components

The good thing about components, just like your toy pieces, is that you can use them over and over again. So, if you want to build three trucks, you don't have to make the truck parts from scratch each time, you can just use the truck body and wheel components you already have. This helps you save time and build things more efficiently.

Types of Components

There are mainly two types of components. The first one is called 'Class Components' which are like the big pieces in your toy set and can do many things. The other one is 'Function Components', they are like the smaller pieces and do only one thing. But when you use them together, they can help you build very neat and cool things!

Javascript
// Here is an example of a functional component in React JS
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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