Semantic UI React Starter

Usage

First install semantic-react-starter globally:

npm install -g semantic-react-starter

In order to start the project enter:

semantic-react-starter <app_name>

This command will copy the skeleton project to the <app_name> directory.

Supported cross-cutting concerns

1. Basic configuration of react project with easy to use npm scripts (based on create-react-app module)
2. Redux as a single source of truth for the application state
3. Application routing associated with Redux
4. Application state persisted in Local Storage that enables page reloading in SPA app
5. Support for immutable domain objects
6. SSO Authorization with Keycloak
7. i18n that supports two languages: English and German
8. Common styling standard: semantic-ui and aphrodite (for inline styles in components)

Naming Convention

| Type | Convention | Example Name | |---|---|---| | Component | Start with the capital letter and follow the CamelCase notation. Do not finish name with the *Component suffix. File should have .jsx extension. | TopMenu.jsx | | HOC Component | Follow the camelCase notation which describes additional functionality. File should have .jsx extension. | withSecurity.jsx | | Pages | Start with the capital letter and follow the CamelCase notation. File should have .jsx extension. | WelcomePage.jsx | | Domain Model Representation | Start with the capital letter and follow the CamelCase notation. File should have .js extension. | User.js | | Redux Actions/Reducers | Place actions and reducer in the directory that is responsible for functionality encapsulation. Name them actions.js and reducer.js respectively. | authentication/actions.js, authentication/reducer.js |

Versions

• 0.0.1 - First solution that provides storage, routing and authentication functionality