Web Developers : 3-Building and Styling a Data List with React 15 minutes

Screenshot from the tutorial

Building and Styling a Data List with React

In the ever-evolving world of web development, React has emerged as a powerful library for building user interfaces. In this tutorial, we'll explore how to create and style a data list using React in just 15 minutes. Whether you are a beginner or an experienced developer looking to refresh your skills, this guide will walk you through the essential steps.

Prerequisites

Before we dive into the code, make sure you have the following:

• Basic understanding of JavaScript and React
• Node.js and npm installed on your machine
• A code editor (like Visual Studio Code)

Setting Up the React Environment

First, we'll set up a new React project. If you haven't already, use Create React App to bootstrap your application:

npx create-react-app data-list-app
cd data-list-app
npm start

This command creates a new directory data-list-app, installs the necessary dependencies, and starts the development server.

Creating the Data List Component

Next, let's create a new component that will display our data list. Inside your src folder, create a new file named DataList.js.

DataList.js

import React from 'react';

const DataList = ({ items }) => {
    return (
        <ul className="data-list">
            {items.map((item, index) => (
                <li key={index} className="data-list-item">
                    {item}
                </li>
            ))}
        </ul>
    );
};

export default DataList;

Explanation

• We create a functional component DataList that accepts items as a prop.
• We use the map() function to iterate over the items array and render each item in a list (<li>).
• Each list item needs a unique key prop. In this case, we use the array index.

Using the Data List Component

Now, let's use the DataList component in our main App.js file.

App.js

import React from 'react';
import DataList from './DataList';
import './App.css';

const App = () => {
  const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  return (
    <div className="App">
      <h1>Fruit List</h1>
      <DataList items={data} />
    </div>
  );
};

export default App;

Explanation

• We import DataList and pass an array of fruit names as the items prop.
• The DataList component will render our fruit list.

Styling the Data List

To make our data list visually appealing, let’s add some CSS styles. Open the App.css file and add the following styles:

App.css

.App {
    text-align: center;
    font-family: Arial, sans-serif;
}

.data-list {
    list-style-type: none;
    padding: 0;
}

.data-list-item {
    background-color: #f0f0f0;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.data-list-item:hover {
    background-color: #e0e0e0;
}

Explanation

• We remove the default list styling and add padding.
• Each list item has a light gray background, padding, and a rounded border.
• The hover effect enhances user interaction.

Running Your Application

Now that we have built and styled our data list, it’s time to see it in action. Make sure your development server is running. Open your browser and navigate to http://localhost:3000. You should see the fruit list displayed with the styles applied.

Conclusion

In this tutorial, we successfully created and styled a simple data list using React. You learned how to set up a new React project, create a reusable component, and apply CSS for styling. This foundational knowledge will help you build more complex components and applications in the future.

Next Steps

• Explore adding more features, such as filtering or sorting the list.
• Look into using additional libraries like React Bootstrap or Material-UI for enhanced styling options.
• Experiment with state management to dynamically change the list content.

Happy coding!

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