In previous part we created (higher-order component) to add some useful features for your app. AppKernel HOC In this part we will continue work with HOCs and functional programming. We will split our big HOC into some small parts which you can reuse to build your own app HOC with only useful parts. _In this article I’ll show you how to create React web project kernel with a new React features: React Suspense and…_hackernoon.com React Web Project Building But before we start, we need to remember some functional programming basics. (higher-order component) is a kind of . It’s a function which has component as an argument and it returns a new component. HOC higher-order function In this part we will use functional composition and some kind of curry. Let’s remember our from the pervious part: AppKernel React, { StrictMode, Suspense } 'react'; {ErrorBoundary,FallbackView,} 'react-error-boundaries'; { Provider } 'react-redux'; { BrowserRouter Router } 'react-router-dom'; import from import from import from import as from store '../store'; import from AppKernel = (Component) => { () => ( );}; const return <StrictMode><ErrorBoundary ={FallbackView}><Provider ={store}><Router><Suspense ={<div>Loading...</div>}><Component /></Suspense></Router></Provider></ErrorBoundary></StrictMode> FallbackComponent store fallback AppKernel; export default And just imagine our goal: { compose } './helpers'; import from strictMode './hocs/strictMode'; errorBoundary './hocs/errorBoundary'; redux './hocs/redux'; router './hocs/router'; suspense './hocs/suspense'; import from import from import from import from import from AppKernel = ; const compose(strictMode,errorBoundary,redux,router,suspense,) AppKernel; export default It looks more declarative — less code with the same functionality. And other benefit — you can compose any part in the HOC and reuse it in any other React app. Who wants to see all code now, I created a . github repository So, let’s start form the beginning. First of all, we need to create compose function. For this I created a helper inside of our directory. I didn’t created own compose function because we use redux, it has own compose function and it works perfect for us. src/app { compose } 'redux'; import from The main idea is making small HOCs for each layer. For this I created a : wrapper wrapper = (WrapperComponent, wrapperProps = {}, Component) => () => (<WrapperComponent {...wrapperProps}><Component /></WrapperComponent>); const It gets like or and wraps the . We can add any property if we need it, for example if we need to pass in : WrapperComponent StrictMode Suspense Component store Redux Provider <Provider ={store}> store But to use it in composition we need to curry this function: hocCreator = (WrapperComponent, wrapperProps, Component) => { (!WrapperComponent) { Error('WrapperComponent should be set!');} const if throw new Component? wrapper(WrapperComponent, wrapperProps, Component): Cmp => { (!Cmp) { Error('Component should be set!');} return if throw new _return_ wrapper(WrapperComponent, wrapperProps, Cmp);  
  } }; It’s uses wrapper function with some checking: if we didn’t put the it returns another function. Component And all code of our helper: React 'react'; { compose } 'redux'; import from import from wrapper = (WrapperComponent, wrapperProps = {}, Component) => () => (<WrapperComponent {...wrapperProps}><Component /></WrapperComponent>); const hocCreator = (WrapperComponent, wrapperProps, Component) => { (!WrapperComponent) { Error('WrapperComponent should be set!');} const if throw new Component? wrapper(WrapperComponent, wrapperProps, Component): Cmp => { (!Cmp) { Error('Component should be set!');} return if throw new _return_ wrapper(WrapperComponent, wrapperProps, Cmp);  
  } }; {hocCreator,compose,}; export Now we are ready to create a HOC for each layer. StrictMode : src/app/hocs/strictMode.js { StrictMode } 'react'; import from { hocCreator } '../helpers'; import from hocCreator(StrictMode); export default It’s too easy. We create a HOC from the component using our helper function. React StrictMode hocCreator If we imagine how it works we get something like this: () => (<StrictMode><Component /></StrictMode>) ErrorBoundary : src/app/hocs/errorBoundary.js { ErrorBoundary, FallbackView } 'react-error-boundaries'; import from { hocCreator } '../helpers'; import from hocCreator(ErrorBoundary, { FallbackComponent: FallbackView }); export default Here we can see how I use properties for component. ErrorBoundary It works like this: () => (<ErrorBoundary FallbackComponent={FallbackView}><Component /></ErrorBoundary>) Redux : src/app/hocs/redux.js { Provider } 'react-redux'; import from { hocCreator } '../helpers'; store '../../store'; import from import from hocCreator(Provider, { store }); export default Router : src/app/hocs/router.js { BrowserRouter } 'react-router-dom'; import from { hocCreator } '../helpers'; import from hocCreator(BrowserRouter); export default Suspense : src/app/hocs/suspense.js React, { Suspense } 'react'; import from { hocCreator } '../helpers'; import from hocCreator(Suspense, { fallback: <div>Loading...</div> }); export default And small bonus. I updated our page component to use only pure components. Pure components use the same idea like pure functions — no side effects. It’s function with props arguments and it returns JSX: props => JSX src/page/index.js: React 'react'; logo '../logo.svg'; './index.css'; import from import from import PageComponent = () => (<div ="App"><header ="App-header"><img ={logo} ="App-logo" ="logo" /><p>Edit <code>src/page/index.js</code> and save to reload.</p><a ="App-link" ="https://reactjs.org" ="_blank" ="noopener noreferrer">Learn React</a></header></div>); const className className src className alt className href target rel PageComponent; export default That’s all. Now you can easily create any HOC using helper and create your own with any useful features for your app. hocCreator AppKernel _https://hackernoon.com/react-web-project-building-5e9cc4ff54da - evheniy/react-web-project-builder_github.com evheniy/react-web-project-builder _As you may know working with react you can use functions or classes — work with stateless and stateful components. In…_blog.cloudboost.io React: functional way

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React Web Project Building. Part 2 — HOCs

Too Long; Didn't Read

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Web Project Building. Part 2 — HOCs

Too Long; Didn't Read

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES