Now you need to learn few words:
- npm - node package manager - it downloads dependencies (like ivy, maven, gradle)
- react - library with the components
- redux - you store state of the app in it
- webpack - it takes your dependencies and turns them into common js for your browser
At the beginning you need some hello world fully functional mind blowing example otherwise you will feel that you got stuck. Because the whole react ecosystem is like a puzzle it is hard without a hand..
Before that you have to install git, node and npm. Please use Google, I am not going to describe this. Only small hint for Mac users, use brew, it is useful.
There is a good option to start with react. It is Redux Minimal. It is a github repo, it is a template for you to start - https://redux-minimal.js.org/ . Take a look at the amount of packages lister in the readme file there, it does not seem to be minimal but it is actually perfect because you do not have to add the packages manually and now you have it out of the box.
If you use iTerm please turn on "Unlimited scrollback".
The readme page has a "Getting Started" section so read it and do it It is only few commands. It is very easy. Clone, install and start... Then read the output of the start command. There is an information where does the app runs locally (it is on localhost of course), so open the app. The app is a simple "User Manager".
Now take a look into the folder where you run the commands. What is there?
- node_modules - all the modules are downloaded into this folder
- package.json - the dependencies are described here in section dependencies and devDependencies. There are also presets for babel (a version of ECMA is specified; react preset for JSX extension; stage-3 actually adds few other features into the language also). The important is also the "scripts" section, here you can see what does npm do when you write "npm start" or "npm test" etc.
- webpack configs - these files are loaded by webpack so it knows what to do with the packages....
- test - contains all your tests for components, reducers, sagas
- scr_users - source code for the demo application ("User Manager")
- src - a folder that has been prepared for your application, if you want to start with one
- public - a folder where you put images and static code
So take a look at public/index.html - you will see that it loads bootstrap library (html, css, js things) and there is a html div with id app. Now open src_users/index.js and now you should understand what is the entrypoint of the application. Now you have a very simple app running and you can start to play with it. Use reverse engineering and Google and youtube to find tutorials from now on and you will be able to create your own app.
Maybe I will post another post about React itself, redux and its reducers, middleware and other stuff.