What Is React?
What Is React?
A school report contains a heading, student details and subject marks. Copying the entire page for every pupil makes small changes difficult to maintain. We need a way to describe a report once and reuse its parts.
React is a JavaScript library for building interfaces from components. A component describes a piece of the screen. React combines those descriptions and updates the browser when the information used by them changes.
Explain
Explain how React combines components into a screen.
Trace
Trace a student’s marks from data to displayed total.
Apply
Build and reuse a school heading without duplicating the whole page.
What Is React?: follow the relationship
Student record
Asha’s name and subject marks are the report’s inputs.
Reusable parts
A school heading and student summary describe separate parts of the report.
School report
React combines those parts into one displayed report.
Build the mental model
Think of a component as a reusable report section with a clear responsibility. The school heading is one part; a student summary is another. Combining parts creates the page without turning every paragraph into its own component.
From a record to a screen
A school interface is a view of information. The same record could appear as a report card, an attendance row or a search result. Components make those presentation choices explicit. They do not automatically decide whether the record is correct; validating marks and deciding who may edit them remain application responsibilities.
Start by identifying the smallest useful report you can explain. Then find repeated structure and give it a component name. You can grow the interface gradually rather than assuming every school system requires the same architecture.
Read the complete React example
The browser displays the returned headings and paragraphs. JavaScript first calculates the total, and JSX places that result inside the interface. The value is visible text, not a message written to the developer console.
React · JavaScript with JSX
import React from 'react';
function SchoolTitle() {
return <h1>River School</h1>;
}
export default function App() {
const total = 40 + 35;
return <main><SchoolTitle /><h2>Asha's report</h2><p>Total: {total}</p></main>;
}Expected screen and behavior
Initial screen: River School Asha's report Total: 75Connect the source to the screen
React · main example
import React from 'react';
function SchoolTitle() {
return <h1>River School</h1>;
}
export default function App() {
const total = 40 + 35;
return <main><SchoolTitle /><h2>Asha's report</h2><p>Total: {total}</p></main>;
}App is the entry component in these examples. React calls it during rendering, receives its description of the interface and commits the necessary browser changes. Rendering calculates the next screen; committing applies it. Later lessons add events that ask React for another render.
Rendering describes; committing updates the page
React · school report
import React from 'react';
function SchoolTitle() {
return <h1>River School</h1>;
}
export default function App() {
const total = 40 + 35;
return <main><SchoolTitle /><h2>Asha's report</h2><p>Total: {total}</p></main>;
}Rendering means React calls components to calculate the next interface description. Committing means applying the required changes to the browser page. These are separate phases: calculating a description does not mean every browser element will be replaced.
On the first mount, React needs to create the report’s browser elements. On a later update, it compares the new description with the previous one and changes the relevant parts. If only a student’s total changes, React can update that text while preserving other matching elements. Component identity and list keys help determine what is kept.
The school-report example below calculates its total when App renders. It has no click handler or changing state, so it does not request later updates on its own. You will introduce those requests in handling events and component state.
Avoid the common mistakes
React does not provide a database or a complete school administration system. HTML supplies meaningful elements and CSS supplies presentation. A fixed notice page may need only HTML; React becomes useful when reusable structure and changing information justify it.
Practice before reading the solution
React · starting example
import React from 'react';
function SchoolTitle() {
return <h1>River School</h1>;
}
export default function App() {
const total = 40 + 35;
return <main><SchoolTitle /><h2>Asha's report</h2><p>Total: {total}</p></main>;
}Build a reusable school title and show one student’s combined marks.
Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.
Worked practice solution
The title component handles school branding while App owns the marks calculation. This separation lets another report reuse the heading without copying its definition. Numbers are deliberately fixed here so you can concentrate on structure.
React · JavaScript with JSX
import React from 'react';
function SchoolTitle() {
return <h1>Hill School</h1>;
}
export default function App() {
const maths = 42;
const science = 38;
return <main><SchoolTitle /><h2>Ravi's report</h2><p>Total: {maths + science}</p></main>;
}Expected screen and behavior
Initial screen: Hill School Ravi's report Total: 80Check your reasoning
Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.
Use the idea in the next lesson
React is a JavaScript library for building interfaces from components. A component describes a piece of the screen. React combines those descriptions and updates the browser when the information used by them changes.
Continue with JavaScript Prerequisites for React. Revisit Your First Component when the relationship between inputs and the resulting screen needs another look.
Read the primary reference: React documentation on What Is React?.
Reaching the recap and completing the quizzes are separate milestones.