DEV Community

Cover image for Week 2 - Colors App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on

 

Week 2 - Colors App

Welcome to Week 2 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .


Colors App

colors app
This week we created a colors app that displays the list of the colors in react.

To create a color component; We have to :

  • Create a state that holds the colors
  • Colors is an array of objects
  • Each color has an id , name, and hex properties
  • We loop through the colors array using the function
  • We return an
  • element for each item
  • We should provide a key for each list item
  • We assign the resulting array of elements to colorItems
  • In JSX, we include the entire colorItems array inside an element, and render it to the DOM

    Code

    import React from 'react';
    
    const DisplayColors = () => {
        const colors = [
            {id: 1, name: 'brown', hex: '#A52A2A'},
            {id: 2, name: 'crimson', hex: '#DC143C'},
            {id: 3, name: 'red', hex: '#FF0000'},
        ]
    
        const colorItems = colors.map(color => 
            <li key={color.id} id="currColor">
                {color.id}  | {color.name} | {color.hex}
            </li>)
    
        return (
            <div className="displayColors">
                <h2>Display Colors</h2>
                <div>
                    {colorItems}
                </div>
          </div>
        );
    }
    
    export default DisplayColors;
    
    

    Conclusion

    Thank you for reading and any contribution is more than welcome in the threads below!

    Live Preview
    Source Code

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React