React Express

Appearance

Context API ​

The Context API provides a way to pass data through the component tree without having to pass props manually at every level.

Features ​

  • Context Providers and Consumers
  • Reactive updates
  • HTML attribute-based API
  • Nested contexts support
  • Automatic cleanup

API Reference ​

Creating Context ​

javascript
const ThemeContext = ReactExpress.createContext('light');

HTML Integration ​

Provider ​

html
<div data-context="theme" data-context-value="dark">
  <!-- Child content -->
</div>

Consumer ​

html
<div data-context-consumer="theme">
  Current theme: {value}
</div>

JavaScript API ​

Creating Context ​

javascript
const UserContext = ReactExpress.createContext({
  name: 'Guest',
  role: 'visitor'
});

Provider Methods ​

javascript
UserContext.Provider({
  name: 'John',
  role: 'admin'
});

Consumer Methods ​

javascript
UserContext.Consumer(value => {
  console.log('User updated:', value);
});

Examples ​

Theme Switching ​

html
<!-- Create context -->
<script>
  const ThemeContext = ReactExpress.createContext('light');
</script>

<!-- Provider with controls -->
<div data-context="theme" data-context-value="light">
  <button onclick="this.parentElement.setAttribute('data-context-value', 'dark')">
    Switch to Dark
  </button>
  
  <!-- Consumer -->
  <div data-context-consumer="theme">
    Current theme: {value}
  </div>
  
  <!-- Nested consumer with custom template -->
  <div data-context-consumer="theme">
    <button class="btn-{value}">Themed Button</button>
  </div>
</div>

User Authentication ​

html
<script>
  const AuthContext = ReactExpress.createContext({
    user: null,
    isAuthenticated: false
  });
</script>

<div data-context="auth" data-context-value='{"user": "john", "isAuthenticated": true}'>
  <div data-context-consumer="auth">
    Welcome, {value.user}!
  </div>
</div>

Best Practices ​

  1. Context Organization

    • Create contexts for specific domains
    • Keep context values focused
    • Consider default values carefully

  2. Performance

    • Avoid unnecessary provider updates
    • Use multiple contexts instead of one large context
    • Consider memoization for complex values

  3. Error Handling

    • Provide meaningful default values
    • Handle missing providers gracefully
    • Validate context values

  4. Nested Contexts

    • Keep nesting shallow when possible
    • Consider context composition
    • Watch for circular dependencies

Common Patterns ​

Theme Provider ​

html
<div data-context="theme" data-context-value="light">
  <style>
    .theme-light { background: white; color: black; }
    .theme-dark { background: black; color: white; }
  </style>
  
  <div data-context-consumer="theme">
    <div class="theme-{value}">
      Themed content
    </div>
  </div>
</div>

Authentication Flow ​

html
<div data-context="auth" data-context-value='{"isAuthenticated": false}'>
  <div data-context-consumer="auth">
    {value.isAuthenticated ? 
      '<div>Welcome back!</div>' : 
      '<button>Login</button>'}
  </div>
</div>

Localization ​

html
<div data-context="locale" data-context-value='{"lang": "en"}'>
  <div data-context-consumer="locale">
    {value.lang === 'en' ? 'Hello' : 'Bonjour'}
  </div>
</div>

Error Boundaries ​

The Context API includes built-in error handling:

  1. Missing Provider fallback to default value
  2. Invalid context value handling
  3. Circular dependency detection
  4. Template parsing error recovery