Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kmonika26/react-components-props-and-virtual-dom


https://github.com/kmonika26/react-components-props-and-virtual-dom

Last synced: 3 days ago
JSON representation

Awesome Lists containing this project

README 

        
# React-Components-Props-and-Virtual-DOM



# 1. React Gallery Component



This project implements a Gallery component in React that displays an arbitrary number of Image components passed as children. It demonstrates the use of the children prop for component composition in React.



## Usage



1. Import the Gallery and Image components into your React application.

2. Use the Gallery component to wrap your Image components, passing the images as children.

3. Customize the styling and layout of the gallery as needed.



# Installation



1. Clone the repository: git clone < https://github.com/KMONIKA26/React-Components-Props-and-Virtual-DOM.git>.



# Images used in Assingment



1. ![image1](React-Components-Props-and-Virtual-DOM/image/hdimage6.jpeg)

2. ![image2](React-Components-Props-and-Virtual-DOM/image/hdimage7.jpeg)

3. ![image3](React-Components-Props-and-Virtual-DOM/image/hdimage8.jpeg)

4. ![image4](React-Components-Props-and-Virtual-DOM/image/hdimage9.jpeg)

5. ![image5](React-Components-Props-and-Virtual-DOM/image/hdimage10.jpeg)



## 2. Dynamic List Rendering in React



In this project, we practice rendering lists dynamically in React. The goal is to create a component that takes an array of strings as props and displays each string in an unordered list. We also implement conditional rendering to display a message when the items array is empty.



# Topics



1. Dynamic list rendering in React

2. Conditional rendering

3. Working with arrays in React components



# Setup Guidelines and Instructions



* Environment Setup: Ensure you have a modern web browser and a text editor ready for development. No specific tools or IDEs are required beyond what can run HTML and JavaScript.



* Using the Provided Boilerplate Code: Use the provided HTML file as a starting point for your project.Ensure the necessary React and Babel scripts are included in the HTML file.



# Problem Statement



1. Creating the ItemList Component

2. Develop a React component named ItemList.

3. This component should accept a single prop called items, which is an array of strings.

4. Render each item in the array as a list item (
  • ) inside an unordered list (
      ).
      


      # Implement Conditional Rendering
      


      1. Extend the ItemList component to display a message "No items found" when the items array is empty. This involves using conditional rendering based on the length of the items array.

      Testing.
      


      2. Test your component by rendering it with different arrays, including an empty array, to ensure the conditional rendering works as expected.
      


      ## 3.Greeting Components in Lists in React
      


      In this assignment, you will learn the basics of React by creating a simple component that displays a greeting message.
      


      # Technologies Used
      


      `React`

      `ReactDOM`

      `Babel`
      


      # Setup Instructions
      


      1. Clone the repository or download the project files.

      2. Open the index.html file in your web browser.
      


      # Assignment Details
      


      1. Create a React component named Greeting.
      


      2. The Greeting component should accept two props: message (`a string representing the greeting message`) and name (`a string representing the name of the person to greet `).
      


      3. Render a paragraph (
      ) element that combines the message and name props to display a greeting. For example, if `message="Hello"` and `name="Alice"`, the component should render "Hello, Alice".
      


      ## Contributing
      


      Contributions are welcome! Please fork the repository and submit a pull request with your changes.
      


      ## Credits
      


      This project was created by [K MONIKA]. You can find me on [https://github.com/KMONIKA26].

      

    

    •