11This project was bootstrapped with [ Create React App] ( https://github.com/facebookincubator/create-react-app ) .
22# JSON Forms React seed App
33This 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.
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).
56
67It is based on create-react-app and only contains minor modifications.
78
@@ -16,8 +17,8 @@ Let's briefly have a look at the most important files:
1617* ` src/uischema.json ` contains the UI schema
1718* ` src/index.js ` is the entry point of the application and sets up the redux store
1819 that contains the data, the JSON and the UI schema necessary for JSON Forms.
19- * ` src/App.js ` is the main React component and makes use of the JSON Forms Component
20- in order to render a form.
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.
2122
2223The [ data schema] ( https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/schema.json ) defines
2324the structure of a Task: it contains attributes such as title, description, due date and so on.
@@ -45,7 +46,7 @@ const store = createStore(
4546 uischema
4647 },
4748 renderers: JsonForms .renderers ,
48- fields : JsonForms .fields
49+ cells : JsonForms .cells
4950 },
5051 },
5152 applyMiddleware (thunk)
@@ -64,27 +65,27 @@ store.dispatch(Actions.validate());
6465```
6566
6667We then use the ` Provider ` component provided by ` react-redux ` to provide the store to the
67- ` App ` component and all its children.
68+ JSON Forms redux component and all its children.
6869
6970``` js
70- ReactDOM .render (
71- < Provider store= {store}>
72- < App / >
73- < / Provider> ,
74- document .getElementById (' root' )
75- );
71+ < Provider store= {store}>
72+ < JsonFormsReduxContext>
73+ < JsonFormsDispatch / >
74+ < / JsonFormsReduxContext>
75+ < / Provider>
7676```
7777
7878## Rendering our form
79- The ` App ` component is responsible for rendering our actual form.
80- It does so by importing and using ` DispatchRenderer ` from ` @jsonforms/core ` .
79+ The ` App ` component is responsible for rendering our actual forms.
80+
81+ The redux form is rendered by importing and using ` DispatchRenderer ` from ` @jsonforms/core ` .
8182` DispatchRenderer ` expects ` schema ` and ` uischema ` props which define
8283the form to be rendered but if those are omitted, they will be pulled from the
8384store which was provided via ` Provider ` previously.
8485
85- Since we also like to display the actual data that is being edited we
86- ` connect ` the ` App ` component to the store in order to extract the data
87- from it.
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 .
8889
8990## Custom renderers
9091Please see [ our corresponding tutorial] ( https://jsonforms.io/docs/tutorial ) on how to add custom renderers.
0 commit comments