The fundamentals of React components and props

Simple Component

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.The components name are starting Uppercase word.Like This:

Functional Component

The simplest way to define a component is to write a JavaScript function:

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.

Class Component

Creating a class component is pretty simple; just define a class that extends “Component” and has a “render” function.From there, you can use it in any other component.

React Props

The React props are using to pass data one component to another component as a parameters.See this image to understand.

The brand attribute is declare to pass data from Garage component to Car Component.And the Car component access this data using props thats it.

React JSX

What is JSX ? ->

JSX makes it easier to write and add HTML in React.It makes it easier to create React application. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild() methods.