React is a great library for building interactive interfaces. It has a fairly easy learning curve, but often beginners overlook certain important concepts. In this article, I want to discuss which are the most important concepts in React library.
You can use this feature to define a React conditional className or apply inline styles conditionally. This is a powerful feature to dynamically change the appearance of your component. Look at websites like SimpleFrontEnd, which contains many React guides.
For example, you can take user’s input, like value of a checkbox element on your website. You can control value of the input from the state, and customize the appearance of your application depending on this state. For example, ticking a checkbox could turn on a dark mode. You simply set the conditional styling to make backgrounds dark and text light colors. And removing selection of the checkbox could remove dark mode.
Possibilities for customization of elements are endless.
You can’t say that you understand React unless you have a thorough knowledge of virtual DOM and how rendering works in React.
This means understanding all the lifecycle methods, as well as default rendering in React.
Virtual DOM is an important feature of React that makes it possible to have blazing fast web applications.
Understanding the concept of controlled components is essential, even for beginner developers. In short, these are components that get their value from the state. It is a typical 2-way binding, where typing into a controlled input elements updates the state value, which then updates value in the input.
If you’re coming from Vue background, you need to pay attention to this. In Vue, handling the value of input elements is very different than it is in React.
Mutating the state
The state object is treated differently from other objects in React. You can not directly mutate it. You need to use the setState() method to update state in React. This is done to ensure the consistency of state values across entire component tree.
In functional components, you have hooks, which provide an easier syntax for updating the state. In functional components, you define state variables and the functions to update them at the same time. To change the state, all you need to do is call the corresponding updater function.
Selecting DOM elements
In general, React does not recommend working with elements directly. In case you’re certain that it is necessary, you can create a ref to store reference to React element.