{"id":13806714,"url":"https://github.com/AltSchool/ember-cli-react","last_synced_at":"2025-05-13T22:30:40.365Z","repository":{"id":47195644,"uuid":"56405976","full_name":"AltSchool/ember-cli-react","owner":"AltSchool","description":"Use React component hierarchies in your Ember app","archived":false,"fork":false,"pushed_at":"2021-09-10T22:17:49.000Z","size":129,"stargazers_count":68,"open_issues_count":14,"forks_count":24,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-05T20:38:10.804Z","etag":null,"topics":[],"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/AltSchool.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-16T21:18:19.000Z","updated_at":"2024-05-02T14:09:42.000Z","dependencies_parsed_at":"2022-08-25T12:22:18.889Z","dependency_job_id":null,"html_url":"https://github.com/AltSchool/ember-cli-react","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltSchool%2Fember-cli-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltSchool%2Fember-cli-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltSchool%2Fember-cli-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltSchool%2Fember-cli-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AltSchool","download_url":"https://codeload.github.com/AltSchool/ember-cli-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254036812,"owners_count":22003655,"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-08-04T01:01:15.101Z","updated_at":"2025-05-13T22:30:39.933Z","avatar_url":"https://github.com/AltSchool.png","language":"JavaScript","readme":"**Experimental Addon**\n\nThis was built as a prototype to evaluate using React inside of our Ember apps.\nWe are not yet using it in production. PRs and constructive questions and\ncomments via [GitHub\nissues](https://github.com/AltSchool/ember-cli-react/issues/new) are highly\nencouraged.\n\n# ember-cli-react\n\n[![Circle CI](https://circleci.com/gh/AltSchool/ember-cli-react.svg?style=shield)](https://circleci.com/gh/AltSchool/ember-cli-react)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nUse clean React component hierarchies inside your Ember app.\n\n## Install\n\nInstall the addon in your app:\n\n```\nember install ember-cli-react\n```\n\nIf you prefer npm/yarn install (the following is similar with above):\n\n```\nyarn add --dev ember-cli-react\n\n# This triggers addon blueprint to do necessary setup\nember generate ember-cli-react\n```\n\n**NOTE**: `ember-cli-react` relies on a custom resolver to discover components.\nIf you have installed `ember-cli-react` with the standard way then you should be\nfine. Otherwise, you will need to manually update the first line of\n`app/resolver.js` to `import Resolver from 'ember-cli-react/resolver';`.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eUpgrading to 1.0\u003c/strong\u003e\u003c/summary\u003e\n\u003cp\u003e\n\n[`ember-browserify`](https://github.com/ef4/ember-browserify) has been replaced\nwith [`ember-auto-import`](https://github.com/ef4/ember-auto-import). To migrate\nto 1.0, there are several steps you need to take:\n\n1.  Remove `ember-browserify` from your project's `package.json` (if no other\n    addon is using).\n2.  Install latest `ember-cli-react` and make sure blueprint is run `ember generate ember-cli-react`.\n3.  Remove `npm:` prefix from all import statements.\n\nThen you should be good to go :)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n## Usage\n\nWrite your React component as usual:\n\n```jsx\n// app/components/say-hi.jsx\nimport React from 'react';\n\nconst SayHi = props =\u003e \u003cspan\u003eHello {props.name}\u003c/span\u003e;\n\nexport default SayHi;\n```\n\nThen render your component in a handlebars template:\n\n```handlebars\n{{say-hi name=\"Alex\"}}\n```\n\n**NOTE**: Currently, `ember-cli-react` recognizes React components with `.jsx`\nextension only.\n\n## Block Form\n\nYour React component can be used in block form to allow composition with\nexisting Ember or React components.\n\n```handlebars\n{{#react-panel}}\n  {{ember-say-hi name=\"World!\"}}\n{{/react-panel}}\n```\n\nThe children of `react-panel` will be populated to `props.children`.\n\nNote that if the children contains mutating structure (e.g. `{{if}}`,\n`{{each}}`), you need to wrap them in a stable tag to work around [this Glimmer\nissue](https://github.com/yapplabs/ember-wormhole/issues/66#issuecomment-263575168).\n\n```handlebars\n{{#react-panel}}\n  \u003cdiv\u003e\n    {{#if isComing}}\n      {{ember-say-hi name=\"World!\"}}\n    {{else}}\n      See ya!\n    {{/if}}\n  \u003c/div\u003e\n{{/react-panel}}\n```\n\nAlthough this is possible, block form should be used as a tool to migrate Ember\nto React without the hard requirement to start with leaf components. It is\nhighly recommended to have clean React component tree whenever possible for best\nperformance.\n\n## PascalCase File Naming\n\nYou can name your React component files using either the Ember convention of\n[`kebab-case`](https://ember-cli.com/naming-conventions) or the React convention\nof [`PascalCase`](https://github.com/airbnb/javascript/tree/master/react#naming)\n.\n\n```handlebars\n{{!-- Both `user-avatar.jsx` and `UserAvatar.jsx` work --}}\n{{user-avatar}}\n```\n\nReferencing your React components with `PascalCase` in handlebars is also\nsupported when invoked using `react-component`.\n\n```handlebars\n{{!-- OK! --}}\n{{react-component \"user-avatar\"}}\n\n{{!-- OK! --}}\n{{react-component \"UserAvatar\"}}\n\n{{!-- Single worded components are OK too! --}}\n{{react-component \"Avatar\"}}\n```\n\n### React Components are Prioritized\n\nWhenever there is a conflict, component files with React-style convention will\nbe used.\n\nExamples:\n\n- When both `SameName.jsx` and `same-name.jsx` exist, `SameName.jsx` will be\n  used\n- When both `SameName.jsx` and `same-name.js` (Ember) exist, `SameName.jsx`\n  will be used\n\n#### Known issue\n\nIf an Ember component and a React component has exactly the same name but\ndifferent extension (`same-name.js` and `same-name.jsx`), the file with `.js`\nextension will be overwritten with the output of `same-name.jsx`. We are still\nlooking at ways to resolve this.\n\n## A More Complete Example\n\nA more complete example which demonstrates data binding and how to handle\nactions from within React components.\n\n#### app/templates/application.hbs\n\n```handlebars\n{{todo-list\n  onToggle=(action onToggle)\n  todos=model\n}}\n\nCompleted {{completedTodos.length}} todos\n```\n\n#### app/components/todo-list.jsx\n\n```jsx\nimport React from 'react';\nimport TodoItem from './todo-item';\n\nexport default function(props) {\n  return (\n    \u003cul\u003e\n      {props.todos.map(todo =\u003e {\n        return \u003cTodoItem key={todo.id} todo={todo} onToggle={props.onToggle} /\u003e;\n      })}\n    \u003c/ul\u003e\n  );\n}\n```\n\n#### app/components/todo-item.jsx\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nexport default class TodoItem extends React.Component {\n  render() {\n    let todo = this.props.todo;\n\n    return (\n      \u003cli\u003e\n        \u003cinput\n          type=\"checkbox\"\n          checked={todo.isComplete}\n          onChange={this.props.onToggle.bind(null, todo.id)}\n        /\u003e\n        \u003cspan\u003e{todo.text}\u003c/span\u003e\n      \u003c/li\u003e\n    );\n  }\n}\n```\n\n## What's Missing\n\nThere is no React `link-to` equivalent for linking to Ember routes inside of\nyour React code. Instead pass action handlers that call `transitionTo` from an\nEmber route or component.\n\nIn order to create minified production builds of React you must set\n`NODE_ENV=production`.\n","funding_links":[],"categories":["Packages"],"sub_categories":["External Components Integration"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAltSchool%2Fember-cli-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAltSchool%2Fember-cli-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAltSchool%2Fember-cli-react/lists"}