Create React App with jQWidgets

This tutorial will show you how to use Create React App along with the React Components by jQWidgets.
Please, follow the instructions below:

First we need to install the Create React App globally, so we can have it's commands available:

npm install -g create-react-app

Create a Create React App application:

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 files or complicated folder structure, just the files you need to build your app.

Now in order to start the app, navigate to my-app folder and 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

• In the src folder add an assets folder with the jqwidgets and the jqwidgets-react folders inside of it:

  

• Finally inside App.js file write your widget code:

And here is the output:

Conclusion

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.