|
1 | 1 | # purescript-react-basic
|
2 | 2 |
|
3 |
| -[](https://travis-ci.org/lumihq/purescript-react-basic) |
| 3 | +[](https://travis-ci.org/lumihq/purescript-react-basic) |
4 | 4 |
|
5 |
| -This package implements an opinionated set of bindings over [React](https://reactjs.org), optimizing for correctness and simplifying basic use cases. |
| 5 | +There's a brief section on getting started below. For a more complete guide, check out the React Basic [docs](https://react-basic-starter.github.io/)! (work in progress) |
6 | 6 |
|
7 |
| -_A note about React hooks: Hooks are arriving in stable React soon. The API presented here is the more traditional `setState`+lifecycles style React's had for a long time. If you'd like to experiment with the hooks API in react-basic, have a look at [react-basic-hooks](https://github.com/spicydonuts/purescript-react-basic-hooks). It can be installed and used along side this library, but don't forget it's a preview release!_ |
| 7 | +## Getting Started |
8 | 8 |
|
9 |
| -## Features |
| 9 | +This library contains the core types and tools used by the rest of the React Basic ecosystem. To use React Basic in your applications you'll also need to choose one or more _implementations_ as well as a target environment! |
10 | 10 |
|
11 |
| -- All React DOM elements and attributes are supported (soon, events are a work in progress). |
12 |
| -- An intuitive API for specifying props - simple records, no arrays of key value pairs. |
13 |
| -- Attributes are optional, but type-checked. It is a type error to specify `href` as an integer, for example. |
14 |
| -- Both `setState` and an action/update pattern for local component state, inspired by [ReasonReact](https://reasonml.github.io/reason-react/). |
15 |
| -- React lifecycles are available, but not in your way when you don't need them. |
| 11 | +_Note: The Hooks and Classic implementations can both be used in the same project_ |
16 | 12 |
|
17 |
| -## Getting Started |
| 13 | +Implementations: |
| 14 | + |
| 15 | +- [`react-basic-hooks`](https://github.com/spicydonuts/purescript-react-basic-hooks) |
| 16 | + - PureScript types for building components using React hooks, as well as creating custom hooks. |
| 17 | +- [`react-basic-classic`](https://github.com/lumihq/purescript-react-basic-classic) _(this implementation was previously included in the `React.Basic` module)_ |
| 18 | + - PureScript types for the more traditional class-based React API. Very similar to the Reason-React API. |
| 19 | + |
| 20 | +Environments: |
| 21 | + |
| 22 | +- [`react-basic-dom`](https://github.com/lumihq/purescript-react-basic-dom) |
| 23 | +- [`react-basic-native`](https://github.com/f-f/purescript-react-basic-native) |
| 24 | + |
| 25 | +For example, to use the `react-basic` hooks implementation for web development in a `spago` app: |
| 26 | + |
| 27 | +```sh |
| 28 | +npm i -S react react-dom |
| 29 | +spago install react-basic react-basic-dom react-basic-hooks |
| 30 | +``` |
18 | 31 |
|
19 |
| -You can install this package using Bower: |
| 32 | +Or using `bower`: |
20 | 33 |
|
21 | 34 | ```sh
|
22 |
| -bower install --save purescript-react-basic |
| 35 | +npm i -S react react-dom |
| 36 | +bower i -S purescript-react-basic purescript-react-basic-dom purescript-react-basic-hooks |
23 | 37 | ```
|
24 | 38 |
|
25 |
| -Or clone/fork the [starter project](https://github.com/lumihq/react-basic-starter). |
| 39 | +## Upgrading from React Basic v14 |
26 | 40 |
|
27 |
| -See [the documentation](https://pursuit.purescript.org/packages/purescript-react-basic/docs/React.Basic) for an overview of the API or take a look at these examples: |
| 41 | +The `React.Basic.DOM` modules have been moved to [`react-basic-dom`](https://github.com/lumihq/purescript-react-basic-dom). This doesn't require any code changes, but you will need to add this dependency to your projects. |
28 | 42 |
|
29 |
| -- [A counter](./examples/counter/src/Counter.purs) |
30 |
| -- [A controlled input](./examples/controlled-input/src/ControlledInput.purs) |
31 |
| -- [Components](./examples/component/src/ToggleButton.purs) in [components](./examples/component/src/Container.purs) |
32 |
| -- [Using action/update](./examples/actions/src/Actions.purs) |
| 43 | +The component implementation previously in `React.Basic` has been extracted to [`react-basic-classic`](https://github.com/lumihq/purescript-react-basic-classic), which now provides the `React.Basic.Classic` module. Just install that library and find/replace `^import\sReact\.Basic\s` with `import React.Basic.Classic`. |
33 | 44 |
|
34 |
| -## Migrating from v7 to v8 |
| 45 | +If you were using the `React.Basic.Compat` module, that module has been moved to [`react-basic-compat`](https://github.com/lumihq/purescript-react-basic-compat). |
35 | 46 |
|
36 |
| -v8 removes the required `update` function from the component spec and replaces `send self Action` with the `self.setState` API. Existing components using `update` can create a `send` function using the `runUpdate` function added in v8. See [the actions example](./examples/actions/src/Actions.purs) for an example of this. Alternatively, [this comment](https://github.com/lumihq/purescript-react-basic/pull/73#issuecomment-456486249) shows a few other possible upgrade paths. |
| 47 | +If you were using [`react-basic-hooks`](https://github.com/spicydonuts/purescript-react-basic-hooks) exclusively everything should work as-is. |
37 | 48 |
|
38 |
| -## Migrating from v2/v3 |
| 49 | +## Where did the examples folder go? |
39 | 50 |
|
40 |
| -`React.Basic.Compat` is a new (but deprecated) module. It matches most of the old API and types (except `setStateThen` and `isFirstMount`) to make upgrading easier and more gradual. You can find `^import\sReact\.Basic\b` and replace with `import React.Basic.Compat`, upgrade the package version, and proceed from there one component at a time (or only new components). See the documentation link above for more info on the new API. |
| 51 | +Because this library no longer contains a specific implementation and the example structure contained a fair bit of boilerplate, they've been removed in favor of a consolidated documentation site (linked above). This is still a work in progress but you can refer to the [v14 examples](https://github.com/lumihq/purescript-react-basic/tree/v14.0.0/examples) in the meantime. |
0 commit comments