Skip to content

Commit 2cec7d6

Browse files
docs: readmes (#55)
* chore: update readme files * chore: more readme's and tweaks
1 parent eb14f75 commit 2cec7d6

File tree

11 files changed

+217
-145
lines changed

11 files changed

+217
-145
lines changed

examples/native-cli/README-orig.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
2+
3+
# Getting Started
4+
5+
>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
6+
7+
## Step 1: Start the Metro Server
8+
9+
First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
10+
11+
To start Metro, run the following command from the _root_ of your React Native project:
12+
13+
```bash
14+
# using npm
15+
npm start
16+
17+
# OR using Yarn
18+
yarn start
19+
```
20+
21+
## Step 2: Start your Application
22+
23+
Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
24+
25+
### For Android
26+
27+
```bash
28+
# using npm
29+
npm run android
30+
31+
# OR using Yarn
32+
yarn android
33+
```
34+
35+
### For iOS
36+
37+
```bash
38+
# using npm
39+
npm run ios
40+
41+
# OR using Yarn
42+
yarn ios
43+
```
44+
45+
If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
46+
47+
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
48+
49+
## Step 3: Modifying your App
50+
51+
Now that you have successfully run the app, let's modify it.
52+
53+
1. Open `App.tsx` in your text editor of choice and edit some lines.
54+
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
55+
56+
For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
57+
58+
## Congratulations! :tada:
59+
60+
You've successfully run and modified your React Native App. :partying_face:
61+
62+
### Now what?
63+
64+
- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
65+
- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
66+
67+
# Troubleshooting
68+
69+
If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
70+
71+
# Learn More
72+
73+
To learn more about React Native, take a look at the following resources:
74+
75+
- [React Native Website](https://reactnative.dev) - learn more about React Native.
76+
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
77+
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
78+
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
79+
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

examples/native-cli/README.md

Lines changed: 11 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,14 @@
1-
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
1+
# Reassure React Native CLI Example
22

3-
# Getting Started
3+
This example showcases Reassure setup for React Native CLI app.
44

5-
>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
5+
## Setup steps
66

7-
## Step 1: Start the Metro Server
8-
9-
First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
10-
11-
To start Metro, run the following command from the _root_ of your React Native project:
12-
13-
```bash
14-
# using npm
15-
npm start
16-
17-
# OR using Yarn
18-
yarn start
19-
```
20-
21-
## Step 2: Start your Application
22-
23-
Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
24-
25-
### For Android
26-
27-
```bash
28-
# using npm
29-
npm run android
30-
31-
# OR using Yarn
32-
yarn android
33-
```
34-
35-
### For iOS
36-
37-
```bash
38-
# using npm
39-
npm run ios
40-
41-
# OR using Yarn
42-
yarn ios
43-
```
44-
45-
If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
46-
47-
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
48-
49-
## Step 3: Modifying your App
50-
51-
Now that you have successfully run the app, let's modify it.
52-
53-
1. Open `App.tsx` in your text editor of choice and edit some lines.
54-
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
55-
56-
For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
57-
58-
## Congratulations! :tada:
59-
60-
You've successfully run and modified your React Native App. :partying_face:
61-
62-
### Now what?
63-
64-
- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
65-
- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
66-
67-
# Troubleshooting
68-
69-
If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
70-
71-
# Learn More
72-
73-
To learn more about React Native, take a look at the following resources:
74-
75-
- [React Native Website](https://reactnative.dev) - learn more about React Native.
76-
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
77-
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
78-
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
79-
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
7+
1. Install `@testing-library/react-native` as `devDependencies` to setup basic React Native Testing Library setup. All other required deps should be already in the template setup.
8+
2. Copy `jest.config.js` from this repo for RNTL tests to run
9+
3. Install `reassure` and `danger` as `devDependencies`
10+
4. Run `yarn reassure init` to:
11+
* generate `reassure-tests.sh` CI script
12+
* generate `dangerfile.js` config for `danger`
13+
* add `.reasure` entry to `.gitignore`
14+
5. (optional) Add `configure({ testingLibrary: 'react-native' });` to your `jest-setup.js` file
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable no-undef */
22
import { configure } from 'reassure';
33

4-
configure({ testingLibrary: 'react-native', verbose: true });
4+
configure({ testingLibrary: 'react-native' });
55

66
// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
77
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

examples/native-cli/jest.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
22
preset: 'react-native',
3+
setupFilesAfterEnv: ['./jest-setup.js'],
34
};

examples/native-expo/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Reassure React Native Expo Example
2+
3+
This example showcases Reassure setup for React Native Expo app.
4+
5+
## Setup steps
6+
7+
1. Install `@testing-library/react-native` as `devDependencies` to setup basic React Native Testing Library setup. All other required deps should be already in the template setup.
8+
2. Copy `jest.config.js` from this repo for RNTL tests to run
9+
3. Install `reassure` and `danger` as `devDependencies`
10+
4. Run `yarn reassure init` to:
11+
* generate `reassure-tests.sh` CI script
12+
* generate `dangerfile.js` config for `danger`
13+
* add `.reasure` entry to `.gitignore`
14+
5. (optional) Add `configure({ testingLibrary: 'react-native' });` to your `jest-setup.js` file
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
2-
preset: '@testing-library/react-native',
2+
preset: 'react-native',
33
setupFilesAfterEnv: ['./jest-setup.js'],
44
};

examples/web-nextjs/README-orig.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
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).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/web-nextjs/README.md

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,21 @@
1-
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).
2-
3-
## Getting Started
4-
5-
First, run the development server:
6-
7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
15-
```
16-
17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18-
19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20-
21-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22-
23-
## Learn More
24-
25-
To learn more about Next.js, take a look at the following resources:
26-
27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29-
30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31-
32-
## Deploy on Vercel
33-
34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35-
36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
1+
# Reassure Next.js Example
2+
3+
This example showcases Reassure setup for Next.js web app.
4+
5+
## Setup steps
6+
7+
1. Install following deps as `devDependencies` to setup basic Jest + React Testing Library setup:
8+
* `jest`
9+
* `jest-environment-jsdom`
10+
* `@types/jest`
11+
* `@testing-library/react`
12+
* `@babel/preset-env`
13+
* `@babel/preset-react`
14+
* `@babel/preset-typescript`
15+
2. Copy `jest.config.js` & `babel.config.js` from this repo for RTL tests to run
16+
3. Install `reassure` and `danger` as `devDependencies`
17+
4. Run `yarn reassure init` to:
18+
* generate `reassure-tests.sh` CI script
19+
* generate `dangerfile.js` config for `danger`
20+
* add `.reasure` entry to `.gitignore`
21+
5. (optional) Add `configure({ testingLibrary: 'react' });` to your `jest-setup.js` file

examples/web-vite/README-orig.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
14+
- Configure the top-level `parserOptions` property like this:
15+
16+
```js
17+
export default {
18+
// other rules...
19+
parserOptions: {
20+
ecmaVersion: 'latest',
21+
sourceType: 'module',
22+
project: ['./tsconfig.json', './tsconfig.node.json'],
23+
tsconfigRootDir: __dirname,
24+
},
25+
}
26+
```
27+
28+
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29+
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

examples/web-vite/README.md

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,21 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13-
14-
- Configure the top-level `parserOptions` property like this:
15-
16-
```js
17-
export default {
18-
// other rules...
19-
parserOptions: {
20-
ecmaVersion: 'latest',
21-
sourceType: 'module',
22-
project: ['./tsconfig.json', './tsconfig.node.json'],
23-
tsconfigRootDir: __dirname,
24-
},
25-
}
26-
```
27-
28-
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29-
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
1+
# Reassure Vite Example
2+
3+
This example showcases Reassure setup for Vite React.js web app.
4+
5+
## Setup steps
6+
7+
1. Install following deps as `devDependencies` to setup basic Jest + React Testing Library setup:
8+
* `jest`
9+
* `jest-environment-jsdom`
10+
* `@types/jest`
11+
* `@testing-library/react`
12+
* `@babel/preset-env`
13+
* `@babel/preset-react`
14+
* `@babel/preset-typescript`
15+
2. Copy `jest.config.js` & `babel.config.js` from this repo for RTL tests to run
16+
3. Install `reassure` and `danger` as `devDependencies`
17+
4. Run `yarn reassure init` to:
18+
* generate `reassure-tests.sh` CI script
19+
* generate `dangerfile.js` config for `danger`
20+
* add `.reasure` entry to `.gitignore`
21+
5. (optional) Add `configure({ testingLibrary: 'react' });` to your `jest-setup.js` file

0 commit comments

Comments
 (0)