Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
68 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,22 @@ | ||
# ${bsb:name} | ||
|
||
## Run this project: | ||
## Run Project | ||
|
||
``` | ||
```sh | ||
npm install | ||
npm start | ||
# in another tab | ||
npm run webpack | ||
``` | ||
After you see the webpack compilation succeed (the `npm run webpack` step), open up the nested html files in `src/*` (**no server needed!**). Then modify whichever file in `src` and refresh the page to see the changes. | ||
After you see the webpack compilation succeed (the `npm run webpack` step), open up `src/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes. | ||
|
||
**For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example | ||
|
||
## Build this project | ||
## Build for Production | ||
|
||
``` | ||
```sh | ||
npm run build | ||
npm run webpack:build | ||
npm run webpack:production | ||
``` | ||
|
||
This will replace the development artifact `build/Index.js` for an optimized version. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
/* State declaration */ | ||
type state = { | ||
count: int, | ||
show: bool, | ||
}; | ||
|
||
/* Action declaration */ | ||
type action = | ||
| Click | ||
| Toggle; | ||
|
||
/* Component template declaration. | ||
Needs to be **after** state and action declarations! */ | ||
let component = ReasonReact.reducerComponent("Example"); | ||
|
||
/* greeting and children are props. `children` isn't used, therefore ignored. | ||
We ignore it by prepending it with an underscore */ | ||
let make = (~greeting, _children) => { | ||
/* spread the other default fields of component here and override a few */ | ||
...component, | ||
|
||
initialState: () => {count: 0, show: true}, | ||
|
||
/* State transitions */ | ||
reducer: (action, state) => | ||
switch (action) { | ||
| Click => ReasonReact.Update({...state, count: state.count + 1}) | ||
| Toggle => ReasonReact.Update({...state, show: ! state.show}) | ||
}, | ||
|
||
render: self => { | ||
let message = | ||
"You've clicked this " ++ string_of_int(self.state.count) ++ " times(s)"; | ||
<div> | ||
<button onClick=(_event => self.send(Click))> | ||
(ReasonReact.stringToElement(message)) | ||
</button> | ||
<button onClick=(_event => self.send(Toggle))> | ||
(ReasonReact.stringToElement("Toggle greeting")) | ||
</button> | ||
( | ||
self.state.show ? | ||
ReasonReact.stringToElement(greeting) : ReasonReact.nullElement | ||
) | ||
</div>; | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,3 @@ | ||
ReactDOMRe.renderToElementWithId(<Page message="Hello!" />, "index"); | ||
ReactDOMRe.renderToElementWithId(<Component1 message="Hello!" />, "index1"); | ||
|
||
ReactDOMRe.renderToElementWithId(<Component2 greeting="Hello!" />, "index2"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters