https://github.com/robertoprevato/dataentry-react
Example of integration of DataEntry library with React
https://github.com/robertoprevato/dataentry-react
Last synced: 6 months ago
JSON representation
Example of integration of DataEntry library with React
- Host: GitHub
- URL: https://github.com/robertoprevato/dataentry-react
- Owner: RobertoPrevato
- License: mit
- Created: 2017-12-26T22:10:30.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-04T12:01:56.000Z (almost 8 years ago)
- Last Synced: 2024-11-24T20:46:32.430Z (11 months ago)
- Language: JavaScript
- Size: 192 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Example integration of DataEntry library with React
This demo includes a project template for applications using React, ES6 transpilation and Gulp task runner.
It contains a sample application and is preconfigured to offer integration with Gulp, for common tasks.
The demo has been created to show an example of integration with the forms validation library [Dataentry](https://github.com/RobertoPrevato/DataEntry).
The demo can be seen here: [https://robertoprevato.github.io/demos/dataentry/index.html](https://robertoprevato.github.io/demos/dataentry/index.html).
## React-template
This demo has been prepared editing the React project template available here: [https://github.com/RobertoPrevato/React-template](https://github.com/RobertoPrevato/React-template).
The project template offers an example of client side technology stack, featuring:
* Integration with Gulp task runner
* Transpilation of code from ES6 to ES5
* Gulp watch task, to monitor files for changes and automatically bundle the code during development
* Fast JavaScript bundling, using watchify together with browserify
* Strategy to organize the source code (both JavaScript and LESS), into logical areas
* Client side routing, using [react-router](https://github.com/reactjs/react-router)
* Client side localization strategy
* Strategy to display preloaders and error panels
* Example of React components definition, using ES6 class
* Compilation of LESS code into CSS
* Application wide, declarative and asynchronous forms validation strategy, using [Dataentry](https://github.com/RobertoPrevato/DataEntry)
## Live demo
A live demo of the React-template application is [available here](http://robertoprevato.github.io/demos/react-template/index.html).
## Getting started
To start using the React-template, either download the source code or use [git clone](https://git-scm.com/docs/git-clone) to clone the repository.
***
## Required software
### NodeJs
The React‑template utilizes NodeJs and its npm (Node package manager), which is included in installers available for most common operating systems. The npm is required to download the dependencies of the project template. This documentation assumes that the option to add the npm command to the PATH system variable is left active during the installation.
### Gulp cli
The React‑template utilizes the Gulp task runner. If not already installed, it is recommended to install the Gulp Command Line Interface (Gulp cli) globally, running from a command line the command:
`npm install --global gulp-cli`
### Restoring dependencies
Once the source code has been downloaded locally, it is necessary to restore the dependencies for the NodeJs tasks, which is achieved by running the npm install command in the root folder of the project template, where the packages.json file resides.
`npm install`
### Running the dev-init task
Once the npm install command completes, verify that the environment works properly by issuing this terminal command:
`gulp dev-init`
Which should produce navigable artifacts in a `httpdocs` folder.
***
### Visiting the demo application
The code of the React-template demo application does not require a running web server in order to be used.
It is possible to open and test the demo application by opening the index.html inside the `httpdocs` directly in a browser, like shown in the below picture.
[](http://robertoprevato.github.io/demos/react-template/images/test-without-server.png)
In any case, it is recommended to work with a web server, to use a more realistic development environment.
[](http://robertoprevato.github.io/demos/react-template/images/test-with-server.png)
The author's recommended way to quickly use a development web server, is to use the Python HttpServer module (requires Python 3 installed):
* `py -3 -m http.server 44660` (under Windows)
* `python3 -m http.server 44660` (under Linux)
Or, using Python 2.x:
* `py -2 -m SimpleHTTPServer 44660` (under Windows)
* `python -m SimpleHTTPServer 44660` (under Linux)
## Documentation
Detailed documentation is available at the [wiki page](https://github.com/RobertoPrevato/React-template/wiki).