{"id":13508156,"url":"https://github.com/geolessel/react-phoenix","last_synced_at":"2025-05-15T12:02:59.532Z","repository":{"id":20015713,"uuid":"88518596","full_name":"geolessel/react-phoenix","owner":"geolessel","description":"Make rendering React.js components in Phoenix easy","archived":false,"fork":false,"pushed_at":"2024-12-13T21:32:11.000Z","size":394,"stargazers_count":505,"open_issues_count":2,"forks_count":39,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-14T19:59:18.468Z","etag":null,"topics":["elixir","elixir-lang","phoenix","phoenix-framework","react","reactjs"],"latest_commit_sha":null,"homepage":"http://reactphoenix.com","language":"Elixir","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/geolessel.png","metadata":{"files":{"readme":"README-phoenix-1.2.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"geolessel"}},"created_at":"2017-04-17T14:53:23.000Z","updated_at":"2024-12-13T21:32:14.000Z","dependencies_parsed_at":"2025-04-14T18:17:37.862Z","dependency_job_id":"56485d0c-f484-4e72-8c18-52d2483db410","html_url":"https://github.com/geolessel/react-phoenix","commit_stats":{"total_commits":105,"total_committers":14,"mean_commits":7.5,"dds":0.2857142857142857,"last_synced_commit":"23728aae60cad3f478c06d1047f4b1a65d5c2b5a"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geolessel%2Freact-phoenix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geolessel%2Freact-phoenix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geolessel%2Freact-phoenix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geolessel%2Freact-phoenix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geolessel","download_url":"https://codeload.github.com/geolessel/react-phoenix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283300,"owners_count":22045136,"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":["elixir","elixir-lang","phoenix","phoenix-framework","react","reactjs"],"created_at":"2024-08-01T02:00:49.004Z","updated_at":"2025-05-15T12:02:59.453Z","avatar_url":"https://github.com/geolessel.png","language":"Elixir","funding_links":["https://github.com/sponsors/geolessel"],"categories":["Framework Components","Elixir"],"sub_categories":[],"readme":"# ReactPhoenix for Phoenix \u003c 1.3\n\n[![Build Status](https://travis-ci.org/geolessel/react-phoenix.svg?branch=master)](https://travis-ci.org/geolessel/react-phoenix)\n[![Hex.pm](https://img.shields.io/hexpm/v/react_phoenix.svg)](https://hex.pm/packages/react_phoenix)\n\nFunctions to make rendering React.js components easy in Phoenix.\n\nCombined with the javascript also included in this package, rendering React\ncomponents in your Phoenix views is now much easier. The module was built\nwith Brunch in mind (vs Webpack). Since Phoenix uses Brunch by default, this\npackage can make getting React into your application much faster than\nswitching over to a different system.\n\n## Installation in 3 (or 4) EASY STEPS!\n\nThis package is meant to be quick and painless to install into your Phoenix\napplication. It is assumed that you have already brought React into your\napplication through `npm`.\n\n\u003e Would you rather watch a video? Watch me set it all up from `mix phoenix.new` to rendering\n\u003e a React component in 4 minutes [here](https://youtu.be/icwjAbck8yk).\n\n### 1. Declare the dependency\n\nThe package can be installed by adding `react_phoenix` to your list of\ndependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [{:react_phoenix, \"~\u003e 0.4.3\"}]\nend\n```\n\nAfter adding to your mix file, run:\n\n```\n\u003e mix deps.get\n```\n\n### 2. Add the javascript dependency to package.json\n\nIn order to correctly render a React component in your view templates, a\nprovided javascript file must be included in your `package.json` file in\nthe dependencies section. It might look like this:\n\n```\n{\n  ...\n  \"dependencies\": {\n    \"babel-preset-react\": \"^6.23.0\",\n    \"minions.css\": \"^0.3.1\",\n    \"phoenix\": \"file:deps/phoenix\",\n    \"phoenix_html\": \"file:deps/phoenix_html\",\n    \"react\": \"^15.4.2\",\n    \"react-dom\": \"^15.4.2\",\n\n    \"react-phoenix\": \"file:deps/react_phoenix\" \u003c-- ADD THIS!\n  },\n  ...\n}\n```\n\nThen run\n```\n\u003e npm install\n```\n\n\n### 3. Import and initialize the javascript helper\n\nIn your main application javascript file (usually `web/static/js/app.js`), add the\nfollowing line:\n\n```javascript\nimport \"react-phoenix\"\n```\n\n\n### 4. (optional) Import the module into your views for less typing\n\nIf you'd like to just call `react_component(...)` in your views instead of the full\n`ReactPhoenix.ClientSide.react_component(...)`, you can import `ReactPhoenix.ClientSide`\ninto your `web/web.ex` views section. It might look like this:\n\n```elixir\ndef view do\n  quote do\n    use Phoenix.View, root: \"web/templates\"\n\n    import Phoenix.Controller, only: [get_csrf_token: 0, get_flash: 2, view_module: 1]\n\n    use Phoenix.HTML\n\n    import MyPhoenixApp.Router.Helpers\n    import MyPhoenixApp.ErrorHelpers\n    import MyPhoenixApp.Gettext\n\n    import ReactPhoenix.ClientSide # \u003c-- ADD THIS!\n  end\nend\n```\n\n\n## Usage\n\nOnce installed, you can use `react_component` in your views by:\n\n1. Making sure that the component you'd like rendered is in the global namespace.\n   You can do that in `app.js` like this (for example):\n   \n   ```javascript\n   import MyComponent from \"./components/my_component\"\n   window.Components = {\n     MyComponent\n   }\n   ```\n\n2. In your view template, you can then render it like this:\n\n   ```elixir\n   # with no props\n   \u003c%= ReactPhoenix.ClientSide.react_component(\"Components.MyComponent\") %\u003e\n\n   # with props\n   \u003c%= ReactPhoenix.ClientSide.react_component(\"Components.MyComponent\", %{language: \"elixir\", awesome: true}) %\u003e\n\n   # with props and a target html element id option\n   \u003cspan id=\"my-react-span\"\u003e\u003c/span\u003e\n   \u003c%= ReactPhoenix.ClientSide.react_component(\"Components.Characters\", %{people: people}, target_id: \"my-react-span\") %\u003e\n   ```\n   \n   This will render a special `div` element in your html output that will then be recognized by the\n   javascript helper as a div that should be turned into a React component. It will then render the\n   named component in that `div` (or a different element specified by ID via the `target_id` option).\n\n\n## Troubleshooting\n\n* **I keep getting a compilation error like this**\n\n  ```\n    19 Apr 20:52:40 - error: Compiling of web/static/js/component.js failed. SyntaxError: web/static/js/component.js: Unexpected token (10:6)\n     8 |   render() {\n     9 |     return (\n  \u003e 10 |       \u003ch1\u003eYou rendered React!\u003c/h1\u003e\n       |       ^\n    11 |     )\n    12 |   }\n    13 | } ^G\n  ```\n\n  Most likely, you haven't set up your brunch config to know how to handle JSX files. I recommend\n  the following:\n\n  1. Run `npm install react babel-preset-react babel-preset-env --save`\n  2. Modify your `brunch-config.js` file to include those presets\n\n      ```js\n      // ...\n      // Configure your plugins\n      plugins: {\n        babel: {\n          presets: [\"env\", \"react\"], // \u003c-- ADD THIS!\n          // Do not use ES6 compiler in vendor code\n          ignore: [/web\\/static\\/vendor/]\n        }\n      },\n      // ...\n      ```\n\n\n## Documentation and other stuff\n\nThis package is heavily inspired by the [react-rails](https://github.com/reactjs/react-rails) project.\n\nFor more detailed documentation, check out the hex docs at \n[https://hexdocs.pm/react_phoenix](https://hexdocs.pm/react_phoenix)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeolessel%2Freact-phoenix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeolessel%2Freact-phoenix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeolessel%2Freact-phoenix/lists"}