Create-react-app with an older version of React
Tags: createreactapp, react18, older, react
Published: 2022-04-15 15:25:14

---
title: Create-react-app with an older version of React
published: true
description: Create your project using CRA with an older react version
tags: createreactapp, react18, older, react
//cover_image: https://direct_url_to_image.jpg
---
##Introduction
Lately ( since the recent release of react 18 ) you might have noticed that create-react-app is using this very version?
This is the case but right now not all the packages are supporting this recent version of react.

For instance, whilst installing x package, we could have noticed few errors ongoing such as the following picture:
*(note the different versions of react)*
![Error with different version support of react packages example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etcwa2pgxcn5tzye2k5w.png)


To avoid ending resolving all dependencies used by CRA related to react v18 use, I would definitely go to setup the project with create react app having an older version of react.

##How do you downgrade react version in Create react app?
Yes you can still use create react app but you will need few adjustment and I’ll guide you through those few steps(8).

- 1️⃣ **Create your app** *(here called "my-project")* :
```npx create-react-app my-project```

- 2️⃣ **Open your project with your editor** (here, using VSCode): ```code my-project```
in which you can see the following tree presentation
![Project tree structure generate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu179x1uld02ow5or03y.png)

- 3️⃣ **Adjust your package.json** :
    - **React and react-dom**: set the "react" and "react-dom" versions stated to the version you want instead to their prior major version (here initially 18 --> 17).  
    - **testing-library/react**: adjust ```@testing-library/react``` version to its prior major version ( here it was 13 which became 12 ) ( package handling the updated version of react ) which will not exist in our project anymore.

- 4️⃣ **Remove 1 file and 1 folder**:
    - **"package-lock.json"**: Remove / delete ```package-lock.json``` as it kept in details what was installed when running the ``` npx create-react-app``` command earlier.

    - **"node_modules"**: Remove / delete your “node-modules” folder: in order to properly re-install the correct dependencies later.

- 5️⃣ **Adjust your "src/index.js"** as it was generated based on "react" and "react-dom" version 18 *(the version 18th brought a change on how to render react app through the DOM with "createRootDom" method)*.
    - **React and react-dom**:should be imported from "react-dom" and not "react-dom/client".
    - **root variable**: Adjust the root variable by assigning the value of ```document.getElementById(‘root’)```
    - **Render**: Adjust the render method by replacing ```root.render``` with ```ReactDOM.render```
You should end up having that file as shown beneath
![index.js modified with the previous leads](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z86in2efov9q3gdtgnmf.png)


- 6️⃣ **Re-install your dependencies** by executing this command: `npm install`.
*(**NB**: You might have some warnings but do not worry too much about it as we are aware that latest versions may have solved them and here we wanted to install an older version ( compromises have to be made ))*.


- 7️⃣ **Start your project**:
Run “npm start”  your project should be up and running!

- 8️⃣ **Run your test**: running `npm run test`

##Conclusion: 
We've seen how to modify the generated folder project created with create-react-app and another version of react ( since react released react18 and today, April 15th, CRA is installing this very latest version of "react" ).
This might be temporary of this also could be relevant in the future ?! who knows 🙂.
Hope this if helpful and can help.

                                 ✨🤓✨
         ✨Have a great coding path & may the code be with us !✨