JavaScript Prerequisites for React
JavaScript Prerequisites for React
A marks page needs to read student records, select passing students and calculate totals. JSX alone cannot perform those calculations. Ordinary JavaScript supplies the data handling that React components use.
Before React, become comfortable with variables, functions, arrays, objects, comparisons, destructuring and import/export. These are JavaScript features rather than special React instructions. JSX adds a convenient notation for interface descriptions.
Explain
Read object properties and function parameters in a component.
Trace
Use map and filter to describe a list of student records.
Apply
Create changed records without modifying the original data.
JavaScript for React: follow the relationship
Student records
An array stores one object per student.
Choose and transform
filter selects records; map returns a description for each selected record.
Visible list
React displays the resulting list of student entries.
Build the mental model
Read the data operation separately from the markup. An array holds records, filter chooses records meeting a condition, and map turns each selected record into an element. Naming each intermediate result makes this pipeline easier to inspect.
Read expressions before reading markup
Arrow functions are function values, not instructions to run immediately. A map callback runs once for each item because map calls it. A click callback runs later because React attaches it to an interaction. Recognizing who calls a function explains both collection rendering and event handling.
A destructured name is still an ordinary local variable. Import and export connect modules rather than copying markup. Practice these JavaScript ideas independently when JSX makes them hard to see, then return to the component and identify the same operations around the tags.
For additional foundations, use the JavaScript course, HTML course and CSS course.
If a specific operation is unfamiliar, review functions and their returned values, mapping and filtering a student list, and making changes without modifying the original data. These lessons use JavaScript examples, so you can practice the language separately from React.
Read the complete React example
The example selects marks greater than or equal to 40, then reads each selected object’s name. The callback parameter student means the current record, not the entire array. Destructuring in the practice extracts two properties without changing the object.
React · JavaScript with JSX
import React from 'react';
export default function App() {
const students = [{ id: 1, name: 'Asha', marks: 45 }, { id: 2, name: 'Ravi', marks: 32 }];
const passed = students.filter(student => student.marks >= 40);
return <main><h1>Passed students</h1><ul>{passed.map(student => <li key={student.id}>{student.name}: {student.marks}</li>)}</ul></main>;
}Expected screen and behavior
Initial screen: Passed students Asha: 45Connect the source to the screen
React · main example
import React from 'react';
export default function App() {
const students = [{ id: 1, name: 'Asha', marks: 45 }, { id: 2, name: 'Ravi', marks: 32 }];
const passed = students.filter(student => student.marks >= 40);
return <main><h1>Passed students</h1><ul>{passed.map(student => <li key={student.id}>{student.name}: {student.marks}</li>)}</ul></main>;
}JavaScript evaluates expressions inside JSX braces. A string property becomes text, and map produces a collection of elements. An if statement cannot be inserted as an expression inside braces; calculate a value before return or use an expression such as a conditional operator.
Avoid the common mistakes
A numeric mark must be a number when calculating totals. Adding strings such as "40" and "35" joins text to produce "4035". Browser form values arrive as strings, so later forms lessons explicitly convert them. Copying syntax without checking value types often hides errors.
Practice before reading the solution
React · starting example
import React from 'react';
export default function App() {
const students = [{ id: 1, name: 'Asha', marks: 45 }, { id: 2, name: 'Ravi', marks: 32 }];
const passed = students.filter(student => student.marks >= 40);
return <main><h1>Passed students</h1><ul>{passed.map(student => <li key={student.id}>{student.name}: {student.marks}</li>)}</ul></main>;
}Show a passing student’s name and combined marks from an object.
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 practice reads a record using destructuring, calculates the total once, and inserts the result into a paragraph. It does not need state because the record cannot change through a user action in this example.
React · JavaScript with JSX
import React from 'react';
export default function App() {
const student = { name: 'Asha', maths: 40, science: 35 };
const { name, maths, science } = student;
const total = maths + science;
return <main><h1>{name}</h1><p>Total: {total}</p></main>;
}Expected screen and behavior
Initial screen: Asha Total: 75Check 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
Before React, become comfortable with variables, functions, arrays, objects, comparisons, destructuring and import/export. These are JavaScript features rather than special React instructions. JSX adds a convenient notation for interface descriptions.
Continue with Setting Up React. Revisit What Is React? when the relationship between inputs and the resulting screen needs another look.
Read the primary reference: React documentation on JavaScript Prerequisites for React.
Reaching the recap and completing the quizzes are separate milestones.