natrim/app.js

## app.js
// in src/app.js
import React from 'react';
import { jsonServerRestClient, Admin, Resource } from 'admin-on-rest';
import { PostList, PostEdit, PostCreate } from './posts';

const App = () => (
  <Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
    <Resource name="posts" list={PostList} create={PostCreate} edit={PostEdit} />
  </Admin>
);
export default App;

## index.html
<!-- in public/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

## index.js
// in src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

## package.json
{
  "name": "aor-form-crash",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "admin-on-rest": "^1.3.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

## posts.js
// in src/posts.js
import React from 'react';
import { List, Edit, Create, Datagrid, TextField, EditButton, LongTextInput, SimpleForm, TextInput, required, minLength } from 'admin-on-rest';

export const PostList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="body" />
            <EditButton />
        </Datagrid>
    </List>
);

const PostTitle = ({ record }) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = (props) => {
    console.log('render edit form');
    return (
        <Edit title={<PostTitle />} {...props}>
            <BaseForm redirect="show" />
        </Edit>
    );
};

export const PostCreate = (props) => {
    console.log('render create form');
    return (
        <Create {...props}>
            <BaseForm redirect="edit" />
        </Create>
    );
};

const BaseForm = (props) => {
    console.log('render base form')
    return (
        <SimpleForm {...props}>
            <TextInput source="title" validate={[required, minLength(3)]} />
            <LongTextInput source="body" />
        </SimpleForm>
    );
};
	// in src/app.js
	import React from 'react';
	import { jsonServerRestClient, Admin, Resource } from 'admin-on-rest';
	import { PostList, PostEdit, PostCreate } from './posts';

	const App = () => (
	<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
	<Resource name="posts" list={PostList} create={PostCreate} edit={PostEdit} />
	</Admin>
	);
	export default App;
	<!-- in public/index.html -->
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>React App</title>
	</head>
	<body>
	<noscript>
	You need to enable JavaScript to run this app.
	</noscript>
	<div id="root"></div>
	</body>
	</html>
	// in src/index.js
	import React from 'react';
	import ReactDOM from 'react-dom';
	import App from './App';

	ReactDOM.render(<App />, document.getElementById('root'));
	{
	"name": "aor-form-crash",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
	"admin-on-rest": "^1.3.0",
	"react": "^15.6.1",
	"react-dom": "^15.6.1",
	"react-scripts": "1.0.13"
	},
	"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test --env=jsdom",
	"eject": "react-scripts eject"
	}
	}
	// in src/posts.js
	import React from 'react';
	import { List, Edit, Create, Datagrid, TextField, EditButton, LongTextInput, SimpleForm, TextInput, required, minLength } from 'admin-on-rest';

	export const PostList = (props) => (
	<List {...props}>
	<Datagrid>
	<TextField source="id" />
	<TextField source="title" />
	<TextField source="body" />
	<EditButton />
	</Datagrid>
	</List>
	);

	const PostTitle = ({ record }) => {
	return <span>Post {record ? `"${record.title}"` : ''}</span>;
	};

	export const PostEdit = (props) => {
	console.log('render edit form');
	return (
	<Edit title={<PostTitle />} {...props}>
	<BaseForm redirect="show" />
	</Edit>
	);
	};

	export const PostCreate = (props) => {
	console.log('render create form');
	return (
	<Create {...props}>
	<BaseForm redirect="edit" />
	</Create>
	);
	};

	const BaseForm = (props) => {
	console.log('render base form')
	return (
	<SimpleForm {...props}>
	<TextInput source="title" validate={[required, minLength(3)]} />
	<LongTextInput source="body" />
	</SimpleForm>
	);
	};