01. What is React and Why You Need It

Level: Beginner

ℹ️ What You'll Learn

Why plain JavaScript becomes messy with complex UIs
What React is and how it solves the problem
Components: building blocks of React apps
Component reusability in School Management System
How React fits in .NET backend projects

The Problem: Building Interactive UIs

Before we write a single line of code, let's understand what React is and why it became so popular.

The Problem: Building Interactive UIs

Imagine you're building the student dashboard for NexCoding Academy's School Management System. When a student clicks "View My Marks", you need to:

Fetch exam results from the backend API
Show/hide sections based on different screens (mobile, tablet, desktop)
Update the page when marks are released (without refreshing)
Handle button clicks, form submissions, data validation
Keep track of what the user is doing right now (which tab they're on, which student they're viewing)

If you use plain HTML and JavaScript:

// Without React — manual DOM manipulation
const button = document.getElementById('viewMarksBtn');
button.addEventListener('click', function() {
  fetch('/api/student/marks')
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('marksContainer');
      let html = '';
      data.forEach(exam => {
        html += `<div class="mark">${exam.name}: ${exam.marks}</div>`;
      });
      container.innerHTML = html;
    });
});

// When data updates, you manually update the DOM again
// When user navigates, you manually clean up old data
// When UI gets complex, managing all this becomes a nightmare

Problems with this approach:

Messy — You're mixing data fetching, DOM manipulation, and event handling everywhere
Hard to maintain — If marks display changes, you update it in 5 different places
Error-prone — Easy to forget to clean up old event listeners or data
Repetitive — You write the same fetching and rendering logic for each feature

What is React?

React is a JavaScript library for building user interfaces with components.

Instead of manually manipulating the DOM, you tell React:

"When the student data looks like THIS, the screen should look like THAT."

React handles all the DOM updates for you.

// With React — declarative
function StudentMarks({ studentId }) {
  // This is a component — a reusable piece of UI
  const [marks, setMarks] = useState(null);
  
  // When component loads, fetch marks
  useEffect(() => {
    fetch(`/api/student/${studentId}/marks`)
      .then(response => response.json())
      .then(data => setMarks(data));
  }, [studentId]);
  
  // Describe what the UI should look like
  if (marks === null) {
    return <div>Loading marks...</div>;
  }
  
  return (
    <div className="marks">
      {marks.map(exam => (
        <div key={exam.id} className="mark">
          {exam.name}: {exam.marks}
        </div>
      ))}
    </div>
  );
}

React automatically:

Fetches marks when the component loads
Re-renders the display when marks change
Cleans up when the student ID changes
Handles all the DOM updates

Core Ideas Behind React

1. Components — Reusable UI Blocks

A component is a function that returns UI.

In the School Management System, instead of writing the student card display in 5 different places, you write it once:

function StudentCard({ student }) {
  return (
    <div className="card">
      <h3>{student.name}</h3>
      <p>Roll: {student.rollNumber}</p>
      <p>Class: {student.className}</p>
    </div>
  );
}

// Now use it everywhere
<StudentCard student={ravi} />
<StudentCard student={priya} />
<StudentCard student={arjun} />

2. Props — Data Flowing In

Props (properties) are how you pass data from a parent component to a child component.

// Parent component (StudentList)
<StudentCard student={student} onView={handleViewStudent} />

// Child component (StudentCard)
function StudentCard({ student, onView }) {
  return (
    <div>
      <h3>{student.name}</h3>
      <button onClick={() => onView(student.id)}>View Details</button>
    </div>
  );
}

3. State — Component Memory

State is how a component remembers things between renders. It's like the component's memory.

function StudentFilter() {
  const [className, setClassName] = useState('');
  
  // When user selects a class, update state
  const handleClassChange = (newClass) => {
    setClassName(newClass);
  };
  
  return (
    <select value={className} onChange={e => handleClassChange(e.target.value)}>
      <option value="">All Classes</option>
      <option value="10">Class 10</option>
      <option value="11">Class 11</option>
    </select>
  );
}

4. JSX — HTML-Like Syntax in JavaScript

JSX lets you write HTML directly in JavaScript:

const name = "Ravi Kumar";
const marks = 95;

// This is JSX
const element = <h1>{name} scored {marks}%</h1>;

// React converts it to:
const element = React.createElement('h1', null, `${name} scored ${marks}%`);

Why React Is Powerful

1. Reusability

Write a StudentCard once, use it a thousand times.

2. Easy to Understand

Code reads like HTML with JavaScript mixed in. Close to how your UI looks.

3. Automatic Updates

Change the data, React automatically updates the screen. You don't manually update the DOM.

4. Component Composition

Build big UIs by combining small, simple components.

StudentDashboard
├── StudentHeader
├── StudentInfo
├── StudentMarks
│   ├── ExamCard
│   ├── ExamCard
│   └── ExamCard
└── StudentAttendance

5. DevTools & Debugging

Mature ecosystem of tools for debugging and performance monitoring.

React in the School Management System Stack

React sits as the frontend layer in the full-stack architecture:

┌─────────────────────────────────────────┐
│  React (Frontend)                       │  ← You are here
│  StudentList, StudentCard, etc.         │
└──────────────────┬──────────────────────┘
                   │ HTTP/REST API
┌──────────────────▼──────────────────────┐
│  ASP.NET Core Web API (Backend)         │  (covered in webapi section)
│  GET /api/students, POST /api/exams     │
└──────────────────┬──────────────────────┘
                   │ SQL Queries
┌──────────────────▼──────────────────────┐
│  SQL Server (Database)                  │  (covered in sqlserver section)
│  Students, Exams, Marks, etc.           │
└─────────────────────────────────────────┘

React communicates with your ASP.NET Core Web API using HTTP requests. You've already built the API; React consumes it.

What We'll Build in This Section

In the coming articles, we'll build a React frontend for the School Management System:

Fundamentals — JavaScript essentials you need to know
Components — How to structure UI with components
State & Hooks — Managing data and side effects
API Integration — Fetching data from your ASP.NET Web API
Routing — Multiple pages (student list, student details, marks)
Forms — Collecting user input (new student, fee payment)
Advanced Patterns — Reusable logic, performance optimization

By the end, you'll understand how to build interactive UIs that communicate with your backend.

What React Is NOT

Not a framework — React is a library. It handles UI. You choose routing, state management, etc.
Not magic — It's JavaScript. Understanding it requires understanding JS fundamentals.
Not Python or C# — It's JavaScript. Different syntax, different patterns.
Not required to build web apps — React makes building complex UIs easier, but plain HTML/JS works too. React shines when your UI is highly interactive.

Your Learning Path

This section assumes you have:

Basic HTML/CSS knowledge (from earlier articles)
Basic JavaScript knowledge (we'll cover essentials)

If you're weak on JavaScript, that's fine — we'll start with fundamentals.

By the end of these articles, you'll be able to:

✓ Write reusable React components
✓ Fetch data from ASP.NET Web API
✓ Build forms with validation
✓ Navigate between pages
✓ Debug React apps
✓ Deploy React to production

Let's begin.

💡 Why React Over Angular or Vue?

React is the most popular library (more jobs, more resources), has the smallest learning curve for beginners, and is what most .NET teams use when they need a frontend. We're teaching React first. Angular and Vue use the same concepts — switching is easier once you understand React.

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on React Fundamentals. Try these prompts:

"What does React do that plain JavaScript doesn't?"
"In one sentence, explain what a React component is"
"Why would manually updating the DOM (like the first example) become a problem?"
"Quiz me on React concepts from this article"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Quick Definitions

What is React and Why You Need It - The main React concept explained in this lesson.
Component - A reusable function that returns UI.
Props/state/effects - Core React ideas used to pass data, remember data, and run side effects.
Real project usage - How this appears in forms, dashboards, routes, and API-connected pages.

Common Mistakes

Copying React code without understanding data flow
Mutating arrays or objects directly instead of creating new values
Forgetting keys, dependencies, loading states, or error states where needed
Putting too much logic in one component
Not testing the screen with realistic School Management System data

Practice Task

Create a small React example using What is React and Why You Need It. Keep it focused on one School Management System screen.

Suggested practice:

Build a small component or page for students, attendance, marks, or fees.
Pass realistic data into the component.
Add one success state and one empty/error state where relevant.
Explain the data flow in your own words.
Rebuild the same example once without looking at the article.

Quick Revision

Question	Answer
What is the main idea?	Understand and apply What is React and Why You Need It in React.
Where is it used?	Student dashboards, forms, tables, routes, and API-connected screens.
What should beginners focus on?	Clear components, predictable data flow, and small examples.
What is the best debugging habit?	Check props, state, render output, and browser console step by step.

🎯 How would you explain What is React and Why You Need It in an interview?

What is React and Why You Need It is a React concept used to build clear, reusable, and predictable user interfaces. I would explain the problem it solves, show a small component example, and mention a common mistake beginners should avoid.

🎯 Where is this used in a real React project?

It is used in screens like student lists, admission forms, attendance dashboards, marks reports, routing pages, and API-connected admin panels.

JavaScript Essentials for React ->

nexcoding.in

Have questions on your tech stack, ongoing projects, or need one-to-one training?

📧 info@nexcoding.in 💬 WhatsApp +91-9951510727 📸 Instagram — NexCoding ▶ YouTube — NexCoding 📢 WhatsApp Channel — Jobs & Tips

The Problem: Building Interactive UIs​

The Problem: Building Interactive UIs​

What is React?​

Core Ideas Behind React​

1. Components — Reusable UI Blocks​

2. Props — Data Flowing In​

3. State — Component Memory​

4. JSX — HTML-Like Syntax in JavaScript​

Why React Is Powerful​

1. Reusability​

2. Easy to Understand​

3. Automatic Updates​

4. Component Composition​

5. DevTools & Debugging​

React in the School Management System Stack​

What We'll Build in This Section​

What React Is NOT​

Your Learning Path​

Quick Definitions​

Common Mistakes​

Practice Task​

Quick Revision​

Next Article​

The Problem: Building Interactive UIs

The Problem: Building Interactive UIs

What is React?

Core Ideas Behind React

1. Components — Reusable UI Blocks

2. Props — Data Flowing In

3. State — Component Memory

4. JSX — HTML-Like Syntax in JavaScript

Why React Is Powerful

1. Reusability

2. Easy to Understand

3. Automatic Updates

4. Component Composition

5. DevTools & Debugging

React in the School Management System Stack

What We'll Build in This Section

What React Is NOT

Your Learning Path

Quick Definitions

Common Mistakes

Practice Task

Quick Revision

Next Article