https://github.com/coolshare/reactreduxstarterkit
This starter kit is designed to get you up and running with a regular layout for a comprehensive web application. It also demostrates and discusses topics like major React design patterns.
https://github.com/coolshare/reactreduxstarterkit
condition-render container-component coolshare patterns react redux render-callback
Last synced: about 2 months ago
JSON representation
This starter kit is designed to get you up and running with a regular layout for a comprehensive web application. It also demostrates and discusses topics like major React design patterns.
- Host: GitHub
- URL: https://github.com/coolshare/reactreduxstarterkit
- Owner: coolshare
- License: mit
- Created: 2017-04-27T18:51:59.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-17T03:26:15.000Z (almost 8 years ago)
- Last Synced: 2025-03-24T21:01:53.237Z (3 months ago)
- Topics: condition-render, container-component, coolshare, patterns, react, redux, render-callback
- Language: JavaScript
- Homepage: http://markqian.com
- Size: 1.29 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React-Redux Starter Kit
========================
By Mark Qian 3/2017 ([email protected])
A. The demo page:
http://coolshare.github.io/ReactReduxStarterKit/
B. Description:
This starter kit is designed to get you up and running as a comprehensive web application.
- A general web UI layout:
1). top links to divide business concept into multiple area ("Main" and "Second")
2). tabs to further divide an area into sub areas
3). accordions at the right side (in TabA) to provide management UI for different features
4). master/detail layout to provide an editing environment to handle collection data (Right pane in TabA)
5). other type of UI like map
- Access store globally. The store static field of global class holds the reference of Redux store so that
we can access the store and related method such as dispatch any where instead of pass the store down in the
component hierarchy. See code details at /services/CommunicationService.js
- React patterns. the following patterns are used in the application
1). *Container/Component*. It is used under /components/Patterns: all the components are written with this pattern.
2). *State hoisting and Stateless function (pure function)*: Events are changes in state. Their data needs to be passed to stateful container components parents. Example (in VideoContainer.js and VideoComponent.js):
The event handler resides in VideoContainer and VideoComponent hoists the data entered by users to
VideoContainer:
class _VideoContainer extends React.Component {
handlePeriod(s) {
...
}
render() {
...
return (
< VideoComponent handlePeriod={this.handlePeriod.bind(this)}}... />
...
}
}
export default class VideoComponent extends React.Component{
render() {
...
return (
this.props.handlePeriod(e.target.value)}>
...
}
}
}
and VideoComponent is a stateless "function".
3). *conditional rendering*. The is an alternative of routing to show different content/page. Example (in MapContainer.js):
class _MapContainer extends Component {
...
render() {
return (
...
{(this.props.currentMap==="GoogleMap") &&
Some bus stops in SF}
{(this.props.currentMap==="MapBox") && } ...
)
}
}
const MapContainer = connect(
store => {
return {
currentMap: store.MapContainerReducer.currentMap
};
}
)(_MapContainer);
export default MapContainer
4).*Render Callbacks*: a function passed as a prop to a component, which allows that component to render something
A common use-case of a render callback was to allow a child to render something using data it did not receive in props.
Example (RightPane.js)
class _RightPane extends React.Component{
render(){
let ChildPane = ({ children }) => children (this.props.currentPage)
return (
{id=>id==="TodoList"?:id==="HousingInfo"?:null}
)
}
}
The goal of this _RightPane is to display or according this.props.currentPage passed by the parent container (). We first declare ChildPane as a "function" which access another function (children) as parameter and then invoke the function(children passed as parameter) inside ChildPane. ChildPane is used in the render content where Children receives its function parameter (children) as
{id=>id==="TodoList"?:id==="HousingInfo"?:null}
Then this function is invoke as
children (this.props.currentPage)
where id above is this.props.currentPage. What is good on this pattern? The benefit is that ChildPane can be used somewhere else with different content instead of "{id=>id==="TodoList"?:id==="HousingInfo"?:null}" with the "this.props.currentPag" built-in like a closure.
5).*Proxy Component*: Wrapping a component with attributes and reuse it.
Example (in TodoList.js)
const Td = props =>
class _TodoList extends React.Component{
...
render(){
...
return (
{todo.id}
{todo.text}
Basic function/feature of Redux: connect of React-redux, middleware, dispatching actions, subscription and so on.
This kit uses a pure Redux pattern in the area communication and view update so no "setState" is used except local
state like input content state impact button enable state.
- Other the 3nd-party lib are used included:
mapbox-gl, googlemap, react-data-grid, infinite-tree, react-image-gallery, react-tabs, react-youtube
C. Instructions for installation
1. download the zip file of this package and unzip it to, say c:\ReactReduxStarterKit
or simply run the following
cd c:\
git clone https://github.com/coolshare/ReactReduxStarterKit.git ReactReduxStarterKit
2. install environment
cd c:\ReactReduxStarterKit
npm install
3. run the application
npm start
4. build a production version
webpack -p
Go Mark's home page http://MarkQian.com to see more.