I'm an old web developer, i'm used to html, css, js (jquery) and using a server side language like Java, Cold fusion or PHP.
Now for the life of me i can't find a good explanation or a how to get started. It just doesn't make sense and i've spent the last 3 days watching tutorials and reading books. This isn't to complain, but to ask a favor. Someone please explain to me how this architecture is setup. In the past, you would have an html file and inject some placeholders which would be filled in by your server side language.
What's the structure now? I have create a Ubuntu server, i have installed NodeJS and it's associations, i created a reverse proxy and installed nginx as my server. PM2 is my process manager for NodeJS apps. Am i on the right track so far?
If so, where does reactjs, reduxjs, babeljs, what is webpack for npm? What is my next step, i'm so confused that i don't know what all of these things are. In particular what is the difference between reactjs, redsuxjs and bablejs and any others, are these all just front end libraries or? What's the npm webpack. Then there's redux and react-redux, what? Thanks for the clarification.
My goal
I want to learn how to make a single page application and takes advantage with as much of bootstrap as possible. I thought react would be the way to go but i'd really appreciate some clarifications and not just a copy-paste from their website descriptions. Thank you guys/gals.
First of all, there isn't a short answer to your question. Each of the subjects can be delved into for days, weeks, or months to understand and master. I will try to use metaphors for all related topics in your question.
Q: What is Babel and why do I need it?
JavaScript has evolved over the past few years. A lot!. JavaScript today has so many new words and sentence structures that old browsers simply can't understand without a translator. Babel is that translator. Modern browsers today (Chrome, Firefox, Edge, Safari) can natively understand most of that modern version of JavaScript, or as cool kids call it ECMAScript2015, or ES2015, or ES6, etc.
Even so, ES(JavaScript) is constantly evolving. New features are being added in stages and babel is keeping up with these stage features, literally translating all these new features into plain old JavaScript that all browsers, regardless of age, can understand. You can play with babel and see what it does here: https://babeljs.io/repl/
Q: What is React?
React is just one of many modern front-end frameworks to help you display your data in an efficient way.
If IKEA produced LEGO for developers, it would be called React. React let's you create LEGO blocks (called components) and put them together to create an app. React components can be purely presentational(or 'dumb'), meaning they will simply return some HTML, or they can be 'smart'. Smart components can have something called a state.
If we go back to the LEGO analogy, the state would be the engine in a LEGO Technics set. If a component was a plain old LEGO car, it would need some outside help to get it moving forward. You push the car with your hand and it moves forward. With a smart component, or a LEGO technics engine, your LEGO Technics car can change its state from resting to moving on its own when the engine starts, intrinsically pushing the car forward from within. So whenever the state changes, your car REACTS and changes. The same goes for a component. React will watch for changes in the state of your component and whenever there's a change (usually triggered by a user event) the component will update. React components can be written in plain old javascript, but ES6 is encouraged, and makes your life as a React developer a lot easier. Thus, you will need a translator, like Babel, to make your React app understandable in the browser.
Q: Redux?
Ok, I will simply stop you here and tell you that at this point you don't need Redux to create a React app. Redux is a library that can be used in combination with any framework or on its own with vanilla JavaScript. What Redux does is give you the ability to abstract your application model or data away in something Redux calls a store. A store can be anything, an array, an object, literally anything. Redux's job is to update that store anytime it receives and action.
Let's imagine Redux is a living person called John. John is given an empty cup (the store). Each time John is told 'pour water', John will grab the cup and pour some water in it. The 'pour water' command is our action. John can listen for other actions, for instance 'empty cup'. Each action goes through a processing unit - John's brain (the reducer of the actions). If John was brainless, he wouldn't be able to execute any of the actions. When John receives a 'empty cup' command he throws the water away. You can teach John however many actions you want, and you can give John a different store to execute those actions on. The important takeaway here is that John has a store(the cup), a reducer(the brain) and is given some actions to execute. So the action, goes through the reducer and based on what the reducer decides, it updates the store. So in JavaScript terms the reducer is a function, which takes an action and returns a store. The action is a plain javascript object, which has a type property ('pour'), and it can also have some payload ('water'). So basically you can tell John, 'pour water' in the cup, where pour is the action type and the payload is water.
Q: React-Redux?
Think of react-redux as a scotch-tape that lets you fuse react and redux together, so that each component can send an action to the reducer, and each component can have access to the store.
Q: Webpack?
So with the above example we already have several libraries. Babel, React, Redux, React-Redux, and who knows how many other libraries, assets, files and what not you will need in your project. Probably what you are used to is importing each of them in your index.html using the script, image, link tags. Well, overly simplified, webpack does that for you! Whenever some module in your app depends on another module, asset, or anything else, webpack will recursively look for all dependencies and put them together in one file. You simply import that one file in your index.html and you forget about it. Webpack can do many other things for you, but that's the gist of it, hence why it's called module bundler.
Whew, that's about it. You are a real hero if you got this far, and I admire your patience.
P.S.
A really great (and funny) article to help you get up to date with all these libraries and frameworks is this one: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f