STCMS Documentation

Complete guide to building modern, secure React/PHP applications with STCMS framework

Get Started Learn Architecture

React Components in Twig

Learn how to integrate React components with Twig templates

How It Works

Server-Side (Twig)

• Twig renders the initial HTML structure
• React components are embedded as empty divs
• Data is passed via data attributes
• JWT tokens are securely managed server-side

Client-Side (React)

• React components hydrate the empty divs
• Components read data from data attributes
• Interactive functionality is added
• Real-time updates and state management

Basic Example: Hello React!

This example shows a simple Hello React component that demonstrates the basic integration pattern.

Twig Template Code:

<div id="hello-root"></div>

React Component Code in assets/js/components/Hello.jsx:

import React from 'react';

export default function Hello() {
  return (
    <div style={{padding: '1em', background: '#e0f7fa', borderRadius: '8px'}}>Hello from React Component in assets/js/components/Hello.jsx!</div>
  );
}

Live Example:

Advanced Example: User Profile in assets/js/components/UserProfile.jsx

This example shows how to pass user data and handle authentication tokens securely.

Twig Template Code:

<div id="user-profile-root" 
     data-user='null' 
     data-jwt="">
    <!-- React component will render here -->
</div>

React Component Code in assets/js/components/UserProfile.jsx:

function UserProfile() {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        const userData = JSON.parse(
            document.getElementById('user-profile-root').dataset.user
        );
        setUser(userData);
        setLoading(false);
    }, []);
    
    if (loading) return <div>Loading...</div>;
    
    return (
        <div className="p-4 bg-green-50 rounded">
            <h3 className="text-lg font-semibold mb-2">Welcome, {user.name}!</h3>
            <p>Email: {user.email}</p>
            <p>Role: {user.role}</p>
        </div>
    );
}

Live Example:

Interactive Form Example

This example shows how to create interactive forms with React components.

Twig Template Code:

<div id="contact-form-root" 
     data-api-endpoint="/api/contact" 
     data-csrf-token="">
    <!-- React component will render here -->
</div>

React Component Code:

function ContactForm() {
    const [formData, setFormData] = useState({
        name: '', email: '', message: ''
    });
    const [submitting, setSubmitting] = useState(false);
    
    const handleSubmit = async (e) => {
        e.preventDefault();
        setSubmitting(true);
        // Form submission logic here
    };
    
    return (
        <form onSubmit={handleSubmit} className="space-y-4">
            <input 
                type="text" 
                placeholder="Name" 
                value={formData.name}
                onChange={(e) => setFormData({...formData, name: e.target.value})}
                className="w-full p-2 border rounded"
            />
            <button type="submit" disabled={submitting}>
                {submitting ? 'Sending...' : 'Send Message'}
            </button>
        </form>
    );
}

Live Example:

Best Practices

Security

• Never expose sensitive data in data attributes
• Use CSRF tokens for form submissions
• Validate all data server-side
• Sanitize user inputs before passing to React

Performance

• Keep data attributes minimal
• Use lazy loading for heavy components
• Implement proper error boundaries
• Cache React components when possible

Setup Instructions

Install Dependencies

Run npm install to install React and build tools.

Build React Components

Run npx vite build to compile your React components.

Include JavaScript

Add <script src="/assets/js/app.js"></script> to your Twig templates.

Create Components

Write React components in assets/js/components/ and import them in your main app file.