React is by a long shot the most popular front-end library on the market. It's modularity and component based architecture made it a front-end developer's favorite. By introducing the concept of the virtual DOM as a way of manipulating the DOM react created an abstraction concept that has been copied by a lot of main stream front end Libraries and framework. In this Serie we will discuss a few Design patterns in React and How they can be implemented either in your side projects or customer ready apps the result will be the same you will start writing better React code. The first Design pattern we will discuss is the **Layout Design Pattern**. The main idea behind building components using the Layout component pattern is that > Components should not know where they are being displayed and Layout components should only be concerned with displaying the component. Let's use this pattern in an example to get a better grasp of what it server to do. Let's say we are trying to build a split screen component to use in our project. This is a SplitScreen component that displays two panels side by side. ``` import React from 'react'; import styled from 'styled-components'; const Container= styled.div` display:flex; ` const Panel= styled.div` flex:${props=>props.width}; `; export default const SplitScreen=({Left,Right,leftWidth=1,rightWidth=1}) { return ( ) } ``` Now in our App component we can call ``` import React from 'react' import styled from 'styled-component' const LeftComponent=()=>(

Left

) const RightComponent=()=>(

Right

) function App (){ return ( ) } export default App; ``` Let's say we need to pass a **title props** to both the Left and the right components. With our current implementation we would need to make a few changes. ``` import React from 'react' import styled from 'styled-component' const LeftComponent=({title})=>

{title}

const RightComponent=({title})=>

{title}

{title}

) const RightComponent=({title='Right'})=>(

{title}

) function App (){ return ( ) } export default App; ``` And in the SplitScreen.js file: ``` import React from 'react'; import styled from 'styled-components'; const Container= styled.div` display:flex; ` const Panel= styled.div` flex:${props=>props.width}; `; export default const SplitScreen=({leftWidth=1,rightWidth=1,children}) { const [left,right]= children return ( {left} {right} ) } ``` By using this implementation we can now pass props to the Right and Left components directly without the need of passing through the SplitScreen component that only concern is to render component without actually knowing ahead of time what component it should render but only caring about the specific layout in which it should render those items. This also leads our code to be much more readable. Thank you for reading. Let's connect [Twitter](https://twitter.com/mocktarissa). [LinkedIn](https://twitter.com/mocktarissa). [Github](https://github.com/mocktarissa).

mocktarissa

Anyways, What are Layout components in React?

Join Our Newsletter. No Spam, Only the good stuff.