【Component-oriented frontend】
Hi, I’m Masa and I’m learning React.
In this article, I’ll talk about “What are the concepts that a React beginner must keep in mind? This is the theme of this talk.
This talk is intended for the following people.
・People who are learning programming and are interested in front-end technologies
・Those who have never touched React, but are interested in it.
Before I get into the main topic, I’ll give a brief explanation of React.
What is React?
React is a JavaScript library for building user interfaces (UI) developed by Facebook and its community.
React is not a framework, but a library. (Vue.js and Angular.js are frameworks, jQuery is a library.) It is unique in that it can be started small. (Only chatbots on existing sites can be developed with React, for example)
React uses a virtual DOM to draw only the differences between the DOM and the actual DOM when manipulating the DOM (Document Object Model) to operate web pages, which prevents high rendering costs even in large-scale development.
In addition, React.js for web development and React Native for native application development are available, and one of the appealing features of React.js is that both web applications and native smartphone applications can be developed using almost the same writing style.
Because of its high performance and development efficiency, many famous IT companies are developing with React.
- Airbnb
- Netflix
and others are using React for development.
What are the must-know concepts for React beginners?
So, let’s get down to business. What are the “must-have concepts for React beginners”?
It is “Component-oriented thinking”.
Component orientation is a way of thinking that divides software development into smaller parts.
It is a very important concept in React development, but I thought it was not focused on enough, so I will explain it here.
React is a component-oriented library
First of all, React is a library built on the premise of being component-oriented.
In React, a component is defined as a combination of the appearance of markup and logic functions without separating them. (In reality, from the perspective of maintainability and testing, components are often developed with the appearance and logic functions separated.)
On the official React website, the following explanation is given as a feature in the middle of the top page.
Component-Based
Build encapsulated components that manage their state, then compose them to make complex UIs.
What is an “encapsulated component” in this context?
Encapsulation can be explained as follows.
In object-oriented programming, encapsulation is the process of combining a set of interrelated data and operations into a single unit as an object and providing only the necessary information and procedures to the outside world. Internal states and structures that do not need to be directly referenced or manipulated from the outside are kept secret.”
In short, it means to be able to complete a process without looking at the contents of the component by simply passing the variables and values necessary for the process to the component.
This is a rather rough analogy, but imagine that when you wash your clothes, you just put them in the washing machine and press the button to clean them, without being aware of the structure or principle of the machine.
All you need to give to the washing machine is the clothes and the action of pressing the button.
React’s component orientation as described above is similar to the “divide-and-conquer method”, one of the software design concepts, and the “single responsibility principle” as exemplified in React’s official documentation.
divide-and-conquer method
The divide-and-conquer method is a method of solving large problems by dividing them into smaller ones. In software development, instead of creating a large piece of software all at once, it is a method of dividing it up as much as possible, limiting the scope of influence, and completing it one by one.
This way of thinking can be applied not only to React but to software development in general and problem-solving in particular.
One of the divide-and-conquer methods is to divide a large task such as “developing an application” into smaller tasks such as deciding the value to be provided to users, deciding requirements, and selecting technologies.
In software development, it is a method of dividing and developing the software into parts that can be designed independently, based on their responsibilities and duties.
single responsibility principle
The idea is to encapsulate modules and classes so that their roles are in a single, loosely coupled state. The idea is that they don’t influence each other.
In React, there is a belief that a component should ideally do only one thing.
It is recommended to avoid component bloat and to divide components into smaller components.
The pros and cons of component orientation
Based on the above ideas, I will explain in detail the pros and cons of component-oriented development.
Pros: Limited scope of influence, easy to maintain and operate
Encapsulation makes maintenance and operation easier because it limits the scope of influence of components.
For example, when changing the visual style written in HTML and CSS, CSS class names affect globally, so if there is a duplication of class names, it will cause the layout to collapse and fail. Therefore, it is necessary to establish naming conventions such as BEM and FLOCSS to prevent class name collisions.
On the other hand, if you use CSS encapsulated in a component using CSS in JS or CSS Modules, class name collisions will not occur even if the same class name is used in other components (strictly speaking, the class name is automatically converted to random naming to avoid collisions). )
The improved readability also makes it easier to maintain and operate.
For example, when there is an error in a program, which is easier, reading 500 lines of code or reading 50 lines of code?
If the code is component-oriented and divided into small components, the amount of detail that needs to be looked at is limited, and the time spent reading the code can be reduced.
Pros: Easy to reuse parts, easy to expand
Separating the components increases the reusability of the parts and makes it easier to expand them.
For example, you can use the same function as a search window but change the style, or use the same function as a button but change only the text inside.
In addition, React component libraries such as Material UI are also available, allowing for efficient development.
Cons: The level of granularity at which components are divided and how they are divided varies from person to person
Now that I’ve talked about the advantages of React’s component orientation, I’d like to talk about the disadvantages.
The disadvantage of component orientation is that the granularity of components and how to divide them varies from developer to developer. Therefore, it is necessary to spend a little time to match the two.
For example, if you have a search window with a magnifying glass icon, do you want to make it the smallest component of the whole, or do you want the search window and the magnifying glass icon to be separate components? Since design is directly related to development, the granularity needs to be coordinated not only among engineers but also among designers.
One way to deal with this is to adopt the concept of Atomic Design and optimize the concept of component partitioning within the project, but since Atomic Design is not the best solution for everything, it is better to customize it according to the service and scale.
Thank you for reading this far!
What did you think?
Facebook and Instagram, which are used all over the world, were also developed with component thinking, and are expanding their services while maintaining both scalability and maintainability.
In this article, I introduced the concept of component orientation as a “must-know concept for React beginners”.
