Set up React environment

To start the new app in react, you don’t need to worry about all settings and configurations. I will use Create React App environment, which is pretty simple and well documented. All documentation about this toolchain you can find here.

Create react project

npx create-react-app sync_inputs

After that you need to navigate to folder sync_inputs and start the app

cd sync_inputs

npm start

Note: You might have some problems with running this local server. If you have an error message like Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0 , then this article might be helpful for you. When I tried to run my server, I had an error TypeError: fsevents is not a constructor. I found a lot of advices how to deal with it here, but personally for me helped to remove all node packages and run again npm install . After that I run npm start and everything worked. Also, using npm is not necessary. You can use yarn if you like it more.

If everything is installed and your local server is running, you need to navigate http://localhost:3000 and you should see react logo on dark background. Something like that:

Now stop the local server by press ctrl + c in your terminal and install couple more dependencies.

Install Material UI core library and their icon library for making nice UI

npm install @material-ui/core

npm install @material-ui/icons

Now your package.json file should looks like this:

{

"name": "sync_inputs",

"version": "0.1.0",

"private": true,

"dependencies": {

"@material-ui/core": "^4.5.0",

"@material-ui/icons": "^4.4.3",

"react": "^16.10.2",

"react-dom": "^16.10.2",

"react-scripts": "3.2.0"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

"eslintConfig": {

"extends": "react-app"

},

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

],

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

}

}

So, now we have our working environment with all libraries, which we need. Now it is time for start building our app.