ReactJS React Basics Syllabus

What is the purpose of package-lock.json?

It locks the exact installed versions of every dependency (and sub-dependency) so installs are reproducible across machines.

Which command installs all dependencies listed in package.json?

npm install (or simply npm i).

What folder does npm install dependencies into?

The node_modules folder in the project root.

What is Create React App (CRA)?

Create React App is an officially supported tool (CLI) that scaffolds a new single-page React project with a preconfigured build setup, requiring no manual configuration.

Which command creates a new project called 'my-app' with Create React App via npx?

npx create-react-app my-app

What does the 'npx' in 'npx create-react-app' do?

npx runs the create-react-app package directly without installing it globally, ensuring you use the latest version.

Which npm script starts the Create React App development server?

npm start

On which default port does the Create React App development server run?

Port 3000 (http://localhost:3000).

Which command produces an optimized production build in Create React App?

npm run build

What build tool does Create React App use under the hood to bundle code (traditionally)?

Webpack (with Babel for transpilation), abstracted away behind react-scripts.

In a Create React App project, what does the 'public' folder contain?

Static assets served as-is, including index.html (the app's single HTML page) and files like favicon.ico and manifest.json.

In a Create React App project, what does the 'src' folder contain?

The application's JavaScript/JSX source code, including index.js (entry point) and App.js (root component).

Which file is the JavaScript entry point in a standard Create React App project?

src/index.js

Which element in public/index.html does React render the app into by default?

The <div> with id="root" (accessed via document.getElementById('root')).

What is the role of App.js in a Create React App project?

App.js defines the root/App component, the top-level component that composes the rest of the UI.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly inside JavaScript code.

Does the browser understand JSX directly?

No. JSX must be transpiled (e.g., by Babel) into regular JavaScript function calls before the browser can run it.

What JavaScript function call does JSX compile to?

JSX compiles to React.createElement(type, props, ...children) calls (or the automatic JSX runtime's equivalent) that produce React elements.

Is JSX required to use React?

No, JSX is optional; you can call React.createElement directly, but JSX is strongly recommended for readability.

In JSX, why is 'className' used instead of 'class'?

Because 'class' is a reserved word in JavaScript, so JSX uses className to set the CSS class attribute.

How are HTML attributes named in JSX?

In camelCase, e.g., onClick, tabIndex, htmlFor (instead of onclick, tabindex, for).

What is the rule about the number of root elements a JSX expression can return?

A JSX expression must return a single root element; multiple siblings must be wrapped in one parent or a React Fragment (<>...</>).

How must self-closing tags be written in JSX?

They must be explicitly closed with a slash, e.g., <img />, <br />, <input />.

What is a React Fragment and why is it used?

A Fragment (<>...</> or <React.Fragment>) groups multiple children without adding an extra DOM node to the output.

How do you embed a JavaScript expression inside JSX?

By wrapping the expression in curly braces, e.g., <h1>{user.name}</h1>.

Can you put statements like if/for directly inside JSX curly braces?

No. Only JavaScript expressions are allowed inside {}; statements are not. Use ternaries, &&, or precompute values outside the JSX.

How would you render the sum of 2 and 3 inside a JSX heading?

Write <h1>{2 + 3}</h1>, which renders 5 because the expression is evaluated in the curly braces.

How do you write a JavaScript comment inside JSX?

Wrap it in curly braces as an expression comment: {/* this is a comment */}.

How do you conditionally render an element in JSX using a boolean expression?

Use short-circuit &&, e.g., {isLoggedIn && <p>Welcome!</p>}, or a ternary {isLoggedIn ? <A/> : <B/>}.

How do you set an inline style on a JSX element?

Pass a JavaScript object to the style attribute with camelCased properties, e.g., style={{ color: 'red', fontSize: '14px' }}.

What do false, null, undefined, and true render to when embedded in JSX?

They render nothing (are ignored), which is why {condition && <Element/>} safely renders nothing when the condition is false.