Skip to content

Commit 5b83613

Browse files
committed
chore(examples): add quick start
1 parent a684a0a commit 5b83613

File tree

6 files changed

+10934
-0
lines changed

6 files changed

+10934
-0
lines changed

examples/quick-start/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
## Quick start for Backset
2+
3+
### About
4+
5+
This is a React project with Backset, you can learn how to use Backset with this project.
6+
7+
### Getting Started
8+
9+
First, run the development server:
10+
11+
```bash
12+
yarn && yarn dev
13+
# or
14+
npm i && npm run dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+

examples/quick-start/package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "quick-start",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"dev": "react-scripts start",
8+
"build": "react-scripts build"
9+
},
10+
"dependencies": {
11+
"backset": "latest",
12+
"react": "^16.13.1",
13+
"react-dom": "^16.13.1"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^16.9.32",
17+
"@types/react-dom": "^16.9.6",
18+
"react-scripts": "^3.4.1"
19+
},
20+
"browserslist": {
21+
"production": [
22+
">0.2%",
23+
"not dead",
24+
"not op_mini all"
25+
],
26+
"development": [
27+
"last 1 chrome version",
28+
"last 1 firefox version",
29+
"last 1 safari version"
30+
]
31+
}
32+
}
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+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Quick start for Backset</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
</body>
11+
</html>

examples/quick-start/src/app.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import Backset from 'backset'
3+
const { useStores, useUpdates, withContext } = Backset.create({
4+
title: 'Hello World',
5+
})
6+
7+
const Child = () => {
8+
const updates = useUpdates()
9+
return (
10+
<>
11+
<button onClick={() => updates.title('Hello Backset')}>
12+
Edit
13+
</button>
14+
<button onClick={() => updates.title('Hello World')}>
15+
Reset
16+
</button>
17+
</>
18+
)
19+
}
20+
21+
const App = () => {
22+
const { title } = useStores()
23+
return (
24+
<div>
25+
<p>{title}</p>
26+
<Child />
27+
</div>
28+
)
29+
}
30+
31+
export default withContext(App)

examples/quick-start/src/index.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import ReactDom from 'react-dom'
3+
import App from './app'
4+
5+
ReactDom.render(
6+
<React.StrictMode>
7+
<App />
8+
</React.StrictMode>,
9+
document.getElementById('app'),
10+
)
11+
12+
export default App

0 commit comments

Comments
 (0)