4 key features in React
React breaks away from conventional thinking with the introduction of components. A component is simply a small piece of functionality, think of a menu, a button or a search field. Writing code the React way encourages us to produce code of a more modular nature. By breaking a solution down into individual units, developers adhere to good coding practices in the form of code reuse, Don’t Repeat Yourself (D.R.Y), right? Walmart Labs is an amazing ambassador for component reuse with a library spanning thousands of components across their brands including Asda and Sam’s Club.
After the introduction of ES6 the ability to now export and import code takes React to another level. Developers that make use of this functionality can say goodbye to the days of files spanning hundreds or even thousands of lines of code and instead store a component in its own file. How we choose to use or better yet, compose components is up to us but we must admit that it’s a great addition to the philosophy of thought surrounding front-end development.
The concept of state took me a while to grasp but it’s really quite simple. State is just data. React puts an emphasis on one-way data flow, therefore, it is important where we store our data. React emphasises the idea of smart and dumb components in setting out best practices in managing state. Dumb components are solely responsible for rendering information visually. Smart components on the other hand handle data and any operations that are performed on it. Understanding this will help us structure our applications by assigning state to the correct components, namely smart components.
The mutable state data held by our smart components must be communicated to the dumb components to render it. The use of properties also known as props grants us the power to inform dumb components with some state data. Once this data flows down from smart components to dumb components the data becomes immutable, in that it cannot be changed. Remember, dumb components are only responsible for rendering information therefore there cannot be any operations performed on data there.
What the Virtual DOM does is store a duplicate of the DOM in our browser’s cache. When an update is received, the previously held instance is compared with the new instance and then any changes are reconciled within the actual DOM. Updates are thereby localised and remove the need to update the whole page.
Construct the UI with components
Identifying how the user interface can be represented as components can be time-consuming, however, it’s also important understanding that code is read more often that it is written. Keeping this in mind will really work to help your future self as well as those who work with your code.
Define state then give it a home
Understanding which data is mutable and cannot be derived from other data sources goes some way in assisting us in deducing what constitutes a state. Getting this right makes for a lean code base.
Set up your data flow
After we organise the arrangement of components and definition of state we can properly embrace one-way/unidirectional data flow. Effectively relating how data is passed between components makes for clean code and helps us avoid the risk of the dreaded ‘spaghetti-code’.
Coming to terms with the concepts underlying the aforementioned features was a challenge that didn’t make for the smoothest learning curve but now that I’ve grasped these concepts I can really see the value in the library. Thinking in React is a real thing and brings with it exciting prospects as the library continues to expand. I am looking forward to learning more about the library and what it has to offer, stay tuned and peace!