{"id":27279132,"url":"https://github.com/coolshare/reactreduxstarterkit","last_synced_at":"2026-04-27T20:32:03.306Z","repository":{"id":57343343,"uuid":"89630217","full_name":"coolshare/ReactReduxStarterKit","owner":"coolshare","description":"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.","archived":false,"fork":false,"pushed_at":"2017-06-17T03:26:15.000Z","size":1355,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T21:01:53.237Z","etag":null,"topics":["condition-render","container-component","coolshare","patterns","react","redux","render-callback"],"latest_commit_sha":null,"homepage":"http://markqian.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coolshare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-27T18:51:59.000Z","updated_at":"2019-01-23T06:17:52.000Z","dependencies_parsed_at":"2022-09-16T07:51:22.932Z","dependency_job_id":null,"html_url":"https://github.com/coolshare/ReactReduxStarterKit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FReactReduxStarterKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FReactReduxStarterKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FReactReduxStarterKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FReactReduxStarterKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coolshare","download_url":"https://codeload.github.com/coolshare/ReactReduxStarterKit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248454247,"owners_count":21106428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["condition-render","container-component","coolshare","patterns","react","redux","render-callback"],"created_at":"2025-04-11T17:47:58.045Z","updated_at":"2026-04-27T20:32:03.268Z","avatar_url":"https://github.com/coolshare.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React-Redux Starter Kit\n========================\n\nBy Mark Qian 3/2017 (markqian@hotmail.com)\n\n\u003cb\u003eA. The demo page:\u003c/b\u003e \n\nhttp://coolshare.github.io/ReactReduxStarterKit/\n\n\u003cb\u003eB. Description:\u003c/b\u003e\n\nThis starter kit is designed to get you up and running as a comprehensive web application.\n\n - \u003cb\u003eA general web UI layout\u003c/b\u003e: \n \n   1). top links to divide business concept into multiple area (\"Main\" and \"Second\")\u003cbr /\u003e\n   2). tabs to further divide an area into sub areas\u003cbr /\u003e\n   3). accordions at the right side (in TabA) to provide management UI for different features\u003cbr /\u003e\n   4). master/detail layout to provide an editing environment to handle collection data (Right pane in TabA)\u003cbr /\u003e\n   5). other type of UI like map\u003cbr /\u003e  \n \n - \u003cb\u003eAccess store globally\u003c/b\u003e. The store static field of global class holds the reference of Redux store so that\n   we can access the store and related method such as dispatch any where instead of pass the store down in the\n   component hierarchy. See code details at /services/CommunicationService.js\n \n - \u003cb\u003eReact patterns\u003c/b\u003e. the following patterns are used in the application\n \n   1). *Container/Component*. It is used under /components/Patterns: all the components are written with this pattern.\u003cbr/\u003e\n   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):\n   \n\t   The event handler resides in VideoContainer and VideoComponent hoists the data entered by users to\n\t   VideoContainer:\n\t   \n\t   class _VideoContainer extends React.Component {\n\t   \t\thandlePeriod(s) {\n\t\t\t\t...\t\t\n\t\t\t}\n\t\t\trender() {\n\t\t\t\t...\n\t\t\t    return (\n\t   \t\t\t\t\u003c VideoComponent  handlePeriod={this.handlePeriod.bind(this)}}... /\u003e\n\t   \t\t\t\t...\n\t   \t\t\t}\n\t   \t\t} \n    \texport default class VideoComponent extends React.Component{\n    \t\trender() {\n\t\t\t  \t...\n\t    \t\treturn (\n\t      \t\t\t\u003cselect onChange={(e)=\u003ethis.props.handlePeriod(e.target.value)}\u003e\n\t\t\t\t\t\t...\n\t        \t\t\u003c/select\u003e\n\t        \t}\n\t       }\n    \t}\n   and VideoComponent is a stateless \"function\".\n   \n   3). *conditional rendering*. The is an alternative of routing to show different content/page. Example (in MapContainer.js):\n   \n\t\tclass _MapContainer extends Component {\n\t\t\t...\n\t\t\trender() {\n\t\t\t    return (\n\t\t\t    \t...\n\t\t\t\t    \t{(this.props.currentMap===\"GoogleMap\") \u0026\u0026 \u003cdiv\u003e\u003ccenter\u003e\u003cdiv\u003eSome bus stops in SF\u003c/div\u003e\u003c/center\u003e\u003cGoogleMapContainer style={{\"minHeight\":\"400px\"}}/\u003e\u003c/div\u003e}\n\t\t\t\t    \t{(this.props.currentMap===\"MapBox\") \u0026\u0026 \u003cMapBoxContainer style={{\"minHeight\":\"400px\"}}/\u003e}\t\t\t\t    \t\t\t\t...\n\t\t\t    )\n\t\t\t}\n\t\t}\n\t\n\t\tconst MapContainer = connect(\n\t\t\t\t  store =\u003e {\n\t\t\t\t\t    return {\n\t\t\t\t\t    \tcurrentMap: store.MapContainerReducer.currentMap\n\t\t\t\t\t    };\n\t\t\t\t\t  }\n\t\t\t\t\t)(_MapContainer);\n\t\texport default MapContainer\n\t\n   4).*Render Callbacks*: a function passed as a prop to a component, which allows that component to render something\n   \t\tA common use-case of a render callback was to allow a child to render something using data it did not receive in props.\n   \tExample (RightPane.js)\n   \t\n   \t\tclass _RightPane extends React.Component{\n\t\t\trender(){\n\t\t\t\tlet ChildPane = ({ children  }) =\u003e children (this.props.currentPage)\n\t\t\t\treturn (\n\t\t\t\t\t \u003cdiv\u003e\n\t\t\t\t\t \t\u003cChildPane\u003e\n\t\t\t\t\t \t\t{id=\u003eid===\"TodoList\"?\u003cTodoList/\u003e:id===\"HousingInfo\"?\u003cHousingInfo/\u003e:null}\n\t\t\t\t\t \t\u003c/ChildPane\u003e\n\t\t\t\t\t \u003c/div\u003e\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\nThe goal of this _RightPane is to display \u003cTodoList/\u003e or \u003cHousingInfo/\u003e according this.props.currentPage passed by the parent container (\u003cFormTableContainer\u003e). 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 \n\t\t{id=\u003eid===\"TodoList\"?\u003cTodoList/\u003e:id===\"HousingInfo\"?\u003cHousingInfo/\u003e:null}\nThen this function is invoke as\n\n        children (this.props.currentPage)\n        \nwhere 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=\u003eid===\"TodoList\"?\u003cTodoList/\u003e:id===\"HousingInfo\"?\u003cHousingInfo/\u003e:null}\" with the \"this.props.currentPag\" built-in like a closure.\n\n 5).*Proxy Component*: Wrapping a component with attributes and reuse it.\n   \n   Example (in TodoList.js)\n   \n    const Td = props =\u003e \u003ctd style={{\"width\":\"33%\", \"border\": \"1px solid black\"}} {...props}/\u003e\n\t\t\n    class _TodoList extends React.Component{\n       ...\n        render(){\n          ...\n            return (\t\t                                    \n                \u003ctr  key={index} style={{\"background\":\"#FFF\"}}\u003e\n                \u003cTd\u003e{todo.id}\u003c/Td\u003e\n                \u003cTd\u003e{todo.text}\u003c/Td\u003e\n                \u003cTd\u003e \u003cinput style={{\"marginLeft\":\"10px\"}} \n                  ...\n\t   \t\t\t\n        }\n    }\n    \t\t\t\n   5).*Proxy Component*: a higher-order component is a function that takes a component and returns a new component.\n   \n   Example (in TodoList.js)   \n   \n - \u003cb\u003eBasic function/feature\u003c/b\u003e of Redux: connect of React-redux, middleware, dispatching actions, subscription and so on. \n   This kit uses a pure Redux pattern in the area communication and view update so no \"setState\" is used except local    \n   state like input content state impact button enable state. \n\n - \u003cb\u003eOther\u003c/b\u003e the 3nd-party lib are used included:\n \n   mapbox-gl, googlemap, react-data-grid, infinite-tree, react-image-gallery, react-tabs, react-youtube \n \n   \n\u003cb\u003eC. Instructions for installation\u003c/b\u003e\n\n1. download the zip file of this package and unzip it to, say c:\\ReactReduxStarterKit\u003cbr/\u003e\n   or simply run the following\u003cbr/\u003e\n   \n      cd c:\\\n      git clone https://github.com/coolshare/ReactReduxStarterKit.git ReactReduxStarterKit\u003cbr/\u003e\n      \n2. install environment\n\n      cd c:\\ReactReduxStarterKit\u003cbr/\u003e\n      npm install\n      \n3. run the application\n\n      npm start\n      \n4. build a production version\n\n      webpack -p\n      \n      \n   \nGo Mark's home page http://MarkQian.com to see more.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoolshare%2Freactreduxstarterkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoolshare%2Freactreduxstarterkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoolshare%2Freactreduxstarterkit/lists"}