React for hard core Java Developers
The world has changed. New equilibrium has formed. If you apply for a job called "Java Developer" you are expected to have some knowledge of JavaScript. Everybody talks about cross functional teams, everybody is full stack developer, so Java Developers write JavaScript apps and you should too.. to be precise you should write apps in ECMAScript version ES6 or version ES2015 which are essentially the very same version. Once again: ECMAScript is standard for JavaScript, ES6 is a former name of its version, ES2015 is the current name for ES6 version.ECMAScript is actually pretty cool language... but but but.. browsers do not support it, they support only few of the new features. So you have to pass your code into source-to-source transpiler like Babel https://babeljs.io . The result of the process is pure old JavaScript. It does not matter if you do not like code-generation tools, because a transpiler basically is a code-generation tool, you are forced to use it because you want to use all the new features of the language and you need them to write better code.
Now you need to learn few words:
- node - JavaScript runtime, lets say a JVM for JavaScript
- 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
- jsx - a syntax extension for JavaScript. It looks like html and it is used in that way
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.
Redux-Minimal
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.
