Github Stars:
Last Commit: 
Created: 
Overview
Reaxt is a library that allows you to integrate your React components into your Elixir application. It provides an isomorphic environment, meaning that your application can work seamlessly with both server-side Elixir and client-side JavaScript. With Reaxt, you can use any JavaScript compiled language and any JavaScript routing logic or library. It offers a nice development workflow with combined stacktrace, hot reloading, and an NPM/Webpack configuration. Reaxt also provides a user interface to view your compiled JavaScript application.
Features
- Use React components in your elixir application
- Isomorphic ready library for SEO and JS integration
- Use any JavaScript compiled language
- Use any JavaScript routing logic or library
- Use JS React rendered component only for parts of your webpage
- Fluent development workflow with combined stacktrace
- Hot loading on both server and browser
- NPM/Webpack as the only configuration for dependencies and compilation
- Cool UI for an overview of your compiled JavaScript application
Installation
- Add the Reaxt dependency to your
mix.exsfile and yourapplicationconfig.
defp deps do
[
{:reaxt, "~> 1.0"}
]
end
def application do
[
applications: [:reaxt]
]
end
- Add the Reaxt compiler to your project’s compilers. For Elixir versions prior to v1.0.3, use
:reaxtWebpackinstead of:reaxt_webpack.
def project do
[
...
compilers: [:reaxt_webpack | Mix.compilers(Mix.env)],
...
]
end
- In your
config.exsfile, link the Reaxt application to your application containing the JavaScript web app.
config :reaxt, :otp_app, :yourapp
- Create the necessary directory and file layout:
- Create a
webdirectory at the root of your project (MIXROOT/web). - In the
webdirectory, create apackage.jsonfile containing your app’s NPM dependencies. - In the
webdirectory, create awebpack.config.jsfile containing only the client-side logic. Use “reaxt/style” instead of “style” loader to load your CSS. A typical output path is ../priv/static. - In the
webdirectory, create acomponentsdirectory containing modules that export your React components.
- Create a
- In your Elixir code that generates HTML, add
WebPack.headerin the<head>section. - Add a script tag with the src attribute
/your/public/path/<%= WebPack.file_of(:entry_name) %>to include the JavaScript generated by Webpack. - Render your server-side HTML. The function returns a map with
html,css, andjs_renderkeys. You need to add the following to your HTML:- The CSS in a style tag:
<style><%= render.css %></style> - The HTML in an identified block:
<div id="myblockid"><%= render.html %></div> - The client-side rendering call with a script tag:
<script><%= render.js_render %>("myblockid")</script>
- The CSS in a style tag:
- Finally, serve the files generated by Webpack.
Summary
Reaxt is a library that allows you to seamlessly integrate React components into your Elixir application. With its isomorphic environment, you can use both server-side Elixir and client-side JavaScript to build your application. Reaxt provides a range of features including isomorphic compatibility, support for various JavaScript languages and routing logic, a fluent development workflow, and an easy installation process. By following the provided installation guide, you can quickly start using Reaxt in your Elixir application.
