Skip to content

Commit 141ede2

Browse files
brianzinnbrianzinn
committed
Create React App 4.0.0! (and React 17) - latest react-babylonjs
1 parent b86346e commit 141ede2

File tree

11 files changed

+67
-174
lines changed

11 files changed

+67
-174
lines changed

‎README.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
This project was bootstrapped with Create React App (CRA) v3 site and then BabylonJS was added.
1+
This project was bootstrapped with Create React App (CRA) v4 and then `babylonjs-react` was added.
22
For TypeScript
33
```bash
4-
npx create-react-app babylonjs-app --typescript
4+
npx create-react-app your-babylonjs-app --template typescript
55
```
66

7-
BabylonJS was added using 'react-babylonjs'
7+
Add babylonjs dependencies:
88
```bash
99
yarn add react-babylonjs
10-
yarn add react-reconciler
1110
yarn add @babylonjs/core
1211
yarn add @babylonjs/gui
1312
yarn add @babylonjs/loaders

‎package.json‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
{
2-
"name": "babylonjs-site",
2+
"name": "create-react-app-typescript-babylonjs",
33
"homepage": "https://brianzinn.github.io/create-react-app-typescript-babylonjs",
44
"version": "0.1.0",
55
"private": true,
66
"dependencies": {
7-
"@babylonjs/core": "^4.1.0",
8-
"@babylonjs/gui": "^4.1.0",
9-
"@babylonjs/loaders": "^4.1.0",
7+
"@babylonjs/core": "^4.2.0-beta.20",
8+
"@babylonjs/gui": "^4.2.0-beta.20",
9+
"@babylonjs/loaders": "^4.2.0-beta.20",
10+
"@testing-library/jest-dom": "^5.11.4",
11+
"@testing-library/react": "^11.1.0",
12+
"@testing-library/user-event": "^12.1.10",
1013
"cannon": "^0.6.2",
11-
"react": "^16.13.1",
12-
"react-babylonjs": "2.0.6",
13-
"react-dom": "^16.13.1",
14-
"react-reconciler": "^0.25.1",
15-
"react-scripts": "3.1.2",
16-
"typescript": "3.6.3"
14+
"react": "^17.0.1",
15+
"react-babylonjs": "^2.2.14",
16+
"react-dom": "^17.0.1",
17+
"react-scripts": "4.0.0",
18+
"typescript": "^4.0.3",
19+
"web-vitals": "^0.2.4"
1720
},
1821
"devDependencies": {
19-
"@types/cannon": "^0.1.4",
20-
"@types/jest": "24.0.18",
21-
"@types/node": "12.7.5",
22-
"@types/react": "^16.9.25",
23-
"@types/react-dom": "^16.9.5",
24-
"gh-pages": "^2.1.1"
22+
"@types/cannon": "^0.1.5",
23+
"@types/jest": "^26.0.15",
24+
"@types/node": "^12.0.0",
25+
"@types/react": "^16.9.53",
26+
"@types/react-dom": "^16.9.8",
27+
"gh-pages": "^3.1.0"
2528
},
2629
"scripts": {
2730
"start": "react-scripts start",
@@ -32,7 +35,10 @@
3235
"deploy": "gh-pages -d build"
3336
},
3437
"eslintConfig": {
35-
"extends": "react-app"
38+
"extends": [
39+
"react-app",
40+
"react-app/jest"
41+
]
3642
},
3743
"browserslist": {
3844
"production": [

‎public/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="logo192.png" />
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1818
<style type="text/css">
19-
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
19+
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
2020
</style>
2121
<!--
2222
Notice the use of %PUBLIC_URL% in the tags above.

‎public/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"src": "logo512.png",
1717
"type": "image/png",
1818
"sizes": "512x512"
19-
}
19+
}
2020
],
2121
"start_url": ".",
2222
"display": "standalone",

‎public/robots.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# https://www.robotstxt.org/robotstxt.html
22
User-agent: *
3+
Disallow:

‎src/App.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,7 @@
3535
transform: rotate(360deg);
3636
}
3737
}
38+
39+
#sample-canvas {
40+
width: 50%;
41+
}

‎src/index.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './index.css';
44
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
5+
import reportWebVitals from './reportWebVitals';
66

7-
ReactDOM.render(<App />, document.getElementById('root'));
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
document.getElementById('root')
12+
);
813

9-
// If you want your app to work offline and load faster, you can change
10-
// unregister() to register() below. Note this comes with some pitfalls.
11-
// Learn more about service workers: https://bit.ly/CRA-PWA
12-
serviceWorker.unregister();
14+
// If you want to start measuring performance in your app, pass a function
15+
// to log results (for example: reportWebVitals(console.log))
16+
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17+
reportWebVitals();

‎src/reportWebVitals.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ReportHandler } from 'web-vitals';
2+
3+
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4+
if (onPerfEntry && onPerfEntry instanceof Function) {
5+
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6+
getCLS(onPerfEntry);
7+
getFID(onPerfEntry);
8+
getFCP(onPerfEntry);
9+
getLCP(onPerfEntry);
10+
getTTFB(onPerfEntry);
11+
});
12+
}
13+
}
14+
15+
export default reportWebVitals;

‎src/serviceWorker.ts‎

Lines changed: 0 additions & 143 deletions
This file was deleted.

‎src/setupTests.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// jest-dom adds custom jest matchers for asserting on DOM nodes.
2+
// allows you to do things like:
3+
// expect(element).toHaveTextContent(/react/i)
4+
// learn more: https://github.com/testing-library/jest-dom
5+
import '@testing-library/jest-dom';

0 commit comments

Comments
 (0)