In this article I’ll show you how to create React web project kernel with a new React features: React Suspense and React Lazy. Who wants to see all code now I created a . github repository So, Let’s start. Our first step will be creating directory: mkdir react-web-project-buildercd react-web-project-builder I hope you already . We will use lates LTS version (now it’s ). I usually use (Node Version Manager). To see current version just run next command: installed node.js 10.13.0 nvm nvm ls-remote --lts=Dubnium Next, we should install and : yarn create-react-app npm i -g yarn create-react-app And now we are ready to create our react app: create-react-app . We can check our file: package.json cat package.json And even start our app: yarn start After running this command you can see url in the console: Usually it’s Let’s open it: http://localhost:3000/. Now we will create our app kernel. But before, we should check our app structure: I removed because for now we don’t need it (about testing I’ll create a new part of the article). App.test.js Let’s create and directories: app page mkdir src/app src/page And move and to directory: src/App.js src/App.css src/page mv src/App.js src/page/index.jsmv src/App.css src/page/index.css Don’t forget to update (links to and files): src/page/index.js logo css Create in directory: index.js src/app touch src/app/index.js And update file: src/index.js React 'react'; ReactDOM 'react-dom'; './index.css'; * serviceWorker './serviceWorker'; import from import from import AppKernel './app'; Page './page'; import from import from import as from App = AppKernel(Page); const ReactDOM.render(<App />, document.getElementById('root')); _// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: http://bit.ly/CRA-PWA_serviceWorker.unregister(); We just created AppKernel. And It’s not just a component — it’s HOC ( ). higher-order component Higher-order components came to us from functional programming. It’s almost the same like higher-order function: it gets a React component and returns a React component. About React and functional programming you can read in my article: _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 So, let’s create our first HOC — ( ): AppKernel src/app/index.js React 'react'; import from AppKernel = Component => () => <Component />; const AppKernel; export default Here is a function. It has only one argument: . AppKernel Component And it returns function — React component. The function does not anything else. It even does not have props. To check that it’s working we can run again our app: yarn start If you did all steps right you will not see any errors: Now we are ready to add functionality to our AppKernel. StrictMode is a tool for highlighting potential problems in an application. Like , does not render any visible UI. It activates additional checks and warnings for its descendants. Strict mode Fragment StrictMode And file after refactoring: src/app/index.js React, 'react'; import { StrictMode } from AppKernel = (Component) => { () => ( <Component /> );}; const return <StrictMode> </StrictMode> AppKernel; export default Error Boundaries In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them. emit cryptic errors You can read how to create your own , but I found a good implementation in a package. ErrorBoundary component react-error-boundaries To install it run: react-error-boundaries yarn add React, { StrictMode } 'react'; import from {ErrorBoundary,FallbackView,} 'react-error-boundaries'; import from AppKernel = (Component) => { () => (<StrictMode> <Component /> </StrictMode>);}; const return <ErrorBoundary ={FallbackView}> FallbackComponent </ErrorBoundary> AppKernel; export default And again, we can run the app and see that it works. To check that our error handler works we can make an error, for example in : src/page/index.js React, { Component } 'react'; logo '../logo.svg'; './index.css'; import from import from import App Component {render() { (<div ="App"><header ="App-header"><img ={logo} ="App-logo" ="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><a ="App-link" ="https://reactjs.org" ="_blank" ="noopener noreferrer">Learn React</a></header></div>);}} class extends Error('testing'); throw new return className className src className alt className href target rel App; export default And our error: Don’t forget to revert this change. Redux How we can skip using redux? I use it in all my react apps. I even created a nice redux library — It helps to create redux action types, action creators, reducers and even connect containers in more declarative way (it makes all this stuff for you). Redux Lazy . _Each time working with redux in react app we spend a lot of time to make action types, action creators, reducers… Most…_hackernoon.com React — redux for lazy developers In next part of the article I’ll show how to make a smart component with own logic from the our simple page component. To use redux we need to install it (and we can install react-redux — we will use it in future): yarn add redux react-redux Let’s create our redux store. We will keep it in : src/store/index.js { createStore } from 'redux'; import store = createStore(() => {}); const store; export default For now it does nothing. But in next parts of the article I’ll show how to configure it, adding logger, making code splitting with injecting a new reducers. And our : AppKernel React, { StrictMode } 'react'; {ErrorBoundary,FallbackView,} 'react-error-boundaries';** { Provider } 'react-redux'; import from import from import from store '../store';** import from AppKernel = (Component) => { () => (<StrictMode><ErrorBoundary ={FallbackView}> <Component /> </ErrorBoundary></StrictMode>);}; const return FallbackComponent <Provider ={store}> store </Provider> AppKernel; export default And again, we can run our app and see that it’s working well. React Router We can add . React router react-router yarn add react-router-dom You can read how to use it. quick start documentation Let’s add it to our : AppKernel React, { StrictMode } 'react'; {ErrorBoundary,FallbackView,} 'react-error-boundaries'; { Provider } 'react-redux'; import from import from import from { BrowserRouter Router } _from '_react-router-dom'; import as store '../store'; import from AppKernel = (Component) => { () => (<StrictMode><ErrorBoundary ={FallbackView}><Provider ={store}> <Component /> </Provider></ErrorBoundary></StrictMode>);}; const return FallbackComponent store <Router> </Router> AppKernel; export default And restart our app. It works! In next part of the article I’ll show how to create router with . history Suspense About you can read more in react docs: . React Suspense code splitting It works with . React Lazy Let’s add to our : React Suspense AppKernel React, { StrictMode, } 'react'; {ErrorBoundary,FallbackView,} 'react-error-boundaries'; { Provider } 'react-redux'; { BrowserRouter Router } 'react-router-dom'; import Suspense from import from import from import as from store '../store'; import from AppKernel = (Component) => { () => (<StrictMode><ErrorBoundary ={FallbackView}><Provider ={store}><Router> <Component /> </Router></Provider></ErrorBoundary></StrictMode>);}; const return FallbackComponent store <Suspense ={<div>Loading...</div>}> fallback </Suspense> AppKernel; export default You can create nice and put it as a property to the . Loading component fallback Suspense wrapper We are done with AppKernel. We created a great HOC. In next part of the app I’ll show how to split this big HOC into small HOCs and reuse all parts or some useful parts in own React projects. But before we finish I’m going to show how to use and . React Lazy code splitting The simple solution will be wrap our and load it when we start our app. page component Let’s update our : index.js React, 'react'; ReactDOM 'react-dom'; './index.css'; AppKernel './app'; * serviceWorker './serviceWorker'; import { lazy } from import from import import from import as from Page = lazy(() => ('./page')); const import App = AppKernel(Page); const ReactDOM.render(<App />, document.getElementById('root')); _// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: http://bit.ly/CRA-PWA_serviceWorker.unregister(); When we reload our page we can see the same results. And that is the point. It works the same. But now we split our app into small chunks. We can see them if we check Network tab in dev tools of the browser (I use Chrome): We can see and . 1.chunk.js 2.chunk.js To see we can and set : loading component disable cache slow connection And last thing. I want to check our : package.json {"name": "react-web-project-builder","version": "0.1.0","private": ,"dependencies": {"react": "^16.6.3","react-dom": "^16.6.3", "react-scripts": "2.1.1", },"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},"eslintConfig": {"extends": "react-app"},"browserslist": [">0.2%","not dead","not ie <= 11","not op_mini all"]} true "react-error-boundaries": "^1.1.4","react-redux": "^5.1.1","react-router": "^4.3.1","react-router-dom": "^4.3.1", "redux": "^4.0.1" We can see our new dependencies. That’s all for now. _In previous part we created AppKernel HOC (higher-order component) to add some useful features for your app._medium.com React Web Project Building. Part 2 — HOCs Github link: _https://medium.com/@evheniybystrov/react-web-project-building-5e9cc4ff54da - evheniy/react-web-project-builder_github.com evheniy/react-web-project-builder Redux Lazy links: redux-lazywww.npmjs.com redux-lazy _Each time working with redux in react app we spend a lot of time to make action types, action creators, reducers… Most…_hackernoon.com React — redux for lazy developers _In this article I’m continue to discuss creating react redux app using redux-lazy._hackernoon.com React — redux for lazy developers. Part 2 _It’s the last part of series about creating react redux app._hackernoon.com React — redux for lazy developers. Part 3 _In this article I’ll show how fast to develop React / Redux app using Redux Lazy._hackernoon.com React/Redux development on steroids

Facebook

Too Long; Didn't Read

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

React Web Project Building

Too Long; Didn't Read

Company Mentioned

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Web Project Building

Too Long; Didn't Read

Company Mentioned

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES