Frontend framework simplify the creation of React-Redux applictions.
MIT License
@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.
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> is a special React Element created by utCreateElement() function, which is the core of the framework.
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:
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().
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: