🚀 Coherent.js Starter App
A simple, working full-stack example that actually works
🎯 What You'll Build
A simple counter app that demonstrates:
- ✅ Server-Side Rendering (SSR)
- ✅ Client-Side Hydration
- ✅ Interactive Components
- ✅ State Management
⚡ Quick Start
# Clone the repository git clone https://github.com/coherentjs/coherent.git cd coherent/examples/starter-app # Run the server node server.js # Open http://localhost:3000
That's it! The counter works, buttons click, state updates. Everything just works.
✨ Key Features
🖥️ Server-Side Rendering
Fast initial page loads with complete HTML rendered on the server. SEO-friendly and works without JavaScript.
⚡ Client Hydration
Makes server-rendered HTML interactive. Preserves content, attaches event handlers, enables state management.
🔄 State Management
Built-in reactive state with withState. Simple setState calls trigger automatic re-rendering.
🎯 Simple Setup
Just 2 files and one command to run. No build steps, no complex configuration. It just works.
💻 Code Example
Here's the complete Counter component:
import { withState } from '@coherent.js/core';
export const Counter = withState({ count: 0 })(({ state, setState }) => ({
div: {
'data-coherent-component': 'counter',
className: 'counter',
children: [
{ h2: { text: 'Interactive Counter' } },
{ p: { text: `Count: ${state.count}` } },
{
button: {
text: '+',
onclick: (event, state, setState) => {
setState({ count: state.count + 1 });
}
}
}
]
}
}));📚 Documentation
🚀 Ready to Start?
Get the starter app and build your first Coherent.js application in minutes!