DEV Community

Cover image for Introducing frender: React in rust
EqualMa
EqualMa

Posted on

Introducing frender: React in rust

✨ Four months ago, an idea came to me that maybe I could port React.js to rust with wasm-bindgen, regarding that functional components in React are just functions with special restrictions and wasm-bindgen supports casting between rust closures and js functions.

🎉 After 4 months of work, now I can proudly announce the alpha version of frender, standing for functional rendering. You can checkout some examples, or follow the guide in the GitHub README to write your first frender app!

📝 The future work will concentrate on the following goals:

  • Make the api stable
  • Integrate with webpack
  • Server side rendering (Maybe frender can integrate with Next.js)

❤️ frender is still in alpha and not ready for production yet. Pull requests, issues and donations are welcomed. I will continue work on this project with the support and suggestions from the community.

GitHub logo frender-rs / frender

react in rust

frender

Crates.io docs.rs GitHub license GitHub stars

frender logo

Functional Rendering: React in Rust

frender is still in alpha and it's api might change For now it is recommended to specify the exact version in Cargo.toml Before updating, please see the full changelog in case there are breaking changes.

Development is at alpha branch.

There are some example apps in examples folder. You can preview them at this site.

Contributing

frender is open sourced at GitHub Pull requests and issues are welcomed.

You can also sponsor me and I would be very grateful ❤️

Buy Me a Coffee at ko-fi.com

Quick Start

  1. Create a new cargo project

    cargo new my-frender-app
    cd my-frender-app
    Enter fullscreen mode Exit fullscreen mode
  2. Add frender to dependencies in Cargo.toml.

    [dependencies]
    frender = "= 1.0.0-alpha.7"
    Enter fullscreen mode Exit fullscreen mode
  3. Create index.html in the project root directory.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" /&gt
        <title>My frender App</title>
    Enter fullscreen mode Exit fullscreen mode

Top comments (0)