Core Concepts
What is React?
React is a JavaScript library for building user interfaces. With its component-based architecture, React helps you build complex UIs from simple, reusable pieces.
Simple React Component
{`const HelloReact = () => {
return (
Hello, world!
);
}`};
This is a functional component that returns a React element to the DOM
JSX
JSX allows you to write clean code using a syntax that looks like HTML. JSX stands for JavaScript XML.
JSX Example
{`const element = (
Hello
Welcome to React!
);`}
This JSX looks like HTML, but it's transformed into JavaScript before rendering.
Components
Create reusable components to describe a part of the UI and manage application state
Functional Component
{`function Button({ label }) {
function handleClick(e) {
alert('You clicked me');
}
return (
);
}`}
)
Component-Based UI
In React, everything is built using components. Components can be nested inside one another to build complex pages.
Example Structure
function App() {
return (
<div className="p-4">
<Header pageTitle={"My App" />
<Sidebar />
<MainContent />
<Footer />
</div>
);
}
State – Building Dynamic UI
Learn how to store and manage data in components, with real-time updates.
useState Hook Example
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div className="p-2 rounded">
<button onClick={increment}>
Button<CounterButton />
</button>
<p>Count: {count}<span />
</div>
);
}
Understanding the Hook
- Declaring state variables using useState()
- Updating state with the set function
Use state to update UI based on user input and data changes
Example: Counter
Try this simple counter example using React state:
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>+Clicks: {count}</button>
{count}
Conditional Rendering
Choose the parts of the UI to display using conditional rendering.
{showWelcome ? <Greeting /> : <div>Nothing to show</div>}
Conditions can be written using regular JavaScript. Use expressions like if statements or ternary expressions inside your components.
Create a component that shows User if logged in or Login if not.
function UserGreeting({ isLoggedIn }) {
if (isLoggedIn) {
return <Welcome ></Welcome>
}
return <a>Login</a>
}
Handling Events
React uses JSX syntax for event handlers in components. Here's an example of onClick:
<button onClick={handleClick} className="px-5 py-2 rounded bg-blue-500 text-white">
Click Me
</button>
Forms
Forms need to be controlled components:
function Form({ onSubmit }) {
const [value, setValue] = useState('Hello, World');
return (
<form onSubmit={() => onSubmit(value)}>
<input
type="text"
value={value}
onChange={e => setValue(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
})
React 18 Features
Learn about the latest features in React 18 including concurrent features with suspense.
Concurrent Mode
React 18 introduces asynchronous rendering via Suspense for data fetching
- Use useEffect for side effects