Skip to content

Commit

Permalink
Merge pull request #66 from reduxjs/feature/react-18-updates
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson authored Apr 24, 2022
2 parents ab2ec9a + cf0a1aa commit b51ba63
Show file tree
Hide file tree
Showing 9 changed files with 19,555 additions and 39,515 deletions.
1 change: 1 addition & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
module.exports = {
testEnvironment: 'jsdom',
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less)$':
'<rootDir>/__mocks__/fileMock.ts',
Expand Down
58,770 changes: 19,468 additions & 39,302 deletions package-lock.json

Large diffs are not rendered by default.

56 changes: 27 additions & 29 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,34 +34,32 @@
"template.json"
],
"devDependencies": {
"@babel/preset-env": "^7.7.6",
"@babel/preset-react": "^7.7.4",
"@reduxjs/toolkit": "^1.5.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.12.28",
"@types/react": "^16.9.21",
"@types/react-dom": "^16.9.5",
"@types/react-redux": "^7.1.7",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"eslint": "^7.5.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^24.9.0",
"prettier": "^2.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-scripts": "^4.0.3",
"react-test-renderer": "^16.12.0",
"redux": "^4.0.4",
"typescript": "~4.1.5"
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@reduxjs/toolkit": "^1.8.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.25",
"@types/react": "^18.0.6",
"@types/react-dom": "^18.0.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.5.1",
"eslint": "^8.14.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"jest": "^27.5.1",
"prettier": "^2.6.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^8.0.1",
"react-scripts": "^5.0.1",
"react-test-renderer": "^18.0.0",
"typescript": "^4.6",
"web-vitals": "^2.1.0"
}
}
25 changes: 14 additions & 11 deletions template.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
{
"package": {
"dependencies": {
"@reduxjs/toolkit": "^1.5.1",
"@testing-library/react": "^9.3.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/user-event": "^7.1.2",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.7",
"@types/jest": "^24.0.0",
"react-redux": "^7.2.0",
"typescript": "~4.1.5"
"@reduxjs/toolkit": "^1.8.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^14.1.1",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.25",
"@types/react": "^18.0.6",
"@types/react-dom": "^18.0.2",
"react-redux": "^8.0.1",
"typescript": "^4.6.0",
"web-vitals": "^2.1.0"
},
"eslintConfig": {
"extends": ["react-app", "react-app/jest"]
}
}
}
14 changes: 8 additions & 6 deletions template/README.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
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.
# Getting Started with Create React App

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.

## Available Scripts

In the project directory, you can run:

### `npm start`

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

The page will reload if you make edits.<br />
The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm test`

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

### `npm run build`

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

The build is minified and the filenames include the hashes.<br />
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
Expand Down
17 changes: 8 additions & 9 deletions template/src/features/counter/counterSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,13 @@ export const selectCount = (state: RootState) => state.counter.value;

// We can also write thunks by hand, which may contain both sync and async logic.
// Here's an example of conditionally dispatching actions based on current state.
export const incrementIfOdd = (amount: number): AppThunk => (
dispatch,
getState
) => {
const currentValue = selectCount(getState());
if (currentValue % 2 === 1) {
dispatch(incrementByAmount(amount));
}
};
export const incrementIfOdd =
(amount: number): AppThunk =>
(dispatch, getState) => {
const currentValue = selectCount(getState());
if (currentValue % 2 === 1) {
dispatch(incrementByAmount(amount));
}
};

export default counterSlice.reducer;
26 changes: 14 additions & 12 deletions template/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

const container = document.getElementById('root')!;
const root = createRoot(container);

ReactDOM.render(
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
</React.StrictMode>
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
15 changes: 15 additions & 0 deletions template/src/reportWebVitals.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};

export default reportWebVitals;
146 changes: 0 additions & 146 deletions template/src/serviceWorker.ts

This file was deleted.

0 comments on commit b51ba63

Please sign in to comment.