Become one mind with React
--
It’s important to structure our application in order to keep in mind which part you are working on and what you could do about it. It’s more crucial as long as your codes become bigger and complex. Not having a good structure tends to break/modify old codes and when the time comes you will spend a lot of time just only to restructure your application or codes. It’s painful when at that time because perhaps besides that you need to implement new features and a bad structure will hold you for doing so. So we better design and structure our application first before jump to code.
In my team, I’m involved in the front-end team as a mobile and web engineer. We used React for web and React Native for mobile, so basically both applications are using a React-based framework. Since React is a framework, they already have own architecture and definitely we must follow their rules while developing our application with React. In this article, I’m going to break React architecture to you and how we collaborate with it, enjoy!
Thinking in React
I only provide three parts of React architecture. In reality, there are more you could explore in React such as in programming style aspect or in compilator, but I think I only share with you what the most important things for React developer need to know in order to get a sense about React paradigm.
Composition
It’s the same thing as you do when developing your web in a natural way, means when you build your Element in HTML or in JavaScript we knew it as DOM (Document Object Model). So you compose your all components into a particular tree and let the browser render each component as a tree node, which means the browser will traverse and render your tree node from parent to all node through each node children.
In React it does same thing, you create your component from the top to bottom (top-bottom approach) and let React render all components through the tree and only modify what they need only. Here how complex our web components be composed in React.
