Introduction to React:
React is a powerful JavaScript library for building fast, interactive user interfaces for
websites and web apps. It’s especially great for single-page applications (SPAs) where parts of
the page change dynamically.
History and Father of React
• Father: React was created by Jordan Walke, a software engineer at Facebook.
• History: He developed the first version in 2011 to make Facebook’s news feed more
dynamic. React was released as an open-source project in 2013, and today it’s
maintained by Facebook (now Meta) and a huge developer community.
Why Use React?
• Reusable Components: Build complex UIs from small, reusable blocks.
• Virtual DOM: Makes UI updates fast by changing only what’s needed.
• Declarative: You write what the UI should look like, React handles how it updates.
• Strong Community & Ecosystem: Tons of tools, tutorials, and developers.
• Easy to Maintain: Easier to test and debug because of modular structure.
React Components
• React apps are built with components — small, reusable pieces of UI.
• Function components are the modern standard.
• Example of a simple function component:
function App() {
return <div>Hello</div>;
}
• This App component returns a simple <div> with text.
Syntax Example
Function Component:
function Greeting() {
return <h1>Hello, React!</h1>;
Rendering a Component:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<Greeting />, document.getElementById('root'));
Example
A page might use:
• <Header /> for the top navigation.
• <Main /> for main content.
• <Footer /> for site info.
Each is a separate component, easy to reuse and manage.
MCQ Questions
1. Who is called the father of React?
a) Mark Zuckerberg
b) Brendan Eich
c) Jordan Walke
d) Linus Torvalds
Answer: c) Jordan Walke
Explanation: Jordan Walke built React at Facebook in 2011.
Output: He’s known as React’s creator.
2. What is a main benefit of using React?
a) Uses XML directly
b) Updates full page always
c) Uses Virtual DOM for fast updates
d) No components needed
Answer: c) Uses Virtual DOM for fast updates
Explanation: Virtual DOM updates only changed parts.
Output: Faster page updates.
3. React apps are built using what?
a) Databases
b) XML files
c) Components
d) APIs only
Answer: c) Components
Explanation: Components are React’s core building blocks.
Output: Small reusable UI parts.
4. Which is the correct way to write a function component?
a) class App() {}
b) function App() { return <div>Hello</div> }
c) function: App() {}
d) component App() {}
Answer: b) function App() { return <div>Hello</div> }
Explanation: Uses function keyword and returns JSX.
Output: Renders <div>Hello</div>.
5. What happens when state changes in React?
a) Nothing
b) Only console.log runs
c) The component re-renders
d) The browser crashes
Answer: c) The component re-renders
Explanation: State change triggers re-render with new data.
Output: UI shows new info.
Coding Questions with Answers, Outputs & Explanations
1. Make a simple HelloWorld component that returns <h1>Hello World</h1>.
Answer:
function HelloWorld() {
return <h1>Hello World</h1>;
Output:
Hello World
Explanation:
Function returns a JSX heading.
2. Create an App component that returns <div>Hello React</div>.
Answer:
function App() {
return <div>Hello React</div>;
Output:
Hello React
Explanation:
Basic function component with JSX <div>.
3. Render a Welcome component inside ReactDOM.render.
Answer:
function Welcome() {
return <h2>Welcome!</h2>;
ReactDOM.render(<Welcome />, document.getElementById('root'));
Output:
Welcome!
Explanation:
ReactDOM.render attaches component to #root.
4. Add a Header component that returns <header>My Site</header>.
Answer:
function Header() {
return <header>My Site</header>;
Output:
My Site
Explanation:
<header> is valid HTML in JSX.
5. Make a component Info that shows <p>React is awesome!</p>.
Answer:
function Info() {
return <p>React is awesome!</p>;
Output:
React is awesome!
Explanation:
Simple paragraph returned from function.
