react-octopus

Develop your React applications quickly and easily!

Table Of Contents

• Installation
  • npm
  • yarn
• How To Use
• Ready Solutions (tentacles)
  • tentacles.Store (Redux)
  • tentacles.Router
  • tentacles.SSR
  • tentacles.Helmet
• How To Create A New Tentacle
• License

---

Installation

npm

$ npm install react-octopus

yarn

$ yarn add react-octopus

---

If you want to use all modules:

$ npm install react-octopus react-dom react-helmet redux react-redux react-router-config react-router-dom
$ npm install --save-dev express isomorphic-fetch

or

$ yarn add react-octopus react-dom react-helmet redux react-redux react-router-config react-router-dom
$ yarn add --dev express isomorphic-fetch

back to top

---

How To Use

Examples:

• First (Demo)
• Second (with SSR)

react-octopus includes many ready solutions (tentacles) for different purposes. A list of tentacles must be specified when creating Octopus.

const config = {
    tentacles: [tentacles.Store],
}
 
// Different variants of creation:
core = new Octopus(config)
core = Octopus.getInstance(config) // Use singleton pattern
core = Octopus.getInstance(() => config) // Calls a function if `Octopus` is not created

By adding tentacles you can change a behavior of your application.

Examples:

• tentacles.Store - allows you to create Redux store through Octopus.
• tentacles.Store, tentacles.SSR - now you can easily render your application on a server.
• tentacles.Store, tentacles.SSR, tentacles.Helmet, modules.Router - this adds data for document head (title, meta, etc) and routing via react-router.

back to top

---

Ready Solutions (tentacles)

tentacles.Store (Redux)

Dependencies: redux, redux-thunk.

$ npm install redux redux-thunk

Example:

const octopus = new Octopus({
    tentacles: [tentacles.Store, ...],
    store: {
        initialState: {},
        enhancer: applyMiddleware(thunk, createLogger()),
    },
})

See React Redux.

back to top

---

tentacles.Router

Dependencies: react-router, react-router-config, react-router-dom.

$ npm install react-router react-router-config react-router-dom

Example:

const routes = [{
    component: AppRoot,
    routes: [{ path: '/', component: UserList }],
}]
 
const octopus = new Octopus({
    tentacles: [tentacles.Router, ...],
    routes: routes, // routes for SSR
})

See React Router.

back to top

---

tentacles.SSR

Server-side rendering 😎

Dependencies: express, react-dom, serialize-javascript.

$ npm install express react-dom serialize-javascript

Example:

require('isomorphic-fetch')
 
const express = require('express')
const app = express()
 
app.use('/', (req, res) => {
    const octopus = new Octopus(coreConfig)
 
    core.ssr.render(req, res).then(data => {
        res.render('./template.ejs', {
            initialState: serialize(data.props.store.getState(), {isJSON: true}),
            app: data.html,
            helmet: data.helmet,
        })
    })
})

back to top

---

tentacles.Helmet

Adds Helmet data for tentacles.SSR.

Dependencies: react-helmet.

$ npm install react-helmet

See React Helmet.

back to top

---

How To Create A New Module

See /src/tentacles/.

back to top

---

License

MIT