React.md

Getting started with React

isomor-react-app is a tool to create a react application using create-react-app, with all additional setup requiered for isomor.

Note: for the moment, only TypeScript is supported.

Run the following command:

npx isomor-react-app my-app
cd my-app
yarn dev

Finish, you are ready to code :-)

Note: src-isomor folder is where you will be coding instead of src. Note: yarn dev is running the transpiler, the backend and the frontend in watch mode. It is using the npm library run-screen to start those processes in parallel. You can switch from one process to the other by pressing TAB

Start coding

Now we have our working environment, let's try out with adding a file data.ts in the server folder src-isomor/server:

import { readdir } from 'fs-extra';

export interface GetListInput {
    foo: string;
}

export async function getList(input: GetListInput): Promise<string[]> {
    const files = await readdir('./');
    return files.map(file => `${file}-${input.foo}-${Math.random()}`);
}

Don't forget to add the library fs-extra to your node_modules:

yarn add fs-extra
yarn add @types/fs-extra --dev

Now let's call getList in the app. Open src-isomor/App.tsx and add the following code:

import React from 'react';
import './App.css';

import { getList, GetListInput } from './server/data';

const App = () => {
  const [list, setList] = React.useState<string[]>([]);
  const load = async () => {
    const input: GetListInput = { foo: 'magic' };
    setList(await getList(input));
  }
  React.useEffect(() => { load(); }, []);
  return (
    <div className="App">
      <header className="App-header">
        Isomor
      </header>
      <ul>
        {
          list.map((item, index) => <li key={index}>{item}</li>)
        }
      </ul>
      <button onClick={load}>load again</button>
    </div>
  );
}

export default App;

Here we are using hook instead of class component but you can find an example in the repo packages/examples/react/src-isomor/App.tsx using class.