React Mastery / React Basics

Functional Components

✅ What is a Functional Component in React?

A Functional Component is the most basic and commonly used type of component in React.

It is simply a JavaScript function that:

  1. Accepts input in the form of props (short for properties)

  2. Returns JSX, which is a syntax that looks like HTML but works inside JavaScript

  3. Describes how the UI should appear based on the props

Let’s create our first functional component:

🛠️ Step 1: Create a new file

Create a new file named Hello.js (or Hello.jsx) in your src folder.

Make sure you have your React project already created and opened in VS Code.

If you don’t have one yet, run this in terminal to create one:

npx create-react-app my-app
cd my-app
code .

🔹 Step 2: Locate the src folder

On the left sidebar (Explorer) of VS Code:

  1. Open the project folder (usually my-app).

  2. Click the small triangle ▶ next to src to expand it.

🔹 Step 3: Add a new file

Inside the src folder:

  1. Right-click on src.

  2. Click "New File".

  3. Type the file name: Hello.js (or Hello.jsx).

  4. Press Enter.

✅ Done! You’ve created a new file.

🔹 Step 4: Start writing the component

Now you can write your component inside Hello.js:

import React from 'react';

function Hello() {
  return <h1>Hello, React Learner!</h1>;
}

export default Hello;

  • import React from 'react';

    – Loads React so JSX (HTML-like syntax) can work.

  • function Hello() { ... }

    – Defines a functional component named Hello.

  • return <h1>Hello, React Learner!</h1>;

    – Tells React what to display (UI) when Hello is used.

  • export default Hello;

    – Allows this component to be used in other files (like App.js).

🔹 Step 5: Import the component in App.js

Now that we have created the Hello component, we need to import it into App.js so we can display it on the screen.

Open App.js inside the src folder and add:

import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

🔍 Explanation

import Hello from './Hello';

– Imports the Hello component from the Hello.js file.

<Hello />

– Uses the Hello component inside App.

Since our Hello component contains:

return <h1>Hello, React Learner!</h1>;

the browser will display:

Hello, React Learner! 🎉

Functional components are JavaScript functions that return JSX (which looks like HTML).

There are two types of functional components:

✅ Stateless Functional Component

A stateless component is a component that doesn’t store or manage any changing data.

It just takes props (data from a parent component) and displays it.

📌 Think of it like a pure function – it always gives the same output for the same input, and doesn’t “remember” anything.

Example use:

  • Displaying headings, logos, text from props, etc.

  • It only shows what it’s told – nothing more.

🧠 It has:

  • No state, means the component doesn’t store or manage any changing data — it only displays what it receives.

  • No user interaction logic (like button clicks)

  • Just receives data and shows it

✅ Stateful Functional Component

A stateful component is one that stores and manages its own data (state).

Even though functional components didn’t originally have state, in modern React they can be made stateful using tools (like Hooks).

But for now, you can just understand that stateful = remembers and changes data.

Example use:

  • A counter that increases when you click a button

  • A form that stores what the user typed

  • Showing/hiding something based on user actions

🧠 It has:

  • Internal memory (state)

  • Can update data and re-render UI