React is a JavaScript library for building user interfaces.
It allows developers to create reusable UI components.
React was created by Facebook and is now an open-source project maintained by Meta and contributors.
const element = <h1>Hello, world!</h1>;
JSX is a syntax extension that allows you to write HTML inside JavaScript.
It makes your code more readable and expressive.
JSX is compiled into JavaScript using Babel before it runs in the browser.
const element = <h1>Hello, JSX!</h1>;
- JSX makes code more readable
- JSX prevents XSS attacks
- JSX compiles to React.createElement()
React apps are built using components.
A component is a JavaScript function that returns JSX.
Components can be functional or class-based, and they help in reusability.
function MyComponent() { return <h1>Hello, Component!</h1>; }
- Components can be functional or class-based
- They make UI reusable
- Components use props and state
Hooks let you use state and lifecycle methods in function components.
Before Hooks, only class components could use state and lifecycle methods.
Hooks were introduced in React 16.8 and have become the standard way of handling state in modern React apps.
const [count, setCount] = useState(0);
- useState - for state management
- useEffect - for side effects
- useContext - for global state
- useRef - for accessing DOM elements
- useReducer - for complex state logic
React Router is used for navigation in React applications.
It allows users to navigate between different pages without reloading the entire application.
React Router works by mapping URL paths to specific React components.
<Route path="/home" element={<Home />} />
- Allows single-page applications (SPA)
- Handles URL routing in React
- Uses components like BrowserRouter and Route