# Phoenix.React

Use React as Template Engine in Phoenix applications.

## Usage

```elixir
# web/controllers/page_controller.ex
def index(conn, _params) do
  render conn, serializable: [
    title: "Hello :)",
    content: "This is isomorphic application."
  ]
end
```

```jsx
/* web/templates/index.html.jsx */
export default function IndexPage({ title }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}
```



## Installation

If [available in Hex](https://hex.pm/docs/publish), the package can be installed as:

  1. Add `phoenix_react` to your list of dependencies in `mix.exs`:

  ```elixir
  def deps do
    [{:phoenix_react, "~> 0.1.0"}]
  end
  ```

  2. Ensure `phoenix_react` is started before your application:

  ```elixir
  def application do
    [applications: [:phoenix_react]]
  end
  ```

  3. Install NPM packages

  ```bash
  npm install react react-dom babel-register --save
  ```

## Setup

#### Compilers
In order to use Phoenix.React, we need to add it to the compilers:

```elixir
# mix.esx
def project do
    [app: :our_app,
    ...
    compilers: [:phoenix, :gettext, :phoenix_react] ++ Mix.compilers ++ [:phoenix_react_components]
    ...]
end
```

We need to put `:phoenix_react_components` after `Mix.compilers` because the all view modules must be compiled before we run `:phoenix_react_components` compiler.

#### Code reload
This is to make javascript file to be generated every time we change components.

```elixir
# config/dev.exs
config :our_app, MyApp.Endpoint,
  reloadable_compilers: [:gettext, :phoenix, :phoenix_react, :elixir, :phoenix_react_components]
```

#### Supervisor
Add `Phoenix.React` to supervisor tree in `lib/our_app.ex`

```elixir
# lib/our_app.ex
[...]
children = [
  # Start the Ecto repository
  supervisor(OurApp.Repo, []),
  # Start the endpoint when the application starts
  supervisor(OurApp.Endpoint, []),
  # Call start_link function in Phoenix.Worker.Supervisor
  worker(Phoenix.Worker.Supervisor, [])
]
[...]
```


#### Views
Use `Phoenix.React.View` in `view/0` in `web.ex` 

```elixir
def view do
  quote do
    [...]
    use Phoenix.React.View, root: "web/templates" # or "web/static/js/components"
  end
end
```