Skip to content

Commit 90bcbe9

Browse files
MargaretKrutikovaMargaretKrutikova
committed
Add initial react starter template
1 parent 9c9867a commit 90bcbe9

File tree

9 files changed

+180
-0
lines changed

9 files changed

+180
-0
lines changed

‎jscomp/bsb/templates/react-starter/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.DS_Store
2+
.merlin
3+
.bsb.lock
4+
npm-debug.log
5+
/lib/bs/
6+
/node_modules/
7+
*.bs.js

‎jscomp/bsb/templates/react-starter/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Reason react starter
2+
3+
## Run Project
4+
5+
```sh
6+
npm install
7+
npm start
8+
# in another tab
9+
npm run server
10+
```
11+
12+
View the app in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
13+
14+
To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 npm run server`).
15+
16+
## Build for Production
17+
18+
```sh
19+
npm run clean
20+
npm run build
21+
npm run webpack:production
22+
```
23+
24+
This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`).
25+
26+
**To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code.

‎jscomp/bsb/templates/react-starter/bsconfig.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "reason-react-starter",
3+
"reason": {
4+
"react-jsx": 3
5+
},
6+
"sources": {
7+
"dir": "src",
8+
"subdirs": true
9+
},
10+
"bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
11+
"package-specs": [
12+
{
13+
"module": "commonjs",
14+
"in-source": true
15+
}
16+
],
17+
"suffix": ".bs.js",
18+
"namespace": true,
19+
"bs-dependencies": ["reason-react"],
20+
"refmt": 3
21+
}

‎jscomp/bsb/templates/react-starter/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "${bsb:name}",
3+
"version": "${bsb:proj-version}",
4+
"scripts": {
5+
"build": "bsb -make-world",
6+
"start": "bsb -make-world -w -ws _ ",
7+
"clean": "bsb -clean-world",
8+
"webpack": "webpack -w",
9+
"webpack:production": "NODE_ENV=production webpack",
10+
"server": "webpack-dev-server",
11+
"test": "echo \"Error: no test specified\" && exit 1"
12+
},
13+
"keywords": [
14+
"BuckleScript",
15+
"ReasonReact",
16+
"reason-react"
17+
],
18+
"author": "",
19+
"license": "MIT",
20+
"dependencies": {
21+
"react": "^16.8.1",
22+
"react-dom": "^16.8.1",
23+
"reason-react": ">=0.7.0"
24+
},
25+
"devDependencies": {
26+
"bs-platform": "^${bsb:bs-version}",
27+
"webpack": "^4.0.1",
28+
"webpack-cli": "^3.1.1",
29+
"webpack-dev-server": "^3.1.8",
30+
"html-webpack-plugin": "^3.2.0",
31+
"style-loader": "^1.0.0",
32+
"css-loader": "^3.2.0"
33+
}
34+
}

‎jscomp/bsb/templates/react-starter/src/App.re

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
type state = {count: int};
2+
3+
type action =
4+
| Increment
5+
| Decrement;
6+
7+
let initialState = {count: 0};
8+
9+
let reducer = (state, action) =>
10+
switch (action) {
11+
| Increment => {count: state.count + 1}
12+
| Decrement => {count: state.count - 1}
13+
};
14+
15+
[@react.component]
16+
let make = () => {
17+
let (state, dispatch) = React.useReducer(reducer, initialState);
18+
19+
<main>
20+
{React.string("Simple counter with reducer")}
21+
<div>
22+
<button onClick={_ => dispatch(Decrement)}>
23+
{React.string("Decrement")}
24+
</button>
25+
<span> {state.count |> string_of_int |> React.string} </span>
26+
<button onClick={_ => dispatch(Increment)}>
27+
{React.string("Increment")}
28+
</button>
29+
</div>
30+
</main>;
31+
};

‎jscomp/bsb/templates/react-starter/src/Index.re

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[%bs.raw {|require("./index.css")|}];
2+
3+
ReactDOMRe.renderToElementWithId(<App />, "root");

‎jscomp/bsb/templates/react-starter/src/index.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
main {
11+
padding: 20px;
12+
}

‎jscomp/bsb/templates/react-starter/src/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Reason react starter</title>
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script src="/Index.js"></script>
10+
</body>
11+
</html>

‎jscomp/bsb/templates/react-starter/webpack.config.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const path = require("path")
2+
const HtmlWebpackPlugin = require("html-webpack-plugin")
3+
const outputDir = path.join(__dirname, "build/")
4+
5+
const isProd = process.env.NODE_ENV === "production"
6+
7+
module.exports = {
8+
entry: "./src/Index.bs.js",
9+
mode: isProd ? "production" : "development",
10+
devtool: "source-map",
11+
output: {
12+
path: outputDir,
13+
filename: "Index.js"
14+
},
15+
plugins: [
16+
new HtmlWebpackPlugin({
17+
template: "src/index.html",
18+
inject: false
19+
})
20+
],
21+
devServer: {
22+
compress: true,
23+
contentBase: outputDir,
24+
port: process.env.PORT || 8000,
25+
historyApiFallback: true
26+
},
27+
module: {
28+
rules: [
29+
{
30+
test: /\.css$/,
31+
use: ["style-loader", "css-loader"]
32+
}
33+
]
34+
}
35+
}

0 commit comments

Comments
 (0)