Reaxt

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.exs file and your application config.

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 :reaxtWebpack instead of :reaxt_webpack.

def project do
  [
    ...
    compilers: [:reaxt_webpack | Mix.compilers(Mix.env)],
    ...
  ]
end

In your config.exs file, 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 web directory at the root of your project (MIXROOT/web).
- In the web directory, create a package.json file containing your app’s NPM dependencies.
- In the web directory, create a webpack.config.js file 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 web directory, create a components directory containing modules that export your React components.
In your Elixir code that generates HTML, add WebPack.header in 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, and js_render keys. 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>
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.