During phase 4 of my course, React was introduced. It seems all of the major tech companies use their own in-house front end frameworks. The most popular framework is React developed by Facebook. React is a JavaScript library for building user interfaces.
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.
- Babel — is a transpiler that converts modern JavaScript and JSX into compatible JavaScript.
- 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.
The React components can be either Functional or Class. Functional components return a JSX, a React element. All functional components name begins with a capital letter. Class components takes props and includes a render() method which holds the return JSX, a React element inside. The class name and the component also begins with a capital letter. Props is how data is passed from one component to another component, from parent to child or child to child. State is data that should be held in the parent component and is the data that is managed within its component. Props and state are both JavaScript objects that holds information that influences the render output.
