React provider for AdonisJS.
This provider requires AdonisJS v5 preview and won't work with AdonisJS v4.
npm i adonis-react react react-dom
npm i -D @types/react
node ace invoke adonis-reactYou'll also need to add "jsx": "react" to the compilerOptions of your
TypeScript configuration.
It may change in the future, but for now adonis-react doesn't create any HTML
for you, so you will probably need to write a layout component that contains
the base structure for your page:
// app/Components/layouts/Base.tsx
import React, { ReactNode } from 'react';
export default function Base(props: { children: ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<title>My Adonis website</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>{props.children}</body>
</html>
);
}Now that you have a layout component, you can use it in any page component (the component that will be rendered from your controllers):
// app/Components/pages/Index.tsx
import React from 'react';
import Base from '../layouts/Base';
export default function Index() {
return (
<Base>
<div className="max-w-screen-xl mx-auto text-center py-16 px-8">
<h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
Hello from Adonis React!
</h2>
</div>
</Base>
);
}// start/routes.ts
import Route from '@ioc:Adonis/Core/Route';
import Index from 'App/Components/pages/Index';
Route.get('/', async ({ react }) => react.render(Index));// app/Controllers/Http/MyController.ts
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import Index from 'App/Components/pages/Index';
export default class MyController {
index({ react }: HttpContextContract) {
return react.render(Index);
}
}If the component you render expects props, they must be passed as a second
argument to the render method:
// app/Components/pages/WithProps.tsx
import React from 'react';
import Base from '../layouts/Base';
export default function WithProps(props: { name: string }) {
return (
<Base>
<div className="max-w-screen-xl mx-auto text-center py-16 px-8">
<h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
Hello {props.name}!
</h2>
</div>
</Base>
);
}// start/routes.ts
import Route from '@ioc:Adonis/Core/Route';
import Index from 'App/Components/pages/Index';
Route.get('/with-props', async ({ react }) =>
react.render(WithProps, { name: 'my friend' }),
);Adonis React provides a hook to access the Adonis context and some helpers from anywhere inside the component tree.
// app/Components/pages/WithContext.tsx
import { useAdonisContext } from '@ioc:React';
import React from 'react';
import Base from '../layouts/Base';
export default function WithContext(props: { name: string }) {
const { request } = useAdonisContext();
return (
<Base>
<div className="max-w-screen-xl mx-auto text-center py-16 px-8">
<h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
Hello from {request.url()}!
</h2>
</div>
</Base>
);
}
// start/routes.ts
import Route from '@ioc:Adonis/Core/Route';
import WithContext from 'App/Components/pages/WithContext';
Route.get('*', async ({ react }) => react.render(WithContext));