Understanding React (for dummies)
This is a very very very simple introduction to React
React is wonderful, it’s flashy, it’s cool, and it seems everybody’s using it. And while it might be tempting to use create-react-app to get a website up and running in a couple minutes I think it’s really important for any developer to truly understand what’s happening behind the scenes. One-click wonders are useful for practice, but not in the real world.
There’s 2 parts to React: React itself (all the components, the pages, the utils you write) and then there’s pre-processing. I think it's easier to describe React first and then move on to pre-processing. Also, this isn’t going be a super technical, or at least “technically correct” overview of things, I’ll try my best to be as brief and make things as less technical as possible.
Next comes preprocessing. You might be asking yourself: how exactly does this funky JS/HTML stuff I write become HTML and JS the browser understands? This is where the power of React comes in. In React, you can use functions that return fragments, or better said, return what will be rendered in the browser window. This makes it very powerful, one can be very very picky with what they want to show. What React will do is it will ✨magically✨ convert whatever you wrote into JS and HTML, separating them and allowing the browser to understand it. I won't go to in-depth but basically React creates HTML and JS files that are then served to the browser. If you use something like create-react-app all this will happen automatically, the process is already configured. If you were to instead do a barebones implementation you would need to manually setup Babel and Webpack, which what actually makes the processing possible.
Now, I wish it was as easy as it appears in this post, but it isn't. This is a very very toned downed version of an amazing tool that every developer should at least try. Going in depth requires time and patience, and a lot (and a lot more) experimenting and tinkering with the library. And FYI, I didn't even dive into this like state, Redux, API interaction and so much more.