To use Jinaga with React, you will need to install a couple of React packages, and the Jinaga-React connector. The connector currently works with React 16.
npm i react@16 react-dom@16 jinaga-reactIf you are using TypeScript, you will also want to add the types for those React packages. Jinaga was build with TypeScript, so it's all build in.
npm i -D @types/react@16 @types/react-dom@16The entry point of the application will be a component.
Let's create a really simple one to make sure everything is set up correctly.
Add a file at src/client/app.jsx to just display a message.
import * as React from "react";
export const App = ({}) => (
<p>Hello, World! So glad you could make it.</p>
);We'll need a place to render the App component on the page.
Open up src/server/index.html and add a <div> tag within the body.
<html>
<body>
<div id="application-host"></div>
</body>
</html>In the previous step, you renamed your main entry point to either main.jsx or main.tsx.
That extra x at the end tells the compiler that this file can contain HTML-like tags.
It's pretty cool.
Now change the code in that file to render the component into the host <div>.
import { App } from "./app";
import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(
<App />,
document.getElementById("application-host")
);Build and run your app to see if the message shows up on your page. If so, congratulations! You are now running a React front end.