{"library":"react","title":"React: A JavaScript Library for User Interfaces","description":"React is a foundational JavaScript library for building interactive user interfaces, developed and maintained by Meta. It employs a declarative, component-based paradigm, utilizing a virtual DOM for efficient UI updates and JSX for a more intuitive syntax. The current stable version is 19.2.5, with frequent patch releases addressing bug fixes, performance improvements, and enhancements, particularly around React Server Components (RSCs). Major version updates are less frequent but introduce significant new capabilities, such as Hooks (v16.8) and the ongoing evolution of concurrent features and RSCs. Key differentiators include its robust ecosystem, strong community support, and its innovative approach to server-client interaction with RSCs, enabling full-stack React applications and improved initial load performance compared to traditional client-side rendering.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react"],"cli":null},"imports":["import React from 'react';","import { useState } from 'react';","import { useReducer } from 'react';","import { createContext } from 'react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport ReactDOM from 'react-dom/client';\n\ninterface Item {\n  id: number;\n  name: string;\n}\n\nfunction ItemList() {\n  const [items, setItems] = useState<Item[]>([]);\n  const [loading, setLoading] = useState<boolean>(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const fetchItems = async () => {\n      try {\n        // Simulate an API call\n        const response = await new Promise<Item[]>((resolve) =>\n          setTimeout(() => {\n            resolve([\n              { id: 1, name: 'Apple' },\n              { id: 2, name: 'Banana' },\n              { id: 3, name: 'Cherry' }\n            ]);\n          }, 1000)\n        );\n        setItems(response);\n      } catch (err: any) {\n        setError(err.message || 'Failed to fetch items');\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchItems();\n  }, []);\n\n  if (loading) {\n    return <div>Loading items...</div>;\n  }\n\n  if (error) {\n    return <div style={{ color: 'red' }}>Error: {error}</div>;\n  }\n\n  return (\n    <div>\n      <h1>Item List</h1>\n      <ul>\n        {items.map((item) => (\n          <li key={item.id}>{item.name}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Render the component to the DOM\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  ReactDOM.createRoot(rootElement).render(\n    <React.StrictMode>\n      <ItemList />\n    </React.StrictMode>\n  );\n} else {\n  console.error(\"Root element with ID 'root' not found in the document.\");\n}\n","lang":"typescript","description":"This example demonstrates a basic React functional component using `useState` for managing component state and `useEffect` for handling side effects like data fetching. It simulates an asynchronous API call to fetch a list of items and displays them, including loading and error states. Requires a 'root' div in your HTML.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}