Skip to content

Commit b51ba63

Browse files
markeriksonmarkerikson
authored
Merge pull request #66 from reduxjs/feature/react-18-updates
2 parents ab2ec9a + cf0a1aa commit b51ba63

9 files changed

+19555
-39515
lines changed

‎jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
testEnvironment: 'jsdom',
23
moduleNameMapper: {
34
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less)$':
45
'<rootDir>/__mocks__/fileMock.ts',

‎package-lock.json

+19,468-39,302
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+27-29
Original file line numberDiff line numberDiff line change
@@ -34,34 +34,32 @@
3434
"template.json"
3535
],
3636
"devDependencies": {
37-
"@babel/preset-env": "^7.7.6",
38-
"@babel/preset-react": "^7.7.4",
39-
"@reduxjs/toolkit": "^1.5.1",
40-
"@testing-library/jest-dom": "^4.2.4",
41-
"@testing-library/react": "^9.3.2",
42-
"@types/jest": "^24.0.0",
43-
"@types/node": "^12.12.28",
44-
"@types/react": "^16.9.21",
45-
"@types/react-dom": "^16.9.5",
46-
"@types/react-redux": "^7.1.7",
47-
"babel-eslint": "^10.0.3",
48-
"babel-jest": "^24.9.0",
49-
"eslint": "^7.5.0",
50-
"eslint-config-react-app": "^6.0.0",
51-
"eslint-plugin-flowtype": "^5.2.0",
52-
"eslint-plugin-import": "^2.18.2",
53-
"eslint-plugin-jsx-a11y": "^6.2.3",
54-
"eslint-plugin-prettier": "^3.1.1",
55-
"eslint-plugin-react": "^7.17.0",
56-
"eslint-plugin-react-hooks": "^4.2.0",
57-
"jest": "^24.9.0",
58-
"prettier": "^2.2.1",
59-
"react": "^16.12.0",
60-
"react-dom": "^16.12.0",
61-
"react-redux": "^7.2.0",
62-
"react-scripts": "^4.0.3",
63-
"react-test-renderer": "^16.12.0",
64-
"redux": "^4.0.4",
65-
"typescript": "~4.1.5"
37+
"@babel/preset-env": "^7.16.11",
38+
"@babel/preset-react": "^7.16.7",
39+
"@reduxjs/toolkit": "^1.8.1",
40+
"@testing-library/jest-dom": "^5.16.4",
41+
"@testing-library/react": "^13.1.1",
42+
"@types/jest": "^27.4.1",
43+
"@types/node": "^17.0.25",
44+
"@types/react": "^18.0.6",
45+
"@types/react-dom": "^18.0.2",
46+
"babel-eslint": "^10.1.0",
47+
"babel-jest": "^27.5.1",
48+
"eslint": "^8.14.0",
49+
"eslint-config-react-app": "^7.0.1",
50+
"eslint-plugin-import": "^2.26.0",
51+
"eslint-plugin-jsx-a11y": "^6.5.1",
52+
"eslint-plugin-prettier": "^4.0.0",
53+
"eslint-plugin-react": "^7.29.4",
54+
"eslint-plugin-react-hooks": "^4.4.0",
55+
"jest": "^27.5.1",
56+
"prettier": "^2.6.2",
57+
"react": "^18.0.0",
58+
"react-dom": "^18.0.0",
59+
"react-redux": "^8.0.1",
60+
"react-scripts": "^5.0.1",
61+
"react-test-renderer": "^18.0.0",
62+
"typescript": "^4.6",
63+
"web-vitals": "^2.1.0"
6664
}
6765
}

‎template.json

+14-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@reduxjs/toolkit": "^1.5.1",
5-
"@testing-library/react": "^9.3.2",
6-
"@testing-library/jest-dom": "^4.2.4",
7-
"@testing-library/user-event": "^7.1.2",
8-
"@types/node": "^12.0.0",
9-
"@types/react": "^16.9.0",
10-
"@types/react-dom": "^16.9.0",
11-
"@types/react-redux": "^7.1.7",
12-
"@types/jest": "^24.0.0",
13-
"react-redux": "^7.2.0",
14-
"typescript": "~4.1.5"
4+
"@reduxjs/toolkit": "^1.8.1",
5+
"@testing-library/jest-dom": "^5.16.4",
6+
"@testing-library/react": "^13.0.1",
7+
"@testing-library/user-event": "^14.1.1",
8+
"@types/jest": "^27.4.1",
9+
"@types/node": "^17.0.25",
10+
"@types/react": "^18.0.6",
11+
"@types/react-dom": "^18.0.2",
12+
"react-redux": "^8.0.1",
13+
"typescript": "^4.6.0",
14+
"web-vitals": "^2.1.0"
15+
},
16+
"eslintConfig": {
17+
"extends": ["react-app", "react-app/jest"]
1518
}
1619
}
1720
}

‎template/README.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template.
1+
# Getting Started with Create React App
2+
3+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) TS template.
24

35
## Available Scripts
46

57
In the project directory, you can run:
68

79
### `npm start`
810

9-
Runs the app in the development mode.<br />
11+
Runs the app in the development mode.\
1012
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
1113

12-
The page will reload if you make edits.<br />
14+
The page will reload if you make edits.\
1315
You will also see any lint errors in the console.
1416

1517
### `npm test`
1618

17-
Launches the test runner in the interactive watch mode.<br />
19+
Launches the test runner in the interactive watch mode.\
1820
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
1921

2022
### `npm run build`
2123

22-
Builds the app for production to the `build` folder.<br />
24+
Builds the app for production to the `build` folder.\
2325
It correctly bundles React in production mode and optimizes the build for the best performance.
2426

25-
The build is minified and the filenames include the hashes.<br />
27+
The build is minified and the filenames include the hashes.\
2628
Your app is ready to be deployed!
2729

2830
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

‎template/src/features/counter/counterSlice.ts

+8-9
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,13 @@ export const selectCount = (state: RootState) => state.counter.value;
7272

7373
// We can also write thunks by hand, which may contain both sync and async logic.
7474
// Here's an example of conditionally dispatching actions based on current state.
75-
export const incrementIfOdd = (amount: number): AppThunk => (
76-
dispatch,
77-
getState
78-
) => {
79-
const currentValue = selectCount(getState());
80-
if (currentValue % 2 === 1) {
81-
dispatch(incrementByAmount(amount));
82-
}
83-
};
75+
export const incrementIfOdd =
76+
(amount: number): AppThunk =>
77+
(dispatch, getState) => {
78+
const currentValue = selectCount(getState());
79+
if (currentValue % 2 === 1) {
80+
dispatch(incrementByAmount(amount));
81+
}
82+
};
8483

8584
export default counterSlice.reducer;

‎template/src/index.tsx

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import { store } from './app/store';
2+
import { createRoot } from 'react-dom/client';
63
import { Provider } from 'react-redux';
7-
import * as serviceWorker from './serviceWorker';
4+
import { store } from './app/store';
5+
import App from './App';
6+
import reportWebVitals from './reportWebVitals';
7+
import './index.css';
8+
9+
const container = document.getElementById('root')!;
10+
const root = createRoot(container);
811

9-
ReactDOM.render(
12+
root.render(
1013
<React.StrictMode>
1114
<Provider store={store}>
1215
<App />
1316
</Provider>
14-
</React.StrictMode>,
15-
document.getElementById('root')
17+
</React.StrictMode>
1618
);
1719

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

‎template/src/reportWebVitals.ts

+15
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;

‎template/src/serviceWorker.ts

-146
This file was deleted.

0 commit comments

Comments
 (0)