React
React is a popular JavaScript library for building user interfaces, especially single-page applications. It was developed by Facebook and focuses on creating reusable UI components. React uses a virtual DOM for efficient updates and a declarative approach to make UI predictable and easier to debug. It’s commonly used with tools like React Router, Redux, and React Query to build dynamic and scalable web apps.
JSX
JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows you to write HTML-like code inside JavaScript, which makes creating and visualizing UI components easier.
import React from 'react';
function JsxExample() {
return (
<div>
<h1>Hello, React!</h1>
<p>This is JSX in action.</p>
</div>
);
}
export default JsxExample;Key Points:
- You can embed JavaScript expressions inside JSX using
{}. - JSX helps define UI structure in a readable way inside React components.
Component
A component is a reusable, self-contained piece of UI. There are two main types: functional and class components
Example using function component
import React from 'react';
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;Props
Props are how data is passed from parent to child components in React. They allow components to be dynamic and reusable by customizing their behavior or appearance with different input values.
// Child Component
function PropsExample(props) {
return <h2>Hello, {props.name}!</h2>;
}
// Parent Component
function App() {
return (
<div>
<PropsExample name="Alice" />
<PropsExample name="Bob" />
</div>
);
}
export default App;What is a Reusable Component?
A reusable component is a generic building block you can use multiple times with different data, instead of rewriting the same code over and over. Props make this possible by allowing components to receive dynamic input.
Get Rijan’s stories in your inbox
Join Medium for free to get updates from this writer.
Example
// Reusable Button component
function ReuseableButton({ label, onClick, color }) {
return (
<button
onClick={onClick}
style={{ backgroundColor: color, padding: '10px', borderRadius: '5px' }}
>
{label}
</button>
);
}function App() {
return (
<div>
<ReuseableButton
label="Submit"
color="green"
onClick={() => alert('Submitted!')}
/>
<ReuseableButton
label="Cancel"
color="red"
onClick={() => alert('Cancelled!')}
/>
</div>
);
}Handling Event
Handling events in React is very similar to how events are handled in plain HTML, but there are a few key differences. In React, event handlers are written in camelCase (e.g., onClick, onChange), and they are passed as props to React elements. React normalizes events so that they work across different browsers.
Example: Button Click Event
import React from 'react';
function App() {
const handleClick = () => {
alert("Button clicked!");
};
return (
<div>
<button onClick={handleClick}>Click Me</button>
</div>
);
}
export default App;Conditional Rendering
Conditional rendering in React refers to rendering different UI elements or components based on certain conditions, such as user input, component state, or props. React offers several ways to implement conditional rendering.
- Using
if/elseStatements
You can use an if/else statement before the return statement in your component to conditionally render content.
Example
function Example({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please log in.</h1>;
}
}
function App() {
const userLoggedIn = true;
return (
<div>
<Example isLoggedIn={userLoggedIn} />
</div>
);
}
export default App;2. Using Ternary Operator
A more concise way to handle conditional rendering is with the ternary operator (condition ? expr1 : expr2).
Example
function Example({ isLoggedIn }) {
return (
<h1>{isLoggedIn ? "Welcome back!" : "Please log in."}</h1>
);
}
function App() {
const userLoggedIn = false;
return (
<div>
<Example isLoggedIn={userLoggedIn} />
</div>
);
}
export default App;Lists and Keys
Lists
Lists are commonly used to display dynamic data in the form of a collection of items. React provides several tools and techniques for efficiently rendering and updating lists, especially when dealing with dynamic or changing data.
Example
import React from 'react';
function ListExample() {
const items = ['Apple', 'Banana', 'Orange'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default ListExample;Keys
When rendering lists, keys are a crucial concept in React. They help React efficiently identify which items in the list have changed, been added, or been removed, optimizing rendering performance.
Why Keys Are Important:
- React uses keys to avoid re-rendering the entire list when changes occur.
- Each key should be unique among siblings in the list to help React track each element’s identity.
Example
import React from 'react';
function KeysExample() {
const items = [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' },
];
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default KeysExample;Conclusion
React is a powerful library for building dynamic, reusable, and efficient user interfaces. Through the use of JSX, React allows developers to write HTML-like syntax within JavaScript, simplifying the process of defining and visualizing UI components. With components, props, and state management, React promotes code reusability and modularity, enabling more scalable applications.
Event handling, conditional rendering, and the use of lists and keys further enhance the ability to create interactive and dynamic interfaces. By leveraging event handlers, developers can build responsive applications, while conditional rendering enables flexible UI elements based on specific conditions. Lists and keys help efficiently manage dynamic data and optimize the performance of React applications.
Overall, React declarative approach, combined with its rich ecosystem of tools like React Router, Redux, and React Query, makes it an excellent choice for building modern web applications that are not only scalable but also easy to maintain and debug. As you continue to explore React, you’ll find that mastering these concepts allows you to develop more sophisticated and performant web applications.
