Using jQWidgets React Components with Create-React-App

What is Create-React-App

Many React developers wanted to have a React Enviroment where they can focus only on their code, having all the configuration files like webpack, babel, react pre set-up.
create-react-app comes in strong here. When you install it all the config files are hidden so you can start working on your application right away. Of course if you want to pull out all of the configuration files, then the eject command comes in. With it you can further tweak your configuration.

Installing Create-React-App

Assuming we already have node installed, run the following comamnd in our terminal:

$ npm install -g create-react-app

Creating an App

To create a new app, run the following command:

create-react-app my-app

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

No configuration or complicated folder structures, just the files you need to build your app.

Now in order to start the app, run the following command:

npm start

This runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will see the build errors and lint warnings in the console.

Integrating jQWidgets React Components

  • Create jqwidgets-react folder inside the src folder and add the needed react_jqxXXXX.js files in it:

  • Create jqwidgets folder inside the public folder and add the needed jqxXXXX.js files in it:

  • Inside index.html file add the needed jqxXXXX.js references:

    <!doctype html>
    <html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
    <!-- jQWidgets -->
    <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="./jqwidgets/globalization/globalize.js"></script>
    <div id="root"></div>
  • Finally inside App.js file write your widget code:

    import React, { Component } from 'react';
    import JqxDateTimeInput from './jqwidgets-react/react_jqxdatetimeinput'
    class App extends Component {
    render() {
    return (
    <h4>My First jQWidgets React Component</h4>
    <JqxDateTimeInput width={200} height={30} />
    export default App;

And here is the output:


So you’ve made your application with webpack, babel and everything else all figured out and installed for you. You just added the needed files, wrote some code and the application was ready to go! If you consider building a React application create-react-app is one of the best starter projects you can use.

About admin

This entry was posted in React, React Javascript Library, REACTJS and tagged , , , . Bookmark the permalink.

Leave a Reply