{"id":14967407,"url":"https://github.com/atsistemas/react-base","last_synced_at":"2025-06-15T12:05:34.372Z","repository":{"id":40822841,"uuid":"55981559","full_name":"atSistemas/react-base","owner":"atSistemas","description":"atSistemas React/Redux Isomorphic Platform","archived":false,"fork":false,"pushed_at":"2022-12-07T04:12:43.000Z","size":7411,"stargazers_count":81,"open_issues_count":21,"forks_count":20,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-25T20:46:26.444Z","etag":null,"topics":["chai","coverage","enviroment","enzyme","immutablejs","isomorphic","jsdom","mocha","postcss","react","reactjs","redux","universal","webpack3"],"latest_commit_sha":null,"homepage":"","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/atSistemas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-11T14:55:41.000Z","updated_at":"2024-07-12T12:12:11.000Z","dependencies_parsed_at":"2023-01-24T13:16:35.458Z","dependency_job_id":null,"html_url":"https://github.com/atSistemas/react-base","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/atSistemas/react-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Freact-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Freact-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Freact-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Freact-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atSistemas","download_url":"https://codeload.github.com/atSistemas/react-base/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Freact-base/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259971331,"owners_count":22940009,"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":["chai","coverage","enviroment","enzyme","immutablejs","isomorphic","jsdom","mocha","postcss","react","reactjs","redux","universal","webpack3"],"created_at":"2024-09-24T13:38:00.865Z","updated_at":"2025-06-15T12:05:34.346Z","avatar_url":"https://github.com/atSistemas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React-Base logo](./src/app/assets/images/react-base-logo.png)\n\n# React-Base\n\n\n![Build-Status](https://travis-ci.org/atSistemas/react-base.svg?branch=master)\n![Build-Status](https://ci.appveyor.com/api/projects/status/github/atSistemas/react-base?branch=master\u0026svg=true)\n[![Coverage Status](https://coveralls.io/repos/github/atSistemas/react-base/badge.svg?branch=master)](https://coveralls.io/github/atSistemas/react-base?branch=master)\n![Npm-Version](https://img.shields.io/badge/npm-6.2.0-blue.svg)\n![License](https://img.shields.io/badge/license-MIT-blue.svg)\n\n**A modular platform for Redux Isomorphic applications**\n\nThis repository is a modular abstraction to build a [ReactJS](https://facebook.github.io/react/) web application based on [Redux](http://redux.js.org/)  paradigm.\nYou can use it to quickly scaffold your React web application projects and development environments for these projects.\n\nThis seed should clarify how to wire up all the modules of your application, even when we understand that in some cases\nthere must be some changes needed by the structure to fit your needs correctly\n\n## Overview\n\n**React-Base** makes use of the latest tools to improve your workflow, and enables you to create future ready applications:\n\n- [Redux](http://redux.js.org/) based architecture\n- Isomorphic / Universal Javascript Apps\n- [Webpack 3](https://webpack.github.io/) build configuration depending on enviroment \n- Immutable data modeling using [ImmutableJS](https://facebook.github.io/immutable-js/)\n- Store middleware to handle request actions. \n- Development \u0026 Production server using [express](https://github.com/expressjs/express) and [webpack-dev-server](https://webpack.github.io/)\n- Hot Reload/Live Reload support for Js \u0026 Css using  [Webpack HMR](https://webpack.github.io/docs/hot-module-replacement.html)\n- Container and component generators using [Yeoman](https://github.com/yeoman/yo)\n- JSX and ES6 transpilation using [Babel](https://babeljs.io/)\n- [Mocha](https://mochajs.org/) as testing framework\n- [Enzyme/JsDom](https://github.com/airbnb/enzyme) for unit/ui testing\n- [Nyc](https://github.com/bcoe/nyc) for code coverage\n- [PostCSS](http://postcss.org/) processing with isomorphic support.\n- [CssModules](https://github.com/css-modules/css-modules) based\n- Code Linting using [Eslint](https://github.com/eslint/eslint)\n- Css Linting using [CssLint](https://github.com/stylelint/stylelint)\n- [Airbnb](https://github.com/airbnb/javascript/tree/master/react) React Style Guide\n\n\n## Getting Started\n\nTo get you started, you need to meet the prerequisites, and then follow the installation instructions.\n\n### Prerequisites\n\nReact-Base makes use a number of NodeJS tools to initialize and test React-Base. You must have node.js 6.2.0 at least, and its package manager (npm) installed. You can get it from [nodejs.org](node).\n\n### Installing\n\nYou can clone our Git repository:\n\n`$ git clone https://github.com/atSistemas/react-base.git`\n\nThis method requires Git to be installed on your computer. You can get it from\n[here](http://git-scm.com).\n\n### Wiring up your development environment\n\nSetting up **React-Base** is as easy as running:\n\n`$ npm install`\n\nThis command will install all the required dependencies and start your development server, which takes care of all the changes you make to your code and runs all the awesome stuff that ends with your code automagically transpiled and running on your browser.\n\nPlease note that `npm install` is only required on your first start, or in case of updated dependencies.\n\n\n### Initializing development server\n\n  Once all the dependencies are installed, you can run `$ npm run start` to initialize your development server using [webpack-dev-server](https://webpack.github.io/) express middleware.\n\n  The dev server uses  [HMR](https://webpack.github.io/docs/hot-module-replacement.html) (Hot module replacement) that injects updated modules into the bundle in runtime. It's like LiveReload\n\n\n## Architecture\n\nReact-base is based on [Redux](http://redux.js.org/)  paradigm so you can find all the typical entities of an Redux project like [reducers](http://redux.js.org/docs/basics/Reducers.html) , [store](http://redux.js.org/docs/basics/Store.html), [actions](http://redux.js.org/docs/basics/Actions.html) , etc.\n\nThere are four main folders:\n\n* `server` contains React-Base development \u0026 production server based in express with Universal/Isomorphic support and custom middlewares like Gzip.\n\n```javascript\nserver\n  api/ //Api mocks\n  lib/ //Universal rendering files\n  middleware/ //enviroment middleware\n  statics/ //definition of  statics path\n  templates/ //universal templates\n    server  //Server  \n    routing  //Routing middleware  \n```\n\n* `webpack` contains React-Base Webpack configuration separated by enviroment that allows to use different plugins and loaders in each target enviroment.\n\n```javascript\nwebpack\n  webpack.common.config/ //Common config\n  webpack.dev.config/ //Development config\n  webpack.prod.config/ //Production config\n  webpack.test.config/ //Testing config\n  webpack.dll.config/ //Dll config\n```\n\n* `src/base/` contains React-Base platform bootstrapping code.\n\n```javascript\nbase\n  client/ //client bootstrap\n  conf/ //Configuration files and Yeoman templates\n  middleware/ //Redux Store middleware\n  components/ //base components\n  models/ //model index\n  reducers/  //reducer index\n  routes/ //routes index\n  shared/ // shared base folder\n    regenerators/ //index regenerators\n    CreateActionType //Custom action type creator\n    CreateReducer //Custom reducer creator\n    ENV //Env handler\n    Errors //Errors handler\n    FetchData //Isomorfic data handler\n    FileSystem //Filesystem manager\n    JsDomSetup //JsDom Configuration FileSystem\n    ModelHelper //Inmutable deserializators\n    Regenerate // Regenerate indexes\n  store/ //Store configuration and AppState definition\n  types/ //Action request Types\n  wp-plugins/ //Custom webpack plugins\n  ...\n```\n\n* `src/app/` is the place where to put your application source code.\n\nReact-Base uses a \"featured based\" distribution, so all the necessary code for each page/features is located in its own folder inside containers folder as in `src/app/containers/myContainer`\n\nA container is a React component who contains other components, Redux entities, functions and store subscriptions. Each container is self-contained and represents a feature like \"clients\" or \"products\" and it contains all the necessary stuff.\n```javascript\napp/\n  containers/\n    myContainer/\n      api/ //api calls\n      actionTypes/ //action types definition\n      actions/ //action creators\n      components/ //container components\n      models/ //containers models using immutable\n      reducers/ //container reducers\n      index.ts //container component\n  ...\n```\n\n## Action Types\nActionTypes it's a representation using constants of your possible actions:\n\n```javascript\nimport { createActionType } from 'base';\n\nexport const ActionTypes = createActionType([\n  'CLICK',\n  'MAIN_CONTAINER',\n  'MAIN_ERROR',\n  'MAIN_REQUEST',\n  'MAIN_SUCCESS',\n  'LAZY_CONTAINER',\n  'LOGIN',\n]);\n\n```\n\n## Actions\nActions are payloads of information witch represent that something happend in your application and  send data from your application to your store:\n\n```javascript\nclickHandler(id) {\n    return {\n      type: ActionTypes.USER_CLICK,\n      payload: {\n        id: id\n      }\n    };\n}\n\n```\n\nReact-Base include a Redux Store middleware to handle actions with service calls more easyly.  You can define in the api folder of your container, an api call based in a fetch call:\n\n```javascript\n\n  fetchUsers() {\n    return fetch(url)\n      .then(req =\u003e req.json())\n      .then(data =\u003e data)\n      .catch(err =\u003e err) \n  },\n\n```\n\nThen, in your action you can attach this service call in your action using the request param:\n\n```javascript\nexport function getPosts() {\n  return {\n    type: ActionTypes.USERS_REQUEST,\n    request: api.fetchUsers()\n  };\n}\n```\n\nThe request middleware will resolve the request param \n and dispatch a new action with \"ACTION_SUCCESS\" or \"ACTION_ERROR\" with the response of the request in the payload. \n\n## Reducers\nReducers describe how the state of your application changes in response to a new Action. React-Base uses a custom CreateReducer that allows to use separated reducers functions instead of \"switch based\" reducers.\n\n```javascript\nimport { createReducer } from 'base';\n\nconst click = (state, action) =\u003e {\n  return state.update('mainData', (value) =\u003e action.payload);\n};\n\nconst request = (state, action) =\u003e {\n  return state;\n};\n\nconst actionHandlers = {\n  [ActionTypes.CLICK]: click,\n  [ActionTypes.LOGIN]: login,\n  [ActionTypes.MAIN_REQUEST]: request,\n  [ActionTypes.MAIN_SUCCESS]: success,\n};\n\nexport default CreateReducer(actionHandlers, new MainModel());\n\n```\n\n## Models\nRepresents your model data using ImmutableJS Data Types and sets its initial state using setInitialState() function.\n\n\n```javascript\nimport { Record } from 'immutable';\n\nconst MainModel = new Record({\n  display:0,\n  operator:'',\n  operation:'',\n  prevValue: 0,\n  nextValue: 0,\n  newValue: false,\n  resetDisplay: false,\n});\n\nfunction setInitialState(initialState) {\n  return initialState.Maiin = new MainModel();\n}\n\nexport { MainModel, setInitialState };\n\n\n```\n### Generating a new container\n\nReact-base uses Yeoman to generate new application containers or components.\n\nFist of all you need to link yo:\n\n`$ npm run yo`\n\nThen, you can generate a new container run:\n\n`$ npm run generate:container`\n\nYou'll be asked to provide a name for your container. After that, React-base will create all the necessary folder and file template structures you, and will rebuild the file indexes (routes, reducers, models, etc), so you don't have to worry about including all the required imports.\n\nAfter that, you can access to your container from http://localhost:8000/myContainer\n\n### Regenerating indexes\n\nYou can rebuild the file indexes (reducers, models and routes) running `$ npm run regenerate`\n\n### Generating a new component\n\nAs with containers, React-base can automate components creation for you. To create a new component, just type:\n\n`$ npm run generate:component`\n\nSame as before, you will be asked for a component name, and after that React-base will do the rest, placing a component template under `app/components`, and rebuilding all the indexes.\n\n## Distribution\n\nYou can generate a complete distribution source ready for production enviroments.\n\n### Building your production application\n\n`$ npm run build:prod` will create a minified version for your application, ready for production.\n\n### Running production server\n\n`$ npm run start:prod` will run production enviroment of your application serving content from dist directory.\n\n\n## Testing your application\n\nReact base uses - [Enzyme](https://github.com/airbnb/enzyme) a testing utillity created by [Airbnb](https://github.com/airbnb/) for unit testing and Ui testing using [Airbnb](https://github.com/tmpvar/jsdom) so you can run your ui testing without a browser.\n\nYou can write your tests normally using Mocha and Chai for assertions.\n\n### Running your tests\n\n`$ npm run test` will perform your unit testing, or npm test:coverage to run your tests and display a code coverage report.\n\n### Generating code coverage\n\nReact base uses [Nyc](https://github.com/bcoe/nyc) for code coverage and you can generate reports in console or icov/html format.\n\n`$ npm run test` will perform your code coverage, generating an html report located in coverage/ folder.\n\n## Contributing\n\nAnyone and everyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the [guidelines](CONTRIBUTING.md):\n\n* [Bug reports](CONTRIBUTING.md#bugs)\n* [Feature requests](CONTRIBUTING.md#features)\n* [Pull requests](CONTRIBUTING.md#pull-requests)\n\n## License\n\n**React-Base** is available under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatsistemas%2Freact-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatsistemas%2Freact-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatsistemas%2Freact-base/lists"}