CluedIn Widget
This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.
The project is divided in 2 parts. The first one is the main REACT application and the second all all the widgets to build an Entity Page.
All the widgets are located in the folder 'widget' in the project root.
Pre-requesite
You need a version of node and npm installed.
Some basic knowledge of React is required.
The main plugins used are: react, react-router, redux, react-intl,...
The project is written in ES6 using Babel and Webpack to generate the APP.
Getting Started
Install dependencies
npm install
Generate the app ( and/or the style )
gulp
Run the Web Dev Server ( react hot reloading )
npm run dev
Project Structure
core
Contain the react application.
src
Contain some scripts needed by the NODE.JS Server ( located in CluedIn.Webapp ) to serve the appropriate static files to the APP or any page ( self-injectable widget ).
iso
All stateless methods which can be used in the browser or in a node environment. If you have a stateless method which looks generic enough, please, add them in the ISO folder.
PS: 'iso' stands for 'isomorphic'.
locales
Contain all the translation for the application used by a plugin called React-intl.
Styling the application
Generic Styling
This project is using SCSS.
The styles are located in the /core/style.
Styling a React component
This project uses React-Css-Module for styling component. This enables us to have self-contained CSS.
Please, refer to https://github.com/gajus/react-css-modules for more information.
Redux
This project uses Redux for structuring the application.
Create a specific Entity Page
The routing of the app is dynamically generated based on the entity configuration (/core/config/entity.js).
If the entity config object has the parameter 'url' present, the app will create a router for it
If the entity config object does not have the 'url' parameter, the app will use the defaultEntity page
Best-practises
- Keep React component as generic as possible ( avoid using the Connect method from the Redux library ).
- Do not hesitate to create React components
- Favor props over state in your React component. State is generally used by wrapper components
- Dispatch your (redux) actions in wrapper components
- Try to keep the style self-contained and favor SCSS mixins and placeholders inside your component scss file
- If you have small images, leverage Webpack to load them in base64 directly in the application