How to downgrade from react 18 to 17.0.2
Tags: react, javascript, downgrade, createreactapp
Published: 2022-04-17 19:25:00

I might not be the only one who is really scared of change in technology causing a break in my code, but you don't have to fear anymore. with the new react 18 deployed, I will show you how to downgrade to react 17.0.2 with ease, so you can have enough time to prepare for the upgrade.


![BMC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zqopn84is8qquwq2m61.gif)

## 1. Create React App

- create a folder and name it `react-downgrade-2022` or whatever you want.

- Open the terminal and run create-react-app

```
npx create-react-app .
```

## 2. Uninstall react and react-dom
when you have created a react app it will come with react 18 and react-dom 18, but this is not what we want since we are trying to downgrade to react 17.0.2 and react-dom 17.0.2 

```javascript
{
  "name": "react-downgrade-2022",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0", // <===
    "react-dom": "^18.0.0", // <===
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```
we would have to uninstall react 18 and react-dom 18, now run <br>  `npm uninstall react react-dom`

```
npm uninstall react react-dom
```
this is done so that we can get rid of react 18 and react-dom 18, remember, we are trying to downgrade to react 17 and react-dom 17.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og9tz08l5p071mm32lj0.gif)

## 3 Install react 17 and react-dom 17
now to get what we really want which is react 17 and react-dom 17 once again, run `npm install react@17.0.2 react-dom@17.0.2`

```
npm install react@17.0.2 react-dom@17.0.2
```
React will yell at you with some deprecated warning signs, ignore whatever warning signs that are shown.

## 4 Change index.js
Remember, because we had already installed react 18, `index.js` will come with some default react 18 settings, which we would have to change to match that of react 17.0.2

navigate to your `index.js` file in the `src` directory.

```javascript

// react 18

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 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();
```

now copy and paste the below code to your `index.js` file

```javascript

// react 17.0.2

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);
```

## 5 finish 
now, we have successfully downgraded from react 18 to react 17.0.2 
run `npm start`

```
npm start
```

**Thank you, Please follow me**

[<img align="left" alt="linkedin.com/in/ifeanyi-thankgod-chima/" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg"/>][linkedin]
[<img align="left" alt="https://twitter.com/ifeanyiTchima" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@3.13.0/icons/twitter.svg" />][twitter]


[linkedin]: https://www.linkedin.com/in/ifeanyi-thankgod-chima/
[twitter]: https://twitter.com/ifeanyiTchima

<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>