tessl/npm-react

React is a JavaScript library for building user interfaces through a declarative, component-based approach.

—

Pending

Overview

Eval results

Files

Built-in Components

Name: tessl/npm-react
Author: tessl

Special components: Fragment, StrictMode, Suspense, Profiler.

Fragment

Render multiple children without a wrapper.

const Fragment: ComponentType<{ children?: ReactNode; key?: Key }>;

// Long form
<Fragment><Child1 /><Child2 /></Fragment>

// Short syntax
<><Child1 /><Child2 /></>

// With key (required when mapping)
{todos.map(todo => (
  <Fragment key={todo.id}>
    <Title>{todo.title}</Title>
    <Body>{todo.body}</Body>
  </Fragment>
))}

StrictMode

Development checks for its descendants.

const StrictMode: ComponentType<{ children?: ReactNode }>;

<StrictMode>
  <App />  {/* Detects unsafe lifecycles, unexpected side effects, etc. */}
</StrictMode>

Suspense

Declarative loading states.

const Suspense: ComponentType<{ children?: ReactNode; fallback?: ReactNode }>;

<Suspense fallback={<Loader />}>
  <LazyComponent />
</Suspense>

// Nested boundaries
<Suspense fallback={<AppShell />}>
  <Nav />
  <Suspense fallback={<ContentSkeleton />}>
    <MainContent />
  </Suspense>
</Suspense>

Profiler

Performance monitoring.

const Profiler: ComponentType<{
  id: string;
  onRender?: (id, phase, actualDuration, baseDuration, startTime, commitTime) => void;
  children?: ReactNode;
}>;

<Profiler id="App" onRender={(id, phase, duration) => {
  console.log(`${id} took ${duration}ms`);
}}>
  <App />
</Profiler>

Install with Tessl CLI

npx tessl i tessl/npm-react

docs

built-in-components.md