Web Developers : 5-Displaying Two Elements Side-by-Side Using React Fragments

Screenshot from the tutorial

Displaying Two Elements Side-by-Side Using React Fragments

In the world of web development, creating dynamic and responsive layouts is a fundamental skill. React, a popular JavaScript library for building user interfaces, provides developers with various tools to manage component rendering effectively. In this blog post, we will explore how to display two elements side-by-side using React Fragments. This method not only helps in organizing your components but also keeps your markup clean and efficient.

What Are React Fragments?

React Fragments are a lightweight way to group multiple elements without adding extra nodes to the DOM. This feature allows you to return multiple elements from a component without the need for a wrapping <div> or other HTML element. Fragments help in reducing the number of nodes in the DOM, which can be beneficial for performance and styling.

Why Use Fragments for Side-by-Side Layouts?

Using React Fragments for side-by-side layouts has several advantages:

• Cleaner Markup: Prevents unnecessary nesting of elements, leading to cleaner and more maintainable code.
• Performance: Reduces the number of DOM elements, which can improve rendering performance.
• Flexibility: Allows for more straightforward styling and layout adjustments without being constrained by additional markup.

Getting Started

To demonstrate how to display two elements side-by-side using React Fragments, we will create a simple React component. If you haven't already set up a React project, you can create one using Create React App:

npx create-react-app my-app
cd my-app
npm start

Once your project is set up, you can start modifying the src/App.js file.

Step 1: Import React and Create a Component

First, import React and create a new functional component. In this case, we will call it SideBySide:

import React from 'react';

const SideBySide = () => {
  return (
    <React.Fragment>
      <div style={{ display: 'inline-block', width: '45%', margin: '0 2.5%' }}>
        <h2>Element 1</h2>
        <p>This is the first element displayed side by side.</p>
      </div>
      <div style={{ display: 'inline-block', width: '45%', margin: '0 2.5%' }}>
        <h2>Element 2</h2>
        <p>This is the second element displayed side by side.</p>
      </div>
    </React.Fragment>
  );
};

Step 2: Use the Component in Your App

Now that we have created the SideBySide component, we need to include it in our main application file. Replace the default content in src/App.js with the following:

import React from 'react';
import './App.css';
import SideBySide from './SideBySide'; // Import the SideBySide component

function App() {
  return (
    <div className="App">
      <h1>Displaying Two Elements Side-by-Side</h1>
      <SideBySide />
    </div>
  );
}

export default App;

Step 3: Styling for Better Presentation

To enhance the presentation, you might want to add some CSS to ensure that the elements are visually appealing. Here’s a simple CSS snippet that you can add to your src/App.css file:

.App {
  text-align: center;
  margin: 20px;
}

h1 {
  margin-bottom: 20px;
}

h2 {
  color: #333;
}

Conclusion

In this tutorial, we learned how to display two elements side-by-side using React Fragments. By leveraging Fragments, we maintained clean and efficient markup while achieving our layout goals. This pattern is particularly useful in various UI scenarios, such as dashboards and card layouts, where multiple components need to be displayed next to each other.

Feel free to experiment with different layouts and styles to fit the needs of your application. Happy coding!

For more tips and tricks on React and web development, keep an eye on our blog or check out the accompanying video tutorial for a visual guide.

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios