{"id":18307440,"url":"https://github.com/devgeeks/phonegap-topcoat-react-getting-started","last_synced_at":"2026-01-27T22:35:05.878Z","repository":{"id":142086240,"uuid":"65709339","full_name":"devgeeks/phonegap-topcoat-react-getting-started","owner":"devgeeks","description":null,"archived":false,"fork":false,"pushed_at":"2016-08-19T05:22:55.000Z","size":4,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T23:42:14.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/devgeeks.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-15T06:19:51.000Z","updated_at":"2016-08-16T01:05:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"fd9a22be-000d-4e11-90c7-78e0bd3497f9","html_url":"https://github.com/devgeeks/phonegap-topcoat-react-getting-started","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devgeeks/phonegap-topcoat-react-getting-started","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgeeks%2Fphonegap-topcoat-react-getting-started","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgeeks%2Fphonegap-topcoat-react-getting-started/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgeeks%2Fphonegap-topcoat-react-getting-started/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgeeks%2Fphonegap-topcoat-react-getting-started/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devgeeks","download_url":"https://codeload.github.com/devgeeks/phonegap-topcoat-react-getting-started/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devgeeks%2Fphonegap-topcoat-react-getting-started/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28824753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T18:44:20.126Z","status":"ssl_error","status_checked_at":"2026-01-27T18:44:09.161Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-05T16:04:16.216Z","updated_at":"2026-01-27T22:35:05.856Z","avatar_url":"https://github.com/devgeeks.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"Our First PhoneGap Topcoat React App\n====================================\n\nThis is a super-basic intro to creating a React app and having a play with the topcoat components we will be using in the new version of the developer app.\n\nWe will use the `phonegap-template-react-hot-reloader` template to generate a basic starter app, add the `phonegap-react-topcoat` components package, then lay out some components on a \"page\".\n\nRequirements\n------------\n\n1. Node 5+ and PhoneGap (obv)\n\n2. Topcoat\n  - http://topcoat.io/\n\n3. Basic understanding of React (and I guess ES6, babel and webpack)\n  - http://exploringjs.com/\n  - https://babeljs.io/docs/learn-es2015/\n  - https://es6.io/\n  - http://ccoenraets.github.io/es6-tutorial-data/\n  - https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.8zfv86grc\n  - https://facebook.github.io/react/docs/getting-started.html\n  - https://egghead.io/courses/react-fundamentals\n\n4. The React Topcoat components (clone this somewhere)\n  - https://github.com/devgeeks/phonegap-topcoat-react\n  - For now, this needs to be installed below from a local clone that you have built:\n    - `git clone https://github.com/devgeeks/phonegap-topcoat-react`\n    - `cd phonegap-topcoat-react`\n    - `npm install`\n    - `npm run build`\n\nGetting started\n---------------\n\nFirst we will need a fresh new app created using the PhoneGap React hot loader template\n\n```\nphonegap create myreactapp --template react-hot-loader\ncd myreactapp\nnpm install\n```\n\nTo preview our app in the browser (complete with hot reloading) just run `npm start` and open http://localhost:8080/ in a browser.\n\n\nFor now, the easiest way to get Topcoat into the project is to just add all of it to our index.js:\n\n```\nnpm install topcoat --save\n```\n\nWe will use Webpack and the css-loader to load the Topcoat CSS from the `node_modules` folder and add it to the head of our `index.html`.\n\nIn order to load CSS from `node_modules`, we will need to add it in the 'includes' path for the css-loader in`./webpack.config.js`\n\nChange:\n\n```\n{\n  test: /\\.css$/,\n  loaders: ['style', 'css?url=false'],\n  include: PATHS.src,\n},\n```\n\nTo:\n\n```\n{\n  test: /\\.css$/,\n  loaders: ['style', 'css?url=false'],\n  includes: [ PATHS.src, PATHS.node_modules ],\n},\n```\n_Note: The `include` changes to `includes` (plural) when accepting an array of paths instead of a single path._\n\nThen, in `./src/index.js` add the following line after the first CSS import:\n\n```\nimport 'topcoat/css/topcoat-mobile-light.css';\n```\n\nRestarting the hot reloading server (`npm start` again) will show that the Topcoat CSS has already changed the look of the app a little.\n\nNext, we will add the `phonegap-topcoat-react` components:\n\n_Note: Be sure you have run `npm install \u0026\u0026 npm run build` in your local clone of `phonegap-topcoat-react` before continuing..._\n\n```\nnpm install /path/to/phonegap-topcoat-react --save\n```\n\nThe easiest way to see one of these components in action is to replace the \"Say hello\" button with a Topcoat Button component.\n\nIn `./src/components/Hello.js` we can start by importing the Button component:\n\n```\nimport { Button } from 'phonegap-topcoat-react';\n```\n\nThis will import just the `Button` component using destructuring assignment.\n\nWe can then use this `Button` instead of the `Tappable` currently on line 35.\n\n```\n\u003cTappable\n  className=\"button-say-hello\"\n  onTap={ () =\u003e this.sayHello('Hello world') }\n\u003eSay hello\u003c/Tappable\u003e\n```\n\n```\n\u003cButton\n  clickHandler={ () =\u003e this.sayHello('Hello world') }\n  cta\n\u003eSay hello\u003c/Button\u003e\n```\n\nNotice we change the `onTap` to `clickHandler`? This is just because the `Button` API specifically sets the `onTap` of the resulting `Tappable` using the `clickHandler` prop. We also pass a new prop `cta` to tell our component that we want the Call To Action version of a Topcoat Button.\n\nLastly, we can use the fact that the `Button` component passes through any props it doesn't recognise. In this case, we will pass in a `style` object as a prop... to move the `Button` back where it belongs.\n\n```\n\u003cButton\n  clickHandler={ () =\u003e this.sayHello('Hello world') }\n  cta\n  style={\n    {\n      position: 'absolute',\n      bottom: '100px',\n      left: '50%',\n      transform: 'translate(-50%, 0)'\n    }\n  }\n\u003eSay hello\u003c/Button\u003e\n```\n\nJust for fun, have a look at the [Components Storybook](https://devgeeks.github.io/phonegap-topcoat-react) and try and add some other components:\n\n```\nimport { List, ListContainer, ListHeader, ListItem } from 'phonegap-topcoat-react';\n```\n\n...etc\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevgeeks%2Fphonegap-topcoat-react-getting-started","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevgeeks%2Fphonegap-topcoat-react-getting-started","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevgeeks%2Fphonegap-topcoat-react-getting-started/lists"}