What is React?
React is a JavaScript library for building user interfaces (UIs). The key idea is that you
build UIs using components—small, reusable pieces of code that describe how your UI
should look and behave.
Key Concepts of React:
1. Components:
o A component is like a function or template that describes how part of the
UI should look.
o Every React app is made up of components, which are like building
blocks.
o Components can be thought of as "mini-programs" that return HTML-like
code to display on the screen.
Example: A simple button can be a component.
jsx
Copy code
const Button = () => {
return <button>Click me</button>;
};
2. JSX:
o JSX is the syntax React uses to describe what the UI should look like. It
looks like HTML, but it's actually JavaScript under the hood.
o When you see <div>, <button>, etc., inside JavaScript code, that's JSX. It's
just a way of telling React what the UI should be.
Example: JSX inside a component.
jsx
Copy code
const Button = () => {
return <button>Click me</button>;
};
3. State:
o State is data that changes over time in your app.
o In React, each component can have its own state. This state can affect
how the component is displayed or behaves.
o When the state changes, React automatically re-renders the component
to reflect the new state.
Example: A button that changes text when clicked using state.
jsx
Copy code
const Button = () => {
const [text, setText] = useState("Click me");
return <button onClick={() => setText("Clicked!")}>{text}</button>;
};
o useState is a React hook that allows you to create a piece of state in a
functional component. Here, text is the state, and setText is a function to
change it.
4. Props:
o Props are how you pass data from one component to another.
o If a parent component wants to send some data to a child component
(like sending a value to a button), it uses props.
Example: Passing a prop to a Button component.
jsx
Copy code
const App = () => {
return <Button text="Click me" />;
};
const Button = ({ text }) => {
return <button>{text}</button>;
};
o Here, the App component passes the prop text to the Button component.
Basic React Structure
Let’s now imagine how a simple React app fits together. We'll use a calculator as an
example because it's easy to relate to.
1. App Component
The App component is the main container of your app. It holds all the other
components, like the calculator's display and buttons.
jsx
Copy code
const App = () => {
return (
<div>
<Calculator />
</div>
);
};
2. Calculator Component
The Calculator is a component that contains two main parts: the display and the
buttons. These parts are components too.
jsx
Copy code
const Calculator = () => {
return (
<div>
<Display value="0" />
<ButtonPanel />
</div>
);
};
3. Display Component
The Display component shows the current number or result on the calculator's screen.
jsx
Copy code
const Display = ({ value }) => {
return <div>{value}</div>;
};
4. ButtonPanel Component
The ButtonPanel contains all the buttons for numbers and operations (+, -, *, etc.).
jsx
Copy code
const ButtonPanel = () => {
return (
<div>
<Button label="1" />
<Button label="2" />
<Button label="+" />
{/* More buttons... */}
</div>
);
};
5. Button Component
The Button component is used for all the individual buttons (like number buttons or
operation buttons).
jsx
Copy code
const Button = ({ label }) => {
return <button>{label}</button>;
};
How Components Fit Together:
• App is the top-level component.
• App contains the Calculator.
• Calculator contains two child components: Display and ButtonPanel.
• ButtonPanel contains several Button components.
This structure keeps things modular and easy to manage. Each component has a clear
responsibility. For example, the Display only worries about showing the current value,
and ButtonPanel only worries about rendering the buttons.
Why Use Components?
Components are like building blocks:
• Reusable: You can use the same component multiple times with different data.
• Separation of Concerns: Each component has a specific job, making the code
easier to understand and maintain.
• State and Props: These allow you to manage dynamic data and pass it between
components easily.
Putting It All Together:
When you write a React app, think of it as building with Lego bricks (components):
• The smallest bricks are like buttons, displays, or small UI elements.
• You build bigger parts (like a calculator) by combining smaller bricks.
• The App component is like the base on which everything sits.
Each component can have its own state (like the number currently shown) and can
receive props (data) from other components to communicate.
