@uteamjs/react is a framework that lets developers create React-Redux applications easily. Developers immediately produce quality applications without any steep learning curve. Experienced developers can focus more on business logic rather than coding a bunch of boilerplate.

Using @uteamjs/react, there are no additional boilerplate files generated. The Redux reducer logic and React layout components can be easily put together in a single JSX file. It minimizes the development and maintenance effort substantially.

Installation

uteam CLI helps you automate the creation, deletion and generation of application modules and packages.

$ npm install -g uteam

Use uteam create to generate React-Redux application based on @uteamjs/react framework:

$ uteam create -a tutorial-react -p get-started -g

Change to ...packages/main folder, then start the webpack development server:

$ npm start

Open your browser with URL http://localhost:3000, then click the Get Started link:

Refer to Get Started for more details.

@uteamjs Element

@uteamjs <Element> is a special React Element created by utCreateElement() function, which is the core of the framework.

Reducer

const reducer = utReducer('react-example/hello-world', {
   init: {
       fields: {
           name: {
               label: 'Please enter your name'
           },
         ...
       },
      
   },
   actions: {
       clear: (state, value) => state.fields.name.value = '',
       ...
   }
})

Reducer is an object which has:

• A unique identifier in the form of <Module>/<Component>.
• An init object for initializing the state variable
• actions to be dispatched by the call() / api() functions

Layout

const layout = ({ _, Field }) => <>
       <h4>Hello World (use hook)</h4>
       <Field id='name' />
       Your name is: {_.fields.name.value}
   </>

Layout is the @uteamjs Component with different properties injected. A special _ object refers to the state object inside the Redux store connected to this component. Other variables include Form elements such as Field, Section ... and helper functions such call() / api().

utCreateElement

export default utCreateElement({ reducer, layout })

Finally, a standard React JSX Element is created using the utCreateElement() function by passing the reducer and layout object to it.

At the back, @uteamjs/react helps to:

• Initialize the Redux store with the init object
• Create the action dispatcher
• Connect the reducer to layout component automatically
• Inject state object, Form element and helper functions as properties in Layout component
• Fetching data with backend RESTful Api
• Setup the React-Router

License

MIT