Thinking In React Part -1

Hello Fellow Developers we have came a long way till now in react but we never discussed a serious topic like thinking in react, how to approach a coding in react. I have seen lots of developers getting used to javascript or jquery  so much that they still use these in react. Lets change that mindset and dive deep into thinking in react.

Step 1: Break The UI Into A Small Components Hierarchy

The first thing you want to do is to draw boxes around every component in the mock and give them names. If you’re working with a designer, they may have already done, so go talk to them. Their Photoshop layer name may end up being the name of your React components!

But how do you know what should be in its own component? Use the same techniques for deciding if you should create  new function or object. One such technique is single resposibilty principle, that is a component should ideally only do one thing. If it end up growing, it should be decomposed into smaller subcomponent.

Since you are often displaying a JSON data model to a user, you will  find that your model was built correctly, your UI will is map nicely. That is because UI and data model tend to adhere to the same information and  architectures. Separate your UI into components, where each component match one of the  pieces of your data model.

You will  see here that we have five components in our app. We have  italicized data of each component represents. The number in the image correspond to the numbers below.

1. FilterableProductTable: contains the entirety of the example
2. SearchBar: receive all user input
3. ProductTable : display and filter the data collection based on user input
4. ProductCategoryRow: display a heading for each category
5. ProductRow: display a row for each product

If you look at the ProductTable, you’ll see that the table header isn’t its own component. This is  matter of preference, and there is an argument to be made either way. For this example, we left it  part of ProductTable because it is part of rendering  data collection which is ProductTable’s responsibility. However, if this header grow to be complex it would certainly make sense to make this its own ProductTableHeader components.

Now that we have identified the component in our mock, let’s arrange them into hierarchy. Component that appear within another component in  mock should appear as a child in  hierarchy:

• FilterableProductTables
  • SearchBars
  • ProductTables
    • ProductCategoryRows
    • ProductRows