You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+9-26
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,6 @@
1
1
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
2
2
# JSON Forms React seed App
3
-
This seed demonstrates how to use [JSON Forms](https://jsonforms.io) with React
4
-
in order to render a simple form for displaying a task entity. It showcases both the
5
-
redux variant and the React standalone component (without redux).
3
+
This seed demonstrates how to use [JSON Forms](https://jsonforms.io) with React in order to render a simple form for displaying a task entity. It showcases both the redux variant and the React standalone component (without redux).
6
4
7
5
It is based on create-react-app and only contains minor modifications.
8
6
@@ -15,23 +13,14 @@ It is based on create-react-app and only contains minor modifications.
15
13
Let's briefly have a look at the most important files:
16
14
*`src/schema.json` contains the JSON schema (also referred to as 'data schema')
17
15
*`src/uischema.json` contains the UI schema
18
-
*`src/index.js` is the entry point of the application and sets up the redux store
19
-
that contains the data, the JSON and the UI schema necessary for JSON Forms.
20
-
*`src/App.js` is the main React component and makes use of the core JSON Forms component
21
-
or the React standalone component in order to render a form.
16
+
*`src/index.js` is the entry point of the application and sets up the redux store that contains the data, the JSON and the UI schema necessary for JSON Forms.
17
+
*`src/App.js` is the main React component and makes use of the core JSON Forms component or the React standalone component in order to render a form.
22
18
23
-
The [data schema](https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/schema.json) defines
24
-
the structure of a Task: it contains attributes such as title, description, due date and so on.
19
+
The [data schema](https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/schema.json) defines the structure of a Task: it contains attributes such as title, description, due date and so on.
25
20
26
-
The [corresponding UI schema](https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/uischema.json)
27
-
specifies controls for each property and puts them into a vertical layout that in turn contains two
28
-
horizontal layouts.
21
+
The [corresponding UI schema](https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/uischema.json) specifies controls for each property and puts them into a vertical layout that in turn contains two horizontal layouts.
29
22
30
-
Both the data schema and the UI schema are imported within `index.js` and are used
31
-
to set up a redux store. We make use of a helper function exported by JSON Forms
32
-
which expects the initial state. If you already have an existing redux store,
33
-
you'll need to import the jsonforms reducer and add it to your store.
34
-
Please refer to [the tutorial](https://jsonforms.io/docs/tutorial) for how to do this.
23
+
Both the data schema and the UI schema are imported within `index.js` and are used to set up a redux store. We make use of a helper function exported by JSON Forms which expects the initial state. If you already have an existing redux store, you'll need to import the jsonforms reducer and add it to your store. Please refer to [the tutorial](https://jsonforms.io/docs/tutorial) for how to do this.
35
24
36
25
## Setting up the store
37
26
@@ -64,8 +53,7 @@ store.dispatch({
64
53
store.dispatch(Actions.validate());
65
54
```
66
55
67
-
We then use the `Provider` component provided by `react-redux` to provide the store to the
68
-
JSON Forms redux component and all its children.
56
+
We then use the `Provider` component provided by `react-redux` to provide the store to the JSON Forms redux component and all its children.
69
57
70
58
```js
71
59
<Provider store={store}>
@@ -78,14 +66,9 @@ JSON Forms redux component and all its children.
78
66
## Rendering our form
79
67
The `App` component is responsible for rendering our actual forms.
80
68
81
-
The redux form is rendered by importing and using `DispatchRenderer` from `@jsonforms/core`.
82
-
`DispatchRenderer` expects `schema` and `uischema` props which define
83
-
the form to be rendered but if those are omitted, they will be pulled from the
84
-
store which was provided via `Provider` previously.
69
+
The redux form is rendered by importing and using `DispatchRenderer` from `@jsonforms/core`. `DispatchRenderer` expects `schema` and `uischema` props which define the form to be rendered but if those are omitted, they will be pulled from the store which was provided via `Provider` previously.
85
70
86
-
The standalone form is rendered by importing and using the `JsonForms` component and directly
87
-
handing over the `schema`, `uischema`, `data`, `renderer` and `cell` props. We listen to changes
88
-
in the form via the `onChange` callback .
71
+
The standalone form is rendered by importing and using the `JsonForms` component and directly handing over the `schema`, `uischema`, `data`, `renderer` and `cell` props. We listen to changes in the form via the `onChange` callback .
89
72
90
73
## Custom renderers
91
74
Please see [our corresponding tutorial](https://jsonforms.io/docs/tutorial) on how to add custom renderers.
0 commit comments