React Introduction
Understanding React fundamentals and core concepts
⚛️ What is React?
React is a free, open-source JavaScript library developed by Facebook for building user interfaces. It lets you create reusable components that update efficiently when your data changes.
// A simple React component
function App() {
return <h1>Hello, React World!</h1>;
}
Output:
Hello, React World!
Key React Concepts
Components
Building blocks of React apps
function Button() {
return <button>Click</button>;
}JSX
HTML-like syntax in JavaScript
const element = <h1>Hello!</h1>;Props
Pass data to components
<Welcome name="Sara" />State
Manage component data
const [count, setCount] = useState(0);🔹 React Components
Components are independent, reusable pieces of UI. They work like JavaScript functions that return HTML elements.
// Function Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Using the component
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
<Welcome name="Charlie" />
</div>
);
}Output:
Hello, Alice
Hello, Bob
Hello, Charlie
🔹 JSX - JavaScript XML
JSX allows you to write HTML-like code in JavaScript. It makes React code easier to read and write.
// JSX Example
const element = (
<div>
<h1>Welcome to React</h1>
<p>JSX makes React code beautiful!</p>
</div>
);
// You can use JavaScript expressions in JSX
const name = "Developer";
const greeting = <h1>Hello, {name}!</h1>;Output:
Welcome to React
JSX makes React code beautiful!
Hello, Developer!
🔹 Props (Properties)
Props are arguments passed to components, similar to function parameters. They allow you to pass data from parent to child components.
// Component with props
function UserCard(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Role: {props.role}</p>
</div>
);
}
// Using the component with props
function App() {
return <UserCard name="John" age={25} role="Developer" />;
}Output:
John
Age: 25
Role: Developer
🔹 React Features
React provides powerful features that make building modern web applications easier and more efficient.
Core Features:
- Virtual DOM: React creates a virtual copy of the DOM for faster updates
- One-way Data Binding: Data flows in one direction, making debugging easier
- Declarative: Describe what you want, React handles how to do it
- Component Reusability: Write once, use anywhere in your app
- React Hooks: Use state and other features without writing classes
🔹 Why Choose React?
React has become one of the most popular JavaScript libraries for several compelling reasons:
- Easy to Learn: Simple concepts and great documentation
- Reusable Components: Build once, use multiple times
- Strong Community: Millions of developers and tons of resources
- Performance: Virtual DOM ensures fast rendering
- Job Opportunities: High demand for React developers
- Ecosystem: Rich collection of libraries and tools