File tree Expand file tree Collapse file tree 6 files changed +10934
-0
lines changed Expand file tree Collapse file tree 6 files changed +10934
-0
lines changed Original file line number Diff line number Diff line change
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
+
Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 )
Original file line number Diff line number Diff line change
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
You can’t perform that action at this time.
0 commit comments