11 KiB
| layout | title | description | platform | control | documentation |
|---|---|---|---|---|---|
| post | Welcome to Syncfusion ReactJS | Overview of Syncfusion Essential Studio for React JS components with 70+ unique components which is powered by Essential Studio JavaScript Components. | reactjs | Introduction | ug |
React JS
React is an DOM management library that is used to create user interfaces, it computes the minimal set of changes that makes keep your DOM up-to-date. Essential JavaScript components are supported to React JavaScript library through wrappers in ej.web.react.min.js file.
Getting started with React
This section briefly explains about how to create a web application with Syncfusion React components.
Create React Application layout
Include the following dependencies for render React components with Syncfusion widgets.
{% highlight html %}
<html> <head> </head> </html>{% endhighlight %}
I> From React v16.x.x, support for React.createClass has been removed. So if you are using react framework later versions then, you need to refer create-react-class package separately.
Add React Components
React components are typically written in JSX. It is allowing quoting of HTML and using HTML tag’s syntax to render sub-components. HTML syntax is processed into JavaScript calls of the React library.
To translate JSX to plain JavaScript, we must use <script type=”text/babel”> and refer the browser.min.js file to perform the transformation in the browser.
To render the React components, you must have defined the HTML div element with id attribute in HTML file which is target element of React components.
Create a HTML file and paste the following content
{% highlight html %}
{% endhighlight %}
Create a JSX file and paste the following content
{% highlight js %}
ReactDOM.render(
<EJ.Grid dataSource = {window.gridData} pageSettings-currentPage={2} allowGrouping = {true}
allowPaging = {true} allowSorting= {true}> </EJ.Grid>, document.getElementById('container') );
{% endhighlight %}
Output of above code
Content template
It provides to render the multiple components inside of single components. For example if you are using the EJ.Grid component inside the EJ.Dialog, it can be rendered as like mentioned in the below code example
{% highlight html %}
<div id="container"></div>
<script type="text/babel">
ReactDOM.render(
<EJ.Dialog title="dialog">
<EJ.Grid dataSource = {window.gridData} pageSettings-currentPage={2} allowGrouping = {true}
allowPaging = {true} allowSorting= {true}> </EJ.Grid> </EJ.Dialog>, document.getElementById('container') );
{% endhighlight %}
Output of above code
React application with NPM packages
We can create the React application with NPM packages.
Setup
Pre-requisites
We will need Node.js if you don't have it installed on your machine, check the link from the table below.
| SN | Software | Description |
| 1 | Node.js and NPM | Node.js is the platform needed for the Cordova development. Checkout Node.js package-manager |
Gulp is a command line task runner using Node.js platform. It runs custom defined repetitious tasks.
To use Gulp, you need to install it as a global module through NPM.
- npm install --global gulp
Configuration
This section briefly explains about how to configure the package.json and gulpfile.js file.
package.json
Create a package.json file which is best way to manage locally installed packages.
N>If we used the gulp-react plugin, we don’t need to include the browser.js file on the page either.
{% highlight js %}
{ "name": "ejreact", "version": "1.0.0", "devDependencies": { "browser-sync": "^2.14.3", "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-react": "^3.1.0", "gulp-watch": "^4.3.9" } }
{% endhighlight %}
gulpfile.js
This file will give you a taste of what gulp does.
{% highlight js %}
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var react = require('gulp-react'); var watch = require('gulp-watch'); var clean = require('gulp-clean'); var reload = browserSync.reload;
gulp.task('build',['clean'], function () { //Convert jsx to js gulp.src('source/samples/**/*.jsx') .pipe(react()) .pipe(gulp.dest('source/jsx'));
});
gulp.task('clean', function () { return gulp.src('app', {read: false}) .pipe(clean()); });
// Static Server + watching html files gulp.task('serve', function () { browserSync.init({ server: { baseDir: "./" } }); });
// Files watching gulp.task('watch', ['build', 'serve'], function () { gulp.watch(["source/samples/**/*.{js,jsx,html}"], ['build', reload]); })
gulp.task('default', ['watch']);
{% endhighlight %}
Converting JSX to JavaScript with React
When building with React, you can write plain JavaScript or in JSX. JSX is a preprocessor that gives you a more concise syntax.
which is easier and more readable, but it’s needs to be converted to plain JavaScript through gulp-react plugin.
{% highlight js %}
ReactDOM.render(
<EJ.Grid dataSource = {window.gridData} pageSettings-currentPage={2} allowGrouping = {true}
allowPaging = {true} allowSorting= {true}> </EJ.Grid>, document.getElementById('container') );
{% endhighlight %}
With the help of gulp-react and its gulp plugin, you can convert JSX to JavaScript by piping react() into the build task
{% highlight js %}
gulp.task('build',['clean'], function () { //Convert jsx to js gulp.src('source/samples/**/*.jsx') .pipe(react()) .pipe(gulp.dest('source/jsx'));
});
{% endhighlight %}
Watching JS, JSX and HTML files for changes
Let’s configure gulp’s watch task to watch for JS, JSX and HTML files, then execute build and serve tasks.
{% highlight js %}
// Files watching gulp.task('watch', ['build', 'serve'], function () { gulp.watch(["source/samples/**/*.{js,jsx,html}"], ['build', reload]); })
{% endhighlight %}
Removing files and folders
Let’s configure gulp’s clean task to removing files and folders.
{% highlight js %}
gulp.task('clean', function () { return gulp.src('app', {read: false}) .pipe(clean()); });
{% endhighlight %}
Run Application
Create an index.html file, then include the following dependencies to render the React application with Essential JS widgets. This index.html will be act as a start page of the application.
{% highlight html %}
<html> <head> </head> </html>{% endhighlight %}
Create a JSX file and paste the following content.
{% highlight js %}
ReactDOM.render(
<EJ.Grid dataSource = {window.gridData} pageSettings-currentPage={2} allowGrouping = {true}
allowPaging = {true} allowSorting= {true}> </EJ.Grid>, document.getElementById('container') );
{% endhighlight %}
Now type the below commands step by step for launching ReactJS application in browser.
-
npm install – To install the npm packages
-
gulp – To launch application in browser
Screenshot of launching application
