{"id":15551300,"url":"https://github.com/mk0y/react-struct","last_synced_at":"2026-04-12T18:06:23.449Z","repository":{"id":57345878,"uuid":"186029622","full_name":"mk0y/react-struct","owner":"mk0y","description":"Create new minimal webpack/babel react project with router and screens structure.","archived":false,"fork":false,"pushed_at":"2019-05-14T12:49:29.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-30T04:51:12.409Z","etag":null,"topics":["babel","react","react-router","reactjs","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mk0y.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-10T17:38:57.000Z","updated_at":"2019-05-14T12:49:31.000Z","dependencies_parsed_at":"2022-09-17T22:21:45.533Z","dependency_job_id":null,"html_url":"https://github.com/mk0y/react-struct","commit_stats":null,"previous_names":["markzero/react-struct"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk0y%2Freact-struct","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk0y%2Freact-struct/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk0y%2Freact-struct/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk0y%2Freact-struct/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mk0y","download_url":"https://codeload.github.com/mk0y/react-struct/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246126669,"owners_count":20727594,"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":["babel","react","react-router","reactjs","webpack"],"created_at":"2024-10-02T14:04:02.139Z","updated_at":"2025-10-28T17:07:51.442Z","avatar_url":"https://github.com/mk0y.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-struct\nCreate new minimal webpack/babel react project with router and screens structure.\n\n## Install\nYou can create a project by installing it globally or using `npx`:\n1. `npm i -g react-struct` and `react-struct [-n your-project-name]`\n2. `npx react-struct [-n your-project-name]`\n\nThis will create project with name `react-struct`. Pass `-n your-project-name` to name it differently.\n\nAfter this, just go into your project and install npm modules `cd your-project-name \u0026\u0026 npm i`.\n\nAfter installation is done and you installed npm modules, you can open up the project in your favorite editor.\n\n### Editor\n#### 1. VS Code\nTo be ready for your new project install following extensions:\n1. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint: this will make editor complain when you write ugly code (options are set in `.eslintrc.yaml`)\n2. https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest: with this extension you can see whether your tests work or not while you type\n3. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode: `⌥ + SHIFT + F` to prettify your code (options are set in `.prettierrc.yaml`)\n\n\n### Why?\nAfter starting so many React projects I always feel repeating myself with same or similar boilerplate code that it became annoying.\nSo I decided to create this boilerplate and maintain it with new practices I come up with.\n\n### Contents\nLately I started to like \"screens\" folder structure explained [here](https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346).\nThis package follows the same logic.\nRoutes config is managed in `./src/config/routes` which is then transformed into list of `\u003cRoute\u003e` components from `./src/utils/utils`. Routes are then spread in `./src/index.js`.\n\nIt's just a simple app with react-router with Home, About, Blog, Post `/post/:id` empty pages, [Layout](https://github.com/markzero/react-struct/blob/master/package/src/shared/components/Layout/index.js) and [Header](https://github.com/markzero/react-struct/blob/master/package/src/shared/components/Header/index.js) components.\n\nFor starting a project I suggest just emptying `src/` folder and start your own app. Source code is there only to demonstrate screens hierarchy.\n\n### Tools\nWebpack, Babel, ESLint, Prettier, Jest, Husky, lint-staged.\n\n### Commands\n* `npm start` starts webpack-dev-server\n* `npm test` runs tests\n* `npm run lint` runs lint\n* `npm run clean` cleans the `dist` folder\n* `npm run dev` builds for development\n* `npm run build` builds for production\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmk0y%2Freact-struct","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmk0y%2Freact-struct","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmk0y%2Freact-struct/lists"}