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"> <head> <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> </head> <body> <div id="root"></div> </body> </html>
-
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 ( <div> <h4>My First jQWidgets React Component</h4> <JqxDateTimeInput width={200} height={30} /> </div> ); } } export default App;
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.