reason-react
Advanced tools
Comparing version 0.8.0-dev.4 to 0.8.0
@@ -29,3 +29,3 @@ --- | ||
/* file: index.js */ | ||
ReactDOM.render(<Greeting name="John"> document.getElementById("root")); | ||
ReactDOM.render(<Greeting name="John">, document.getElementById("root")); | ||
``` | ||
@@ -32,0 +32,0 @@ |
@@ -7,4 +7,8 @@ --- | ||
Reason's returns are implicit so you don't need to write `return`, it'll be the last item in the block: | ||
**Some things to note**: | ||
- Reason's `return` statements are implicit so you don't need to write `return`. It'll always be the last item in the block | ||
- Reason has labelled parameters (arguments) that are prefixed by a tilde, eg: `~message` | ||
- Since everything in ReasonReact is typed, we need to wrap our message in `React.string(message)` | ||
```reason | ||
@@ -11,0 +15,0 @@ /* Greeting.re */ |
@@ -33,3 +33,8 @@ --- | ||
onFocus | ||
onChange={event => onChange(ReactEvent.Form.target(event)##value)} | ||
onChange={ | ||
event => { | ||
let value = ReactEvent.Form.target(event)##value; | ||
onChange(_ => value) | ||
} | ||
} | ||
value | ||
@@ -36,0 +41,0 @@ /> |
@@ -15,3 +15,3 @@ # 0.8.0 (04/2020) | ||
* `bs-platform` has a minimum version of 7.0.1 (^7.0.1) [@imbsky in #503](https://github.com/reasonml/reason-react/pull/503) | ||
* `bs-platform` has a minimum version of 7.1.1 (^7.1.1) [@imbsky in #503](https://github.com/reasonml/reason-react/pull/503) | ||
* Adds `onInvalid` prop [@bsansouci in #364](https://github.com/reasonml/reason-react/pull/364) | ||
@@ -18,0 +18,0 @@ * Adds `React.float` and `React.int` [@utkarshkukreti in #420](https://github.com/reasonml/reason-react/pull/420) |
{ | ||
"name": "reason-react", | ||
"version": "0.8.0-dev.4", | ||
"version": "0.8.0", | ||
"description": "React bindings for Reason", | ||
@@ -5,0 +5,0 @@ "main": "lib/js/src/ReasonReact.js", |
@@ -1,5 +0,18 @@ | ||
# [ReasonReact](https://reasonml.github.io/reason-react/) | ||
# [ReasonReact](https://reasonml.github.io/reason-react/) - ReasonML / BuckleScript bindings for React.js | ||
[![Chat](https://img.shields.io/discord/235176658175262720.svg?logo=discord&colorb=blue)](https://discord.gg/reasonml) | ||
[![npm version](https://badge.fury.io/js/reason-react.svg)](https://www.npmjs.com/package/reason-react) | ||
![npm](https://img.shields.io/npm/dt/reason-react) | ||
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) | ||
![contributors](https://img.shields.io/github/contributors/reasonml/reason-react) | ||
[![discord](https://img.shields.io/discord/235176658175262720.svg?logo=discord&colorb=blue)](https://discord.gg/reasonml) | ||
[![twitter](https://img.shields.io/twitter/follow/reasonml?style=social)](https://twitter.com/reasonml) | ||
ReasonReact is a safer, simpler way to build React components. You get a great type system with an even better developer experience. Why choose ReasonReact? Read more [here](https://reasonml.github.io/reason-react/docs/en/what-and-why) | ||
ReasonReact is just React.js under the hood. This makes it super easy to integrate with your current Next.js, Create React App, JavaScript, Flowtype or TypeScript project. Learn more about getting started [here](https://reasonml.github.io/reason-react/docs/en/installation#adding-reason-to-an-existing-reactjs-project-create-react-app-nextjs-etc) | ||
> Watch Ricky Vetter's Reason Conf talk, ["Why React is Just Better in Reason"](https://www.youtube.com/watch?v=i9Kr9wuz24g) to learn more about how Facebook & Messenger are using ReasonReact | ||
> Watch Jordan Walke's Reason Conf talk, ["React to the Future"](https://www.youtube.com/watch?v=5fG_lyNuEAw) to learn more about the future of ReasonML and React | ||
## Example | ||
@@ -9,2 +22,3 @@ | ||
/* Greeting.re */ | ||
[@react.component] | ||
@@ -14,18 +28,23 @@ let make = (~name) => <h1> {React.string("Hello " ++ name)} </h1> | ||
in another file: | ||
See all of our examples [here](https://reasonml.github.io/reason-react/docs/en/simple). For a full application, check out [reason-react-hacker-news](https://github.com/reasonml-community/reason-react-hacker-news). | ||
```reason | ||
ReactDOMRe.renderToElementWithId(<Greeting name="Taylor" />, "root"); | ||
``` | ||
## Getting Started | ||
For a more in-depth example, see: https://github.com/reasonml-community/reason-react-hacker-news | ||
[BuckleScript](http://bucklescript.github.io/) is how your ReasonML code gets compiled to Javascript. Every project that uses BuckleScript will have a `bsconfig.json` file (the same way you'd have tsconfig.json in a Typescript project) with project specific settings. | ||
## Quick start | ||
You can install BuckleScript globally or keep it project specific by adding it as a `devDependency`: | ||
[BuckleScript](http://bucklescript.github.io/) compiles ReasonML code to JavaScript. You can get it with: | ||
```sh | ||
yarn global add bs-platform | ||
# or npm | ||
npm install --global bs-platform | ||
``` | ||
If you install BuckleScript globally, you can quickly generate a ReasonReact project template (similar to `create-react-app`): | ||
```sh | ||
npm install --global bs-platform | ||
bsb -init my-react-app -theme react-hooks | ||
cd my-react-app && npm install && npm start | ||
# in another tab | ||
@@ -35,8 +54,36 @@ npm run server | ||
If you're interested in adding ReasonReact to your current project, it's a simple 2 step process: | ||
``` | ||
yarn add bs-platform --dev --exact | ||
# or npm | ||
npm install bs-platform -D -S | ||
``` | ||
Add the appropriate script tags to package.json: | ||
```json | ||
"scripts": { | ||
"re:build": "bsb -make-world -clean-world", | ||
"re:watch": "bsb -make-world -clean-world -w" | ||
} | ||
``` | ||
Copy the `bsconfig.json` file from our docs located [here](https://reasonml.github.io/reason-react/docs/en/installation#adding-reason-to-an-existing-reactjs-project-create-react-app-nextjs-etc) | ||
Then add some files somewhere (don't forget to change `bsconfig.json`, if needed). | ||
## Using Your Favorite Javascript Libraries | ||
The same way that TypeScript has `type annotations`, we have `bindings`. Bindings are libraries that allow you to import a popular project (like lodash) or to import your own local file. ReasonReact is in fact an example of a binding! | ||
## Documentation | ||
See https://reasonml.github.io/reason-react/ | ||
See [https://reasonml.github.io/reason-react](https://reasonml.github.io/reason-react) | ||
## Contribute | ||
We welcome all contributors! Anything from docs to issues to pull requests. Please help us :smile: | ||
```sh | ||
@@ -49,4 +96,15 @@ git clone https://github.com/reasonml/reason-react.git | ||
Then add some files somewhere (don't forget to change `bsconfig.json`, if needed). | ||
See the README inside `src` for more info! | ||
See the README inside `src` for more info! | ||
## Editor Support | ||
Looking for syntax highlighting for your favorite editor? Check out [ReasonML Editor Plugins](https://reasonml.github.io/docs/en/editor-plugins) | ||
## Friends of ReasonReact | ||
- [genType](https://github.com/cristianoc/genType) - genType automatically generates bindings for your TypeScript / vanilla JS code. | ||
- [reason-react-native](https://github.com/reason-react-native/reason-react-native) - ReasonML / Bucklescript bindings for React Native. Allows you to use Reason to build an iOS, Android or Web app! | ||
- [reasonml.org](https://reasonml.org/) - An effort by the Reason Association to improve documentation for ReasonML & BuckleScript | ||
- [redex.github.io](https://redex.github.io/) - Find bindings for your favorite libraries here | ||
- [ReasonTown Podcast](https://anchor.fm/reason-town) - ReasonML Podcast | ||
- [ReasonConf Youtube](https://www.youtube.com/channel/UCtFP_Hn5nIbZY4Xi47qfHhw/videos) Reason Conf on Youtube |
514674
100
107