-
-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
change(ServerSide): Remove server side rendering code (#24)
* Remove server-side rendering code for now It never really worked correctly. In order to get it working correctly, some fiddliness would have to be done to get react stdio working correctly. Then, in order for the compiled react components to be able to be rendered, the compiled render path would have to be inside node_modules. I don't think that is a great solution, and so to reduce confusion in the package, let's remove it and make it experimental instead. * update mod * update npm packages * Update README and add Phoenix 1.2-specific README * Remove old server-side tests * correct version numbers in readme * Correct paths in readme * Add link to server-side rendering release 0.4.3
- Loading branch information
Showing
11 changed files
with
3,016 additions
and
360 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,177 @@ | ||
# ReactPhoenix for Phoenix < 1.3 | ||
|
||
[![Build Status](https://travis-ci.org/geolessel/react-phoenix.svg?branch=master)](https://travis-ci.org/geolessel/react-phoenix) | ||
[![Hex.pm](https://img.shields.io/hexpm/v/react_phoenix.svg)](https://hex.pm/packages/react_phoenix) | ||
|
||
Functions to make rendering React.js components easy in Phoenix. | ||
|
||
Combined with the javascript also included in this package, rendering React | ||
components in your Phoenix views is now much easier. The module was built | ||
with Brunch in mind (vs Webpack). Since Phoenix uses Brunch by default, this | ||
package can make getting React into your application much faster than | ||
switching over to a different system. | ||
|
||
## Installation in 3 (or 4) EASY STEPS! | ||
|
||
This package is meant to be quick and painless to install into your Phoenix | ||
application. It is assumed that you have already brought React into your | ||
application through `npm`. | ||
|
||
> Would you rather watch a video? Watch me set it all up from `mix phoenix.new` to rendering | ||
> a React component in 4 minutes [here](https://youtu.be/icwjAbck8yk). | ||
### 1. Declare the dependency | ||
|
||
The package can be installed by adding `react_phoenix` to your list of | ||
dependencies in `mix.exs`: | ||
|
||
```elixir | ||
def deps do | ||
[{:react_phoenix, "~> 0.4.3"}] | ||
end | ||
``` | ||
|
||
After adding to your mix file, run: | ||
|
||
``` | ||
> mix deps.get | ||
``` | ||
|
||
### 2. Add the javascript dependency to package.json | ||
|
||
In order to correctly render a React component in your view templates, a | ||
provided javascript file must be included in your `package.json` file in | ||
the dependencies section. It might look like this: | ||
|
||
``` | ||
{ | ||
... | ||
"dependencies": { | ||
"babel-preset-react": "^6.23.0", | ||
"minions.css": "^0.3.1", | ||
"phoenix": "file:deps/phoenix", | ||
"phoenix_html": "file:deps/phoenix_html", | ||
"react": "^15.4.2", | ||
"react-dom": "^15.4.2", | ||
"react-phoenix": "file:deps/react_phoenix" <-- ADD THIS! | ||
}, | ||
... | ||
} | ||
``` | ||
|
||
Then run | ||
``` | ||
> npm install | ||
``` | ||
|
||
|
||
### 3. Import and initialize the javascript helper | ||
|
||
In your main application javascript file (usually `web/static/js/app.js`), add the | ||
following line: | ||
|
||
```javascript | ||
import "react-phoenix" | ||
``` | ||
|
||
|
||
### 4. (optional) Import the module into your views for less typing | ||
|
||
If you'd like to just call `react_component(...)` in your views instead of the full | ||
`ReactPhoenix.ClientSide.react_component(...)`, you can import `ReactPhoenix.ClientSide` | ||
into your `web/web.ex` views section. It might look like this: | ||
|
||
```elixir | ||
def view do | ||
quote do | ||
use Phoenix.View, root: "web/templates" | ||
|
||
import Phoenix.Controller, only: [get_csrf_token: 0, get_flash: 2, view_module: 1] | ||
|
||
use Phoenix.HTML | ||
|
||
import MyPhoenixApp.Router.Helpers | ||
import MyPhoenixApp.ErrorHelpers | ||
import MyPhoenixApp.Gettext | ||
|
||
import ReactPhoenix.ClientSide # <-- ADD THIS! | ||
end | ||
end | ||
``` | ||
|
||
|
||
## Usage | ||
|
||
Once installed, you can use `react_component` in your views by: | ||
|
||
1. Making sure that the component you'd like rendered is in the global namespace. | ||
You can do that in `app.js` like this (for example): | ||
|
||
```javascript | ||
import MyComponent from "./components/my_component" | ||
window.Components = { | ||
MyComponent | ||
} | ||
``` | ||
|
||
2. In your view template, you can then render it like this: | ||
|
||
```elixir | ||
# with no props | ||
<%= ReactPhoenix.ClientSide.react_component("Components.MyComponent") %> | ||
|
||
# with props | ||
<%= ReactPhoenix.ClientSide.react_component("Components.MyComponent", %{language: "elixir", awesome: true}) %> | ||
|
||
# with props and a target html element id option | ||
<span id="my-react-span"></span> | ||
<%= ReactPhoenix.ClientSide.react_component("Components.Characters", %{people: people}, target_id: "my-react-span") %> | ||
``` | ||
|
||
This will render a special `div` element in your html output that will then be recognized by the | ||
javascript helper as a div that should be turned into a React component. It will then render the | ||
named component in that `div` (or a different element specified by ID via the `target_id` option). | ||
|
||
|
||
## Troubleshooting | ||
|
||
* **I keep getting a compilation error like this** | ||
|
||
``` | ||
19 Apr 20:52:40 - error: Compiling of web/static/js/component.js failed. SyntaxError: web/static/js/component.js: Unexpected token (10:6) | ||
8 | render() { | ||
9 | return ( | ||
> 10 | <h1>You rendered React!</h1> | ||
| ^ | ||
11 | ) | ||
12 | } | ||
13 | } ^G | ||
``` | ||
|
||
Most likely, you haven't set up your brunch config to know how to handle JSX files. I recommend | ||
the following: | ||
|
||
1. Run `npm install react babel-preset-react babel-preset-env --save` | ||
2. Modify your `brunch-config.js` file to include those presets | ||
|
||
```js | ||
// ... | ||
// Configure your plugins | ||
plugins: { | ||
babel: { | ||
presets: ["env", "react"], // <-- ADD THIS! | ||
// Do not use ES6 compiler in vendor code | ||
ignore: [/web\/static\/vendor/] | ||
} | ||
}, | ||
// ... | ||
``` | ||
|
||
|
||
## Documentation and other stuff | ||
|
||
This package is heavily inspired by the [react-rails](https://github.com/reactjs/react-rails) project. | ||
|
||
For more detailed documentation, check out the hex docs at | ||
[https://hexdocs.pm/react_phoenix](https://hexdocs.pm/react_phoenix) |
Oops, something went wrong.