Recently I decided to revisit a previous project I had previously done. I realized that this was the perfect opportunity to rework this website with React as part of the development stack. Needless to say, it has been eye-opening and headache inducing at the same time. React is the current darling of the frontend community and has become the go to for web app development. I don't know if I should call it a framework or a library, but its purpose is to assist developers with creating really responsive UIs.
The first thing that stood out to me was the use of components in React. If you want to visualize creating components, then it's similar to creating Lego blocks. You create a component, Lego block, its functions and what it renders. Once created, the component can be inserted easily into the main app or other components. I can also be easily duplicated. This definitely gives you more options. I am not too sure that using React is faster than using traditional web development, but that could just me being new to the game.
There's a big emphasis on the use of the states and to be honest it's a bit tricky getting this to work from to time. "State" is simple enough. It's just the current rendering of a component. Changes to the state are reflected on the screen. How those changes are generated can be tricky as some things can occur asynchronous and thus be completed way after the component has been rendered. Of course, React has solutions for this in the form of callback functions which trigger after the component has been rendered. This can lead to one of the biggest pains in React if done incorrectly. An infinite loop can occur when the component is actively monitoring a variable for changes and automatically updates the state, BUT when the state changes, that same variable changes. This will automatically trigger a new state update and hence an infinite loop. Working with hooks can give you a headache.
Then there are the small rules and restrictions will often have you dancing troops. Some of these aren't going but affect what is rendered, but I hate to see warning messages in VS Code.