{"id":18487543,"url":"https://github.com/vmware-archive/react-starter","last_synced_at":"2025-04-08T20:31:28.598Z","repository":{"id":66820211,"uuid":"49238729","full_name":"vmware-archive/react-starter","owner":"vmware-archive","description":null,"archived":true,"fork":false,"pushed_at":"2018-07-27T16:46:59.000Z","size":338,"stargazers_count":30,"open_issues_count":2,"forks_count":23,"subscribers_count":39,"default_branch":"master","last_synced_at":"2024-12-19T00:04:42.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/vmware-archive.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-08T00:10:55.000Z","updated_at":"2023-01-28T17:41:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee2e979d-e92c-4457-9d28-3bfeb4196fdc","html_url":"https://github.com/vmware-archive/react-starter","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/vmware-archive%2Freact-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmware-archive%2Freact-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmware-archive%2Freact-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmware-archive%2Freact-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vmware-archive","download_url":"https://codeload.github.com/vmware-archive/react-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247922956,"owners_count":21018899,"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":[],"created_at":"2024-11-06T12:50:32.060Z","updated_at":"2025-04-08T20:31:28.591Z","avatar_url":"https://github.com/vmware-archive.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# DEPRECATED\n\nUse [Create React App](https://github.com/facebook/create-react-app)\n\n# React Starter\n\n[![Build Status](https://travis-ci.org/pivotal-cf/react-starter.svg?branch=master)](https://travis-ci.org/pivotal-cf/react-starter)\n\nReact Starter is a todoApp project with much of the tooling in place you would need for a fully-featured React application.\n[Click here](http://react-starter.cfapps.io/) to see it in action.\n\n# Table of Contents\n1. [Getting Started](#getting-started)\n1. [Testing](#testing)\n1. [Linting](#linting)\n1. [Assets](#assets)\n1. [Patterns](#patterns)\n1. [Troubleshooting](#troubleshooting)\n\n## Getting Started\n\nInstall gulp:\n```bash\nbrew install gulp\n```\n\nCheckout the project, install dependencies, and start foreman:\n```bash\ngit clone git@github.com:pivotal-cf/react-starter.git \u0026\u0026 cd react-starter\nnpm install\ngulp foreman\n```\n\nThis will start up the development server at [3000](http://localhost:3000) and the Jasmine server at [8888](http://localhost:8888).\nThe app includes example React architecture, along with Jasmine unit tests and a WebdriverIO integration test.\n\n## Deploying\n\nTo deploy to cloud foundry:\n\n1. choose a unique name for your application and change `name: react-starter` in `manifest.yml` to your unique name\n1. login to cf, target your org and space\n1. `gulp deploy`\n\nNote that `cf push` by itself will not work. The `gulp deploy` task will compile your assets and configure the staticfile for the buildpack before doing `cf push`\n\n## Testing\n\n### Unit Testing\n\nAny files matching `spec/app/**/*_spec.js` will be run as part of [Jasmine](jasmine.github.io). There are some example tests included in `spec/app/components/`.\n\nTo run the tests headlessly in phantomjs:\n```\ngulp spec-app\n```\n\nTo run a Jasmine server (on port 8888):\n```\ngulp jasmine\n```\nThe jasmine server will watch for file changes and update appropriately.\nNote that `gulp foreman` will start a jasmine server for you.\n\nIn general, testing a React component will need the line `require('../spec_helper')` as the first line.\nThe test will also probably have lines like\n```\nconst MyComponent = require('../../../app/components/my_component');\nReactDom.render(\u003cMyComponent {...props}/\u003e, root)\n```\nwhere `props` is an object representing the props passed into the React component. \nThe spec_helper re-creates a div with id=\"root\" (referenced by `root`) where you can render your components.\n\nTesting the results of rendering is made easier with [jasmine_dom_matchers](https://github.com/charleshansen/jasmine_dom_matchers),\nthis is where `toHaveText` is defined.\n\nWe have also provided some custom matchers with [pivotal-js-jasmine-matchers](https://github.com/pivotal-cf/pivotal-js/tree/master/packages/pivotal-js-jasmine-matchers).\n\n#### Factories\n\nReact starter sets up Factories using [Rosie](https://github.com/rosiejs/rosie).\nFactories are defined in the `spec/factories` folder.\nThe easiest way to create a new factory is to create a new file in `spec/factories`.\nSee `spec/factories/user.js` as an example.\n\n\n### Integration Testing\n\nIntegration tests use [selenium-standalone](https://github.com/vvo/selenium-standalone) and [WebdriverIO](http://webdriver.io/).\n\nSelenium requires Java, so make sure this is installed. Run:\n```\ngulp spec-integration\n```\n\nThis will take any files matching `spec/integration/**/*_spec.js` and run them through Jasmine.\nWe provide a `describeWithWebdriver` function, inside of which you have access to WebdriverIO functionality.\n\nWebdriverIO is based on promises. Any time you interact with the browser in any way, this will be asynchronous and return a promise.\nTo make this more readable, we use `async`/`await` syntax (from EcmaScript 2016) and the `done` callback from Jasmine.\n\nThere are also a number of functions provided in `spec/integration/helpers/webdriver_helper.js`.\n\nAn example integration test is provided at `spec/integration/features_spec.js`.\n\n## Linting\n\nTo lint your JavaScript code using [ESLint](http://eslint.org/):\n\n```\ngulp lint\n```\n\nThe linting rules are set in `.eslintrc`\n\n\n## Assets\n\nThe JavaScript is compiled using [Babel](https://babeljs.io/) and [Webpack](https://webpack.github.io/).\nAdditional webpack loaders and webpack plugins are used to compile the sass and html. By default, the entry point for your browser JavaScript is `app/index.js`.\n\nWebpack configurations are in `config/webpack/`. For example, if NODE_ENV is 'production', webpack is configured with `config/webpack/production.js`\n\n```bash\nNODE_ENV=production gulp assets\n```\nwill output `application.js`, `application.css`, and `index.html` into the public folder.\n```bash\nNODE_ENV=production gulp assets-config\n```\nwill output `config.js` into the public folder. These assets can then be served statically.\n\nReact starter is in development mode if `NODE_ENV=development` or undefined.\nIn development mode, the express server serves up `index.html`, `application.js` and `application.css`, using `webpack-dev-middleware`. `config.js` is served separately. This uses the webpack config in `config/webpack/development.js`\n\n## Patterns\n\n#### Flux\n\nWe have provided an example flux implementation in this application.\n\n* A component calls an action\n* The action calls the dispatcher\n* The corresponding method in the dispatcher updates the global store\n\nThe flux patterns used in React starter have been extracted into [p-flux](https://github.com/pivotal-cf/p-flux).\nLook into p-flux documentation for best practices on storing and updating data.\n\n#### Router\n\nWe have provided an example router in this application. The router is using [Grapnel](https://github.com/bytecipher/grapnel).\n\nRouter callbacks should be responsible for changing the page. \nThis can be accomplished by storing a page component in the router, as in `app/components/router.js`.\nRouter callbacks also have access to props and Actions to save route params in the store.\n \nWe recommend having a `setRoute` dispatch event for easy debugging. We have provided an example in `app/dispatchers/main_dispatcher.js`.\n\nWe have also provided a mock router for use in test in `spec/app/support/mock_router.js`.\nThe mock router is installed in `spec/app/spec_helper.js`.\nIf you do not mock the router, it will change your browser URL while running Jasmine.\n\n#### API\n\nWe have provided an example workflow that talks to an api, using the JSONPlaceholder api and `window.fetch`.\nUsing an api requires asynchronous testing, which can be difficult.\nWe use [MockPromises](https://github.com/charleshansen/mock-promises) to deal with most of it.\n\n## Troubleshooting\n\n### node\n\nReact Starter requires:\n* Node version 4+ (it may work with older versions of node, but node-sass less likely to install correctly).\n* Npm version 3+\n\nIf either of these is an earlier version, you will likely see errors when you run the code. \nIf you have installed and then realize you need to change either of these, you will need to `rm -rf node_modules` and `npm install` to make sure dependencies are correctly updated and installed.\n\nWindows Users: To install node-sass, you will need a C compiler like Visual Studio installed, and probably also Python 2.x\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmware-archive%2Freact-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvmware-archive%2Freact-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmware-archive%2Freact-starter/lists"}