Upgrading react: is it really this simple? - reactjs

I'm following this page to upgrade React on our just-released react app, project started last November, react currently sitting at 16.0.
So naively, I do npm install react react-dom as suggested, and it bumps my React up to 16.14.0. So where is my React 18? Am I right to think I want the hottest, newest. What is the upgrade page not telling me?

Try latest tag or giving directly the version that you want
npm install react#latest react-dom#latest
or
npm install react#^18.0.0 react-dom#^18.0.0

Related

React18 is not supporting styled-component

Can anyone help me out to solve this problem.
As I am learning React Native, I was going through styled components but was facing an error related to styled components not compatible with react18 version. and same works in react#16 and below
I was trying to install styled-components for styling components in react-native. And i was receiving error saying that react18 is not compatible. I just want styled components to work
Try to install it with this command
npm install styled-components --force
I sorted the solution as styled-component was not working for react 18.0.2.
So I decided to uninstall react 18.0.2 by using npm uninstall react#18.0.2
and then
I reinstalled npm install react#17.0.2 and then I read the documentation of Styled Component
and installed styled-components using yarn add styled-components and successfully sorted out my problem.
npx expo install react-dom
This fixed it for me (using expo managed react-native app)
https://github.com/styled-components/styled-components/issues/3788#issuecomment-1335191911
I had same problem when taking Udemy course about React Native. This course provides git with complete code, so what I did was:
Downloaded packages.json file from git url provided with course (last version),
Deleted my project node_modules folder,
Deleted my project packages-lock.json file,
Executed npm install

material bootstrap design is not working at React 18

enter image description hereI have tried to install mdb-ui-kit in react version 18. is there any alternative way to install it?
This package has react 17 as a peer dependency. Try to force the installation with
npm i mdb-react-ui-kit -- force
and test if it's still working. Otherwise you can downgrade your react version to 17.

How can I upgrade my react-native version 0.58.6 to 0.65 or newer?

I am setting up this GitHub repo on my local machine and I am facing issues.
I have to upgrade the react-native version of a project from 0.58.6 to 0.65 or newer and also upgrade react version from 16.12.0 to 17.0.0 or newer and same goes for react-navigation.
Please help!
Upgrade the react-native version of a project from 0.58.6 to 0.65 or newer :
npx react-native upgrade
(Use npx , npm , yarn etc. which you are using)
ou may specify a React Native version by passing an argument, e.g. to upgrade to 0.61.0-rc.0 run:
npx react-native upgrade 0.61.0-rc.0
Here you can change version according to your requirement.
If you want to upgrade your packages(navigation) :
npx react-native upgrade
Sometimes it doesn't work for me so add updated react-navigation manually. Don't worry it doesn't cause any conflict.
For updating React Version i suggest you to visit this :
Upgrading React version and it's dependencies

Is Shrinkwrap preventing me from updating react and react-dom?

I am trying to update react from 15.4.2 to 16.2.0. Main dependencies I am concerned about is React and React-Dom. I am trying to run: npm uninstall --save react react-dom and then npm install --save react react-dom however I keep getting the message: UNMET PEER DEPENDENCY react#16.2.0 react-dom#16.2.0 so this makes me think it's a shrink or tied down dependency but can't seem to find it. I have tried to even remove react and react-dom from the dependencies in package.json. Still no avail.
Issue:
My root issue is I coudn't run material ui components with tap react and more specifically the Tabs and it's touch/tap feature. Real problem is I believe I had other node_modules,package.jsons in root folder where my app/components were in so more than one node_module and package.json files and folders which caused the clash.
To resolve:
Make a copy of your business logic from app where you cannot update
Then navigate into/create new directory and
Scaffolded new react project in there (react-app or in my case Yo #microsoft/sharepoint)
Checked the react, reactdom versions in node_modules folder and package.json from within the application that's not updating to see if they're latest versions...they weren't so I did the following updates:
3.2. npm install --save react react-dom (you may have to run npm uninstall react react-dom first)
3.3. npm install material-ui#latest
3.4 npm i --save react-tap-event-plugin#3.0.2
Check if versions have updated in folders above in step 3...they have now.
Try to import and create tap react app components again e.g. Tabs and now it should work
Conclusion:
It was not Shrinkwrap itself that was causing the issue but the duplication of node_module files and/or package.json files. See Material-UI Tabs have stopped working for more info.
Also remember Create React app will not work with some versions of React and React Dom. So be wary of this.
Some things you could try:
check the version of react and react-dom inside the node_modules/ folder
remove node_modules/ and reinstall it again to remove any stall dependencies

Installed react dom rather than react-dom. What's the difference?

kind of new at this and typed in "install react dom" instead of "install react-dom" in my command prompt. What exactly is the difference and what did I install?
Well, it means you installed the react package and dom package instead of the react-dom package. That dom package is not related to React or React-DOM in any way. You probably want both React and React-DOM:
npm install react react-dom

Resources