You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Learning more on react native readme
* React native example readme
* Opening the app
* @parse/react readme
* Fix imports
* Add export to the example
* Add Parse import to the example
* React example
* @parse/react-ssr readme
* Backend readme
* Fix backend readme layout
* Imrpove learn more layout on backend readme
* Fix next example url
* Next.js does not open browser automatically
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1
+
# Todo List Example for Next.js (TS)
2
2
3
-
## Getting Started
3
+
A Todo List Example app built using Next.js and Typescript to illustrate the usage of the [@parse/react-ssr](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-ssr) library connecting to a Parse backend.
4
4
5
-
First, run the development server:
5
+
## Running this example
6
6
7
-
```bash
8
-
npm run dev
9
-
# or
10
-
yarn dev
11
-
```
12
-
13
-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14
-
15
-
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16
-
17
-
## Learn More
7
+
1. Clone this repository:
18
8
19
-
To learn more about Next.js, take a look at the following resources:
-[Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
22
-
-[Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
14
+
2. Install the dependencies:
23
15
24
-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
16
+
```shell
17
+
npm install
18
+
```
25
19
26
-
## Deploy on Vercel
20
+
3. Run the example backend, and the example app:
27
21
28
-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
22
+
```shell
23
+
npm run dev-backend-todo & npm run dev-next-ts-todo
24
+
```
29
25
30
-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
26
+
After running the commands, use your web browser to open the example app at http://localhost:3031/. The example backend can be accessed using the Parse Dashboard at http://0.0.0.0:4040/.
A Todo List Example app built using React Native and Typescript to illustrate the usage of the [@parse/react-native](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-native) library connecting to a Parse backend.
npm run dev-backend-todo & npm run dev-react-native-ts-todo
24
+
```
25
+
26
+
This example uses Expo. After running the commands, follow the Expo instructions printed in your console to open the example app in an Android, iOS, or Web emulator/device. The example backend can be accessed using the Parse Dashboard at http://0.0.0.0:4040/.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1
+
# Todo List Example for React (TS)
2
2
3
-
## Available Scripts
3
+
A Todo List Example app built using React and Typescript to illustrate the usage of the [@parse/react](https://github.com/parse-community/parse-react/tree/master/packages/parse-react) library connecting to a Parse backend.
4
4
5
-
In the project directory, you can run:
5
+
## Running this example
6
6
7
-
### `npm start`
7
+
1. Clone this repository:
8
8
9
-
Runs the app in the development mode.<br />
10
-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
Launches the test runner in the interactive watch mode.<br />
18
-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
20
+
3. Run the example backend, and the example app:
19
21
20
-
### `npm run build`
22
+
```shell
23
+
npm run dev-backend-todo & npm run dev-react-ts-todo
24
+
```
21
25
22
-
Builds the app for production to the `build` folder.<br />
23
-
It correctly bundles React in production mode and optimizes the build for the best performance.
24
-
25
-
The build is minified and the filenames include the hashes.<br />
26
-
Your app is ready to be deployed!
27
-
28
-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29
-
30
-
### `npm run eject`
31
-
32
-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33
-
34
-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35
-
36
-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37
-
38
-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39
-
40
-
## Learn More
41
-
42
-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43
-
44
-
To learn React, check out the [React documentation](https://reactjs.org/).
26
+
After running the commands, your default web browser should automatically open the example app at http://localhost:3000/. The example backend can be accessed using the Parse Dashboard at http://0.0.0.0:4040/.
Copy file name to clipboardExpand all lines: packages/parse-react-native/README.md
+21-4
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@
18
18
19
19
# Getting Started
20
20
21
-
First, install the [parse](https://www.npmjs.com/package/parse) and [@parse/react-native](https://www.npmjs.com/package/@parse/react-native) npm modules into your react-native application.
21
+
First, install the [parse](https://www.npmjs.com/package/parse) and [@parse/react-native](https://www.npmjs.com/package/@parse/react-native) npm modules into your React Native application.
isLive, // Indicates that Parse Live Query is connected
49
52
isLoading, // Indicates that the initial load is being processed
50
53
isSyncing, // Indicates that the library is getting the latest data from Parse Server
51
-
results, // Stores the current results
54
+
results, // Stores the current results in an array of Parse Objects
52
55
count, // Stores the current results count
53
56
error, // Stores any error
54
57
reload // Function that can be used to reload the data
55
-
} =useParseQuery(parseQuery);
58
+
} =useParseQuery(
59
+
parseQuery, // The Parse Query to be used
60
+
{
61
+
enableLocalDatastore:true, // Enables cache in local datastore (default: true)
62
+
enableLiveQuery:true// Enables live query for real-time update (default: true)
63
+
}
64
+
);
56
65
57
66
return (
58
67
<View>
@@ -99,8 +108,16 @@ const SomeComponent = () => {
99
108
</View>
100
109
);
101
110
};
111
+
112
+
exportdefaultSomeComponent;
102
113
```
103
114
115
+
# Learning More
116
+
117
+
This package aims to provide easier access to a Parse Server backend when developing React Native applications. It was built on top of the official [Parse JS SDK](https://docs.parseplatform.org/js/guide/). These two libraries should be used together and you can refer to the sdk documentation in order to learn more about Parse Objects, Parse Queries, and more:
118
+
- Learn more about [Parse Objects](https://docs.parseplatform.org/js/guide/#objects);
119
+
- Learn more about [Parse Queries](https://docs.parseplatform.org/js/guide/#queries).
120
+
104
121
# Example
105
122
106
-
See a [Todo List Example](https://github.com/parse-community/parse-react/tree/master/examples/react-native-ts-todo).
123
+
See a [Todo List Example](https://github.com/parse-community/parse-react/tree/master/examples/react-native-ts-todo).
First, install the [parse](https://www.npmjs.com/package/parse) and [@parse/react-ssr](https://www.npmjs.com/package/@parse/react-ssr) npm modules into your Next.js application.
parseQuery:awaitencodeParseQuery(parseQuery) // Return encoded Parse Query for server side rendering
45
+
}
46
+
};
47
+
};
48
+
49
+
exportdefaultfunctionSomePage({ parseQuery }) {
50
+
const {
51
+
isLive, // Indicates that Parse Live Query is connected
52
+
isLoading, // Indicates that the initial load is being processed
53
+
isSyncing, // Indicates that the library is getting the latest data from Parse Server
54
+
results, // Stores the current results in an array of Parse Objects
55
+
count, // Stores the current results count
56
+
error, // Stores any error
57
+
reload // Function that can be used to reload the data
58
+
} =useParseQuery(
59
+
parseQuery, // The Parse Query to be used
60
+
{
61
+
enableLocalDatastore:true, // Enables cache in local datastore (default: true)
62
+
enableLiveQuery:true// Enables live query for real-time update (default: true)
63
+
}
64
+
);
65
+
66
+
return (
67
+
<div>
68
+
{isLoading && (
69
+
<p>Loading...</p>
70
+
)}
71
+
{isLive && (
72
+
<p>Live!</p>
73
+
)}
74
+
{isSyncing && (
75
+
<p>Syncing...</p>
76
+
)}
77
+
{results && (
78
+
<ul>
79
+
{results.map(result=> (
80
+
<li key={result.id}>
81
+
{result.get('someField')}
82
+
</li>
83
+
))}
84
+
</ul>
85
+
)}
86
+
<p>{count}</p>
87
+
{error && (
88
+
<p>{error.message}</p>
89
+
)}
90
+
<button
91
+
onClick={reload}
92
+
>
93
+
Reload
94
+
</button>
95
+
</div>
96
+
);
97
+
};
98
+
```
99
+
100
+
# Learning More
101
+
102
+
This package aims to provide easier access to a Parse Server backend when developing React with SSR applications (e.g. Next.js). It was built on top of the official [Parse JS SDK](https://docs.parseplatform.org/js/guide/). These two libraries should be used together and you can refer to the sdk documentation in order to learn more about Parse Objects, Parse Queries, and more:
103
+
- Learn more about [Parse Objects](https://docs.parseplatform.org/js/guide/#objects);
104
+
- Learn more about [Parse Queries](https://docs.parseplatform.org/js/guide/#queries).
105
+
106
+
# Example
107
+
108
+
See a [Todo List Example](https://github.com/parse-community/parse-react/tree/master/examples/next-ts-todo).
0 commit comments