React Redux Form Validation

React Validation

React validation can be easily done using React Redux Validator which will help us to add validator a page with ease.

npm install react-redux
npm install redux-form

Field

Each field need to be decorated with Redux Form Field,

Mandatory fields are

• name (Name will be used to add validation)
• field (Control reference for Redux-Form control to get added into form control)
• component (Rendering the control, binding Redex references, and error notification)
• Decorated inside a form

React Field exposes input and meta object which contains, which can be used to display error messages

Input (which add's following client events)

• onBlur
• onChange
• onDragStart
• onDrop
• onFocus

Meta: (Redux Form properties)

• active
• valid
• touched
• error
• invalid
• visited
• form
• error
• dirty
• autofilled
• submitting
• submitFailed
• pristine

Custom Control decoration with Field

renderField = field =>

        <formfieldscontrol
            name="name"

            field={field.input}

<input

            {...this.props.field}

            name={this.props.name}

Input Control decoration with Field

<input
            name=
            {...field}

Redux Form

While exposing redux form ensure a unique form page name, validation method and warn message passed.

export default reduxForm({

  form: 'CustomerPage',                 // a unique identifier for this form

  validate: CustomerPageValidation,     // <--- div="" function="" given="" redux-form="" to="" validation="">

  warn: CustomerPageWarn                // <--- div="" function="" given="" redux-form="" to="" warning="">

})(CustomerPage);

Sample

https://github.com/hariram302/react-kickstart/blob/master/client/CustomerPage.js
https://github.com/hariram302/react-kickstart/

How to setup Proxy Git Repository

Most commonly on Continous Integration, we need to take latest of npm packages which might not be a idle solutions.

The best way is to have a proxy repository which can help to do quick download of npm packages. There are two ways of doing

1. Setting up GitHub Enteriprise using Couch DB which mimick actual git hub.
2. Setting up a proxy which acts as a private git repo which can download only if the package is not available in proxy.

Sinopia

Sinopia is an application acts as a proxy GitHub, which uses express as web server.

Prerequisites

• Node JS (NPM Package manager)
• Python 2.x (above 2.5 and less than 3.0)

Recommend Action

• Define Python path in System Environment variable.
• Define npm and npm cache folder to specific folder instead of user profile folder. 

Setting up Sinopia

npm install sinopia -g sinopia 

This install in global packages under sinopia

Run sinopia from command prompt which starts the server in localhost: 4873

Accessing Sinopia

npm set registry http://localhost/4873 

Which register sinopia as npm repository, if we try to execute npm install for any other packes you will be able to see localhost:4873 is called to download package.

We will able to see the package download in sinopia command prompt. If the same package is download again in sinopia command prompt you will see no download

Changing port/Exposing to external machines

• Open full.yaml add
• listen: http://localhost:333/ to run on different port
• listen: http://<serverip:333>/ to expose as server

Setting up Sinopia as Windows Service

• Download WinSW and rename that as sinopia-winsw
• Create a configuration file in c:\sinopia, named sinopia-winsw.xml with the following configuration xml sinopia sinopia sinopia node c:\sinopia\node_modules\sinopia\lib\cli.js -c c:\sinopia\config.yaml roll c:\sinopia\  
• Ensure right folder is set for arguments and working directory.
• sinopia-winsw.exe install
• To install
•  sinopia-winsw.exe start
• To start the sinopia as windows services which can avoid command prompt need.

https://github.com/rlidwka/sinopia/wiki/Installing-As-a-Windows-Service