ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›Recent Posts

Recent Posts

  • Support for the JSX transform under a new name `reason-react-ppx`
  • ReasonReact is back (and powered by Melange)
  • We are rebranding to ReScript / React
  • ReasonReact 0.9.0 - Uncurried and Code Cleanup
  • ReasonReact 0.8.0 🎉 BuckleScript Upgrade & More!

RR 0.3.0 - Power Children

November 17, 2017

0.3.0 is here! We've bumped the minor version because it's a breaking change (just a small one, see HISTORY.md. We've been really careful with breaking changes). Stay tuned for more exciting features coming in the next few weeks (non-breaking). In the meantime, here's the big improvement of this release: you're now allowed to pass any data type to JSX children, not just array(reactElement). And yes, they all type check, naturally!

Head over to the improved JSX docs and then Children docs to know the details. Here's a summary.

Previously, <Comp> child1 child2 </Comp> desugars to passing an array of [|child1, child2|] to Comp as children. This is likewise the case for <Comp> child1 </Comp> where, due to syntax constraints, we're still passing an array of [|child1|] to Comp. Since Reason 3, we've introduced the children spread syntax which simply makes <Comp> ...child1 </Comp> not pass the array wrapper, but directly child1, to children.

What does this unlock? Crazy tricks like these:

  • A form component that mandates a tuple of 2 react element and shows them side-by-side:

    <MyForm> ...(<div />, <div />) </MyForm>
    
  • A component that mandates a callback, no need for ReactJS' React.Children.only runtime check:

    <Motion> ...((name) => <div className=name />) </Motion>
    
  • A layout helper that accepts a variant of TwoRows | ThreeRows | FourColumns

    <Layout> ...(ThreeRows(<div />, child2, child3)) </Layout>
    

The type system will ensure that the data you're passing matches its usage inside these component. No need to explicitly annotate them unless you want to.

In reality, this change was around 2 or 3 lines of code (albeit with lots of thinking time). It's a nice indicator of us leveraging the language itself rather than reinventing such concept within the framework. Notice also that the new spread syntax addition is still ReasonReact-agnostic (under the hood, the children label simply isn't passed a wrapper list/array in the presence of ...). This kind of simple, gradual and vertically-integrated-yet-agnostic improvement is a large part of what we're hoping to do more in the future.

New Docs Site

October 2, 2017

The ReactJS doc site has also been updated last friday by pure coincidence. No conspiracy theory!

Do you like the new look? There's been quite a bit of iterations on the new docs, with an eye toward settings up site templates for our future libraries API docs effort (more on that another time). Meawhile, true to our community's spirit:

  • The new docs site is much more readable, and just as simple, lean, fast, and easy to read and contribute to.
  • It's done by a prominent community member, @rickyvetter, who took every nit seriously and cleaned up every corner of the documentation layout, formatting, responsiveness, reorganization, etc. Quality open source contribution right here =)
  • The existing links are preserved and show you the correct page to redirect to. Take your time migrating your links to the new ones; we'll keep them around for a while.
  • We care about our community across the globe! There is now dedicated translation support. Click on that symbol on the upper right corner! Translating the docs is a good way to learning. Just ask @charles_mangwa who learned Reason by translating the Reason docs to French.
  • Works with JavaScript off (falls out naturally from the doc site architecture).

This community is the best part of Reason. In the end, it's all about people. Tweet to @rickyvetter to show some thanks for his excellent work! It makes contributing in his free time much more worthwhile.

Reducers Are Here!

September 1, 2017

v0.2.4 was done in collaboration with the ReactJS team.

This is a release we've been planning for quite a while now, and is one that embodies what the Reason team is trying to achieve through ReasonReact.

First, a bit of context: if you use ReactJS, then you've likely heard of the the massively popular Redux state management library. Redux's original inspiration comes from Elm, whose root we share.

Read More

0.2.1 Released

July 5, 2017

Small new breaking release! We've provided a migration script. No big change except a better (and much demanded) self API. Enjoy!

0.1.5 Released

June 21, 2017

Thanks for the wait! Head over to HISTORY.md to see the changes. This is a small non-breaking release, though we did fix a ref-related issue that can cause type errors. The fix is trivial; see the notes.

We've batched together non-breaking features for your upgrading convenience. Next version will be a breaking one, with API tweaks that fix some of the existing pain points. Stay tuned!

Major New Release!

June 9, 2017

0.1.4 is released! We've got a new documentation website here, a brand new ReasonReact API, a smooth migration guide, and best of all: no breaking change! Head over to HISTORY.md for the incremental migration.

Read More
← Prev