React Lists
We can create lists in React in a similar manner as we do in regular JavaScript i.e. by storing the list in an array. In order to traverse a list we will use the map() function.
Keys are used in React to identify which items in the list are changed, updated, or deleted. Keys are used to give an identity to the elements in the lists. It is recommended to use a string as a key that uniquely identifies the items in the list.
Code Snippet:
const arr = [];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
Javascript
import React from 'react';import ReactDOM from 'react-dom';const numbers = [1,2,3,4,5];const updatedNums = numbers.map((number)=>{ return <li>{number}</li>;});ReactDOM.render( <ul> {updatedNums} </ul>, document.getElementById('root')); |
React Cheat Sheet
React is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of a Model View Controller (MVC) architecture. React is used to create modular user interfaces and promotes the development of reusable UI components that display dynamic data.
React Cheat Sheet provides you with a simple, quick reference to commonly used React methods. All the important components and methods are provided in this single page
Table of Content
- React Elements
- ReactJS Import and Export
- React Components
- Lifecycle of Components
- Conditional Rendering
- React Lists
- React DOM Events
- React Hooks
- PropTypes
Boilerplate: Follow the below steps to create a boilerplate
Step 1: Create the application using the command
npx create-react-app <<Project_Name>>
Step 2: Navigate to the folder using the command
cd <<Project_Name>>
Step 3: Open the App.js file and write the below code
Javascript
// App.jsimport React from 'react';import './App.css';export default function App() { return ( <div > Hello Geeks Lets start learning React </div> )} |