Ecosystem

React is the library. The ecosystem is the superpower.

Ecosystem Map

Click a category to explore

Next.js

Full-stack React framework

7M+/week

Remix

Web standards focused

300K+/week

Gatsby

Static site generation

200K+/week

⚛

React at the center — 24 tools across 8 categories

Frameworks Built on React

Next.js

Best For

Full-stack appsSEO-critical sitesE-commerceSaaS dashboards

Key Features

→ App Router
→ Server Components
→ Streaming SSR
→ Edge Runtime
→ Image Optimization

next.js-example.tsx

// Next.js App Router
export default async function Page() {
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();
  return <PostList posts={posts} />;
}

State Management Comparison

The same shopping cart feature — implemented four ways. Compare the code.

cart-usestate.tsx

const [items, setItems] = useState([]);
const addItem = (item) => setItems([...items, item]);
const total = items.reduce((s, i) => s + i.price, 0);

Lines

Boilerplate

None

Type

Built-in

Learn React once. Build iOS and Android too.

React Native shares business logic between web and mobile. The JSX is almost identical — only the primitives differ.

React (Web)

function Card({ title, image }) {
  return (
    <div className="card">
      <img src={image} alt={title} />
      <p>{title}</p>
      <button>Learn More</button>
    </div>
  );
}

React Native (Mobile)

function Card({ title, image }) {
  return (
    <View style={styles.card}>
      <Image source={{ uri: image }} />
      <Text>{title}</Text>
      <Pressable><Text>Learn More</Text></Pressable>
    </View>
  );
}

Same component logic. Same mental model. Different rendering targets.