react-boilerplate-fully

React boilerplate fully options

Is fully Server-Render (React boilerplate)

Start

• yarn
• yarn start
• yarn build
• yarn start:prod

Tools

Library	Document
razzle, afterjs	-
react, react-dom	-
redux, react-redux	-
react-helmet	-
react-grid-system	-
react-i18next	-
react-lottie	-
react-id-swiper	-
react-icons	-
react-helmet	-
universal-cookie	-

Structure

• assets
• components
• configs
• modules
• themplates
• utils
• views

Example for use

• Authentication example (Signin, Logout)
• Actions creator example
• Routing example
• Write and edit content example
• Connect api example
• Admin themplate example

Learning

Create new page view

1. Go to folder

// path
//src/views

2. Create group of page view

// example
// src/views/member

3. Create page view file (You can see example in folder)

// example
// src/views/member/MemberListView.js

//example file stucture
// MemberListView.js
import React, { Fragment } from 'react'
// ---
import { Template } from '~/templates/v1'
// ---
const MemberListView = (props) => {
	return <Fragment>MemberListView Example</Fragment>
}

MemberListView.getInitialProps = async (props) => {
	try {
		const { store } = props
	} catch (error) {}
}

export default MemberListView

4. Map page view to sub router

// example src /views/member/index.js
import MemberListView from './MemberListView'
// ---

const routes = [
	{
		path: '/member',
		exact: true,
		component: MemberListView,
	},
]

export default routes

5. Map main page view to main router

// example src/views/index.js
import concat from 'lodash/concat'
// ---
import auth from './auth'
import main from './main'
import blog from './blog'
import member from './member' // << ----- add this
// ---

const routes = concat(auth, main, blog, member) // <---- add "member"

export default routes