React Compiler Rewrites Legacy PHP Form

React Compiler Playground import { db, emailsTable } from '@/app/db'; async function submit(formData) { "use server" await db.insert(emailTable).values({ name: formData.get('name'), email: formData.get('email') }) } export default function Page() { return ( <form method="post" action={submit}> <label htmlFor="name">Name:</label> <input type="text" id="name" name="name" /> <label htmlFor="email">Email:</label> <input type="email" id="email" name="email" /> <input type="submit" value="Submit" /> </form> ); } <?php use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\Request; if ($_SERVER['REQUEST_METHOD'] == 'POST') { $name = request()->input('name'); $email = request()->input('email'); DB::insert('insert into emails (name, email) values (?, ?)', [$name, $email]); } else { ?> <form id="myForm" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" /> <label for="email">Email:</label> <input type="email" id="email" name="email" /> <input type="submit" value="Submit" /> </form> <script> $(document).ready(function() { $('#myForm').submit(function(event) { event.preventDefault(); var formData = $(this).serialize(); $.ajax({ type: 'POST', url: 'server-action.php', data: formData, success: function(response) { console.log('Form submitted successfully!'); }, error: function(xhr, status, error) { console.log('Error submitting form: ' + error); } }); }); }); </script> <?php } ?>

A React Compiler Playground screenshot shows a modern React server action on the left and equivalent verbose PHP, HTML, and jQuery form-handling code on the right. The joke is that the new React compiler makes a simple form submission look dramatically cleaner than the legacy implementation, so the image is used to celebrate React reducing boilerplate or to mock older web development stacks.

• @gentoomemes / 11311 2024-05-16