Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uteamjs/uteam-react
Frontend framework simplify the creation of React-Redux applictions.
https://github.com/uteamjs/uteam-react
nodejs react react-router redux yaml
Last synced: 29 days ago
JSON representation
Frontend framework simplify the creation of React-Redux applictions.
- Host: GitHub
- URL: https://github.com/uteamjs/uteam-react
- Owner: uteamjs
- License: mit
- Created: 2021-08-15T08:43:41.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T13:32:58.000Z (about 2 months ago)
- Last Synced: 2024-10-08T17:21:49.373Z (about 1 month ago)
- Topics: nodejs, react, react-router, redux, yaml
- Language: JavaScript
- Homepage: https://u.team
- Size: 139 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[@uteamjs/react](https://u.team/document/uteam-react/overview) 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](https://u.team/document/uteam-react/overview), 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](https://u.team/document/uteam-react/overview) 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](https://u.team/document/uteam-react/overview) 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](https://u.team/document/introduction/getstart) for more details.
# @uteamjs Element
**@uteamjs \** is a special React Element created by [utCreateElement()](https://u.team/document/uteam-react/utCreateElement) function, which is the core of the framework.
## Reducer
```jsx
const reducer = utReducer('react-example/hello-world', {
init: {
fields: {
name: {
label: 'Please enter your name'
},
...
},
},
actions: {
clear: (state, value) => state.fields.name.value = '',
...
}
})
```
[Reducer](https://u.team/document/uteam-react/reducer) is an object which has:
- A unique identifier in the form of **\/\**.
- An **init** object for initializing the state variable
- **actions** to be dispatched by the [call() / api()](https://u.team/document/uteam-react/callapi) functions
## Layout
```jsx
const layout = ({ _, Field }) => <>
Hello World (use hook)
Your name is: {_.fields.name.value}
>
```
[Layout](https://u.team/document/uteam-react/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()](https://u.team/document/uteam-react/callapi).
## utCreateElement
```jsx
export default utCreateElement({ reducer, layout })
```
Finally, a standard **React JSX Element** is created using the [utCreateElement()](https://u.team/document/uteam-react/utCreateElement) function by passing the reducer and layout object to it.
At the back, [@uteamjs/react](https://u.team/document/uteam-react/overview) helps to:
- Initialize the **Redux store** with the init object
- Create the action dispatcher
- Connect the [reducer](https://u.team/document/uteam-react/reducer) to [layout](https://u.team/document/uteam-react/layout) component automatically
- Inject state object, Form element and helper functions as properties in Layout component
- Fetching data with backend [RESTful Api](https://u.team/document/uteam-node/api)
- Setup the React-Router
# License
[MIT](LICENSE)