#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