insights-frontend-starter-app

React.js starter app for Red Hat Insights products that includes Patternfly 3 and Patternfly Next.

Build app

1. npm install

2. npm run start

   • starts webpack bundler and serves the files with webpack dev server

Testing

• Travis is used to test the build for this code.
  • npm test will run the test

Documentation links

• Utils
  • Redux

Patternfly

• This project imports Patternfly components:
  • Patternfly React
  • Patternfly Next
    • Because PF-Next is not react based, there is an example on how to use classnames in the Button component and how to apply classes dynamically.

Insights Components

Insights Platform will deliver components and static assets through npm (TBD). ESI tags are used to import the chroming which takes care of the header, sidebar, and footer.

Technologies

Webpack

Webpack.config.js

This file exports an object with the configuration for webpack and webpack dev server.

{
    mode: https://webpack.js.org/concepts/mode/,
    devtool: https://webpack.js.org/configuration/devtool/,
    
    // different bundle options.
    // allows you to completely separate vendor code from app code and much more. 
    // https://webpack.js.org/plugins/split-chunks-plugin/
    optimization: {
        chunks: https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks-chunks-all,
        runtimeChunk: https://webpack.js.org/plugins/split-chunks-plugin/#optimization-runtimechunk,
        
        // https://webpack.js.org/plugins/split-chunks-plugin/#configuring-cache-groups
        cacheGroups: {
            
            // bundles all vendor code needed to run the entry file
            common_initial: {
                test: // file regex: /[\\/]node_modules[\\/]/,
                name: // filename: 'common.initial',
                chunks: // chunk type initial, async, all
            }
        }
    },
    
    // each property of entry maps to the name of an entry file 
    // https://webpack.js.org/concepts/entry-points/
    entry: {
        
        // example bunde names
        bundle1: 'src/entry1.js',
        bundle2: 'src/entry2.js'
    },
    
    // bundle output options.
    output: {
            filename: https://webpack.js.org/configuration/output/#output-filename,
            path: https://webpack.js.org/configuration/output/#output-path,
            publicPath: https://webpack.js.org/configuration/output/#output-publicpath,
            chunkFilename: https://webpack.js.org/configuration/output/#output-chunkfilename
    },
     module: {
         rules: https://webpack.js.org/configuration/module/#module-rules
     },
     
     // An array of webpack plugins look at webpack.plugins.js
     // https://webpack.js.org/plugins/
     plugins: [],
     
     // webpack dev serve options
     // https://github.com/webpack/webpack-dev-server
     devServer: {}
}

React

• High-Order Component

  • a higher-order component is a function that takes a component and returns a new component
  • https://reactjs.org/docs/higher-order-components.html
  • Ex) asyncComponent.js

• Smart/Presentational Components

  • https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43
  • Smart components have access to the redux state
  • Presentational components do not have access to the redux state
  • Smart Components === insights-frontend/app/js/states
  • Presentational Components === insights-frontend/app/js/components

• State and lifecycle within class components

  • https://reactjs.org/docs/state-and-lifecycle.html
  • article contains:
    • Adding Lifecycle Methods to a Class
    • Adding Local State to a Class
    • State Updates May Be Asynchronous
    • State Updates are Merged

Redux

Store

A store holds the whole state tree of your application. Redux doesn't have a Dispatcher or support many stores. Instead, there is just a single store with a single root reducing function.

https://redux.js.org/basics/store

createStore(reducer, preloadedState, enhancer): https://redux.js.org/api-reference/createstore

• methods
  • getState()
  • dispatch(action)
  • subscribe(listener)
  • replaceReducer(nextReducer)

actions

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch(). Redux actions should only have two properties, type and payload, as a best practice.

https://redux.js.org/basics/actions

• Async Actions frameworks
  • redux-promise-middleware
    • Currently using this
    • look at /src/api/System/getSystems.js
  • redux-thunk
    • A function that wraps an expression to delay its evaluation

    // gotSystems(Error) are action creators
    function getSystems() {      
         return function (dispatch) {
           return fetchSystems().then(
             systems => dispatch(gotSystems(systems)),
             error => dispatch(gotSystemsError(error))
           );
         };
       }

  • redux-saga
    • Uses generator functions
    • Could be a lot to learn initially.
  • redux-pack

Reducers

Reducers specify how the application's state changes in response to actions sent to the store.

https://redux.js.org/basics/reducers

Ex) /src/api/System/getSystems.js

React-redux

• Provider
  • Makes the Redux store available to the connect()
• connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  • Connects a React component to a Redux store

React-router-dom

When setting up the routes, the page content is wrapped with a .page__{pageName} class, applied to the #root ID that is determined by the rootClass in the Routes.js which lets you easily reference the page in the styling.

• BrowserRouter
  • A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL
• Route
• Switch
  • Renders the first child or that matches the location.
• Redirect
  • navigate to a new location
• withRouter
  • passes updated match, location, and history props to the wrapped component whenever it renders