Photo by Jacob Dyer on Unsplash
So, React has been there for around six years now and - through this time - it became one of the most popular libraries on NPM and one of the most popular projects on Github. But what is that React all about?
React is a library for building user interfaces. By what does this mean? In short, words, React provides a rich toolkit for creating high-performant, effective and modern web applications and especially specializes itself in the UI flow. React does not create the entire UI, per se. Instead, React is all about constructing it.
So, as I've said before, React is all about creating user interfaces and handling them. For that - React provides a rich set of methods and functions to manipulate them. React chosen the component approach and there's a reason for that - having the possibility to isolate our application into smaller pieces makes that code a lot easier to test, maintain and potentially - reusing them later then. React also provides us the ways of manipulating those components and it's data. One of the most amazing things about React is that we don't actually have to touch the DOM - React manages it on its own. That said - we don't have to worry on handling updates, rerendering process and generally how the things work under the hood. While this approach is obviously opinionated, sometimes having that makes our code generally better, because we don't have to think about these things on our own and instead just use tools that are already great. Not only it increases our productivity, but also means our code will be just better.
As I've said before - React uses components. And, typically, we don't use the static code. Usually, there is some button, maybe an additional input and some conditionally rendered content used later than to toggle the list of some dynamic data. In the typical to-do list app, there's some input. As we type the text, this input should handle that and later than - add an item with that text to the todos array. In normal HTML, we would have to manually get to the input HTML element, set up the onchange event listener and then call the function for updating the typed variable with the current input value. We can obviously do so and that's exactly how React works under the hood, but... why? React already provides the opinionated solutions for that that works quite well and there is no need to really do this on our own. For that to-do app case, we can use the two core concepts of React - props, and state. Props are just properties we can pass to React components and they behave in the exact same way as the standard HTML attributes (for example value or oninput attributes). Props can be anything - callbacks or values. They can also provide the state, which we'll talk about in a moment. The state is all about state management. For example, the state could be a value which we type into the input field or the todos we already have in the app. If something needs to be propagated through multiple components, those propagated things are props, and if something needs to be only in one component and should be isolated and potentially ready for updates - this will be the state. In fact, those things can work together, because we can create todo list state as a state, but propagate it to other components via props, so that they can access it. But React is not only about that. There are also other lifecycle methods, event handling features and a lot more, so that every app can be really created with React.
Thanks you for reading this one. If you find something unclear or want to make some comment, feel free to do so. Anyways, hope you'll like this article and see you in the next one!