React uses JSX, so the code looks very similar to HTML and are organized into components. Other than JSX and components, React has a few features that most developers are extremely fond off:
- virtual DOM — this enables the content rendering to be fast and efficient. It is ideal for apps that are highly interactive.
- declarative writing structure — developers can easily design their app while React handles all the updates and the underlying data changes.
- Webpack — is a bundler that packages everything in a single transferable bundle.
- Built in ESLint functionality.
React contains a lot of tools and functionality that allows developers to easily create projects. The understanding of the DOM is extremely crucial when using React. Mapping out the elements is extremely important, as it should act as a guide to where each block of code should be placed. I found out the reason why the hard way, during the code challenge.
During the code challenge, the first thing I did after reading the readme documentation a few times, I drew out the perfect correct diagram related to the problem at hand. Once I started to tackle coding, I had long forgotten all about this perfect diagram. I didn’t even refer back to the diagram when I was trying to get the code to work. Eventually, I started to get confused as to where the components should be, and how to make use of the inbuilt features.
Gradually, the code got very messy. I had bits of code everywhere in the wrong files. If the code was in the right files, the code could have simply worked, and the page would have rendered and be similar to the target outcome. I can’t stress the utmost importance of DOM. React is pretty easy to use, but you need to follow your DOM diagram. Once you constantly refer back to your diagram, everything should fall into place, where state should be, where set state should be, where props should be, where componentDidMount should be, etc.