ReactJS Tutorial 5 : Creating A Component In React

🔧 Building a React app and need a backend?
Learn FastAPI — the modern Python backend that pairs perfectly with React.
✅ JWT Authentication, OAuth, REST APIs — everything your React app needs.
👉 FastAPI Complete Course (limited discount): https://www.udemy.com/course/fastapi-course-python/?couponCode=YOUTUBE2026

📦 Also check out:
• Django Masterclass (44hrs, 9 real projects): https://www.udemy.com/course/django-course/?couponCode=YOUTUBE2026
• Python Masterclass 2026 (80hrs):https://www.udemy.com/course/python-masterclass-course/?couponCode=YOUITUBE2026

───────────────────────── What are components in React and how to create a component in React.

So we have already learned that a component is the basic building block of a React application and React is based on component based architecture.

Any React application you create can be built out of small React components.

Components can be nested inside one another.

To understand what a component is, let’s take a look at google’s homepage.

On the entire webapge, there are multiple elements.

The top navbar is one component.

Search bar is another component.

The search icon and the mic button are their own components.

Button is another component.

All these components combine together to form the entire UI.

Know you know what components look like on the UI, let’s now learn how they look like in terms of code.

When you want to create component, we create that in a JSX file.

Let’s now create our first component.

To create components, create a new directory in src folder called components.

Let’s place all our components in there.

No hard and fast rule, you can create components anywhere.

Create a new component called Hello.jsx

Make sure you always name your component in capitals.

Let’s create the simplest form of component.

A component in JS is nothing but a function.

A function in programming language is nothing but a blackbox which accepts some data in form or arguments and returns the processed data.

Component in react is something similar, they are just functions but instead of returning data, they return JSX.

So to create a component, we use regular JS syntax, you can use ES6 syntax as well if you want to.

Entire React Playlist: https://www.youtube.com/watch?v=MHn66JJH5zs&list=PLSsAz5wf2lkKm0BG9wUWWSgYWBzDa-dFs&pp=gAQBiAQB