React 18 - What's New, What Changed & Upgrade Guide
HTML-код
- Опубликовано: 28 мар 2022
- React 18 was released and since it's a new major version, the big questions is: What changed?
Indeed, React 18 lays a solid foundation for great future updates and introduces one very important new concept: Concurrency.
Nonetheless, updating is extremely easy and requires almost no work. You don't need to re-learn React, you don't need to change your entire codebase.
Full tutorial article: academind.com/tutorials/react...
My "Complete Guide" course is entirely up-to-date with this latest version of React!
Join now at a super-low price: acad.link/reactjs
----------
Join our Academind Community on Discord: academind.com/community
Check out all our other courses: academind.com/courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Thanks you Max for quick and easy updates in a short video. Always love your explanations.
You can explain everything in easy way. Thanks :D
Thank you! Simple and understandable. I already made these changes in my projects. Looking forward to more videos of updates.
Thank you for updating! Much appreciated !
Currently taking your react course... you're making it easy for me to learn react. Thanks max 😊 🙏
Thank you for this Max. I love your content, so simple to understand and internalize. Keep up the amazing work👏👏
Kmk
Great video Max
Thank you so much Maximilian Schwarzmüller:) It's really helpful tutorial.
Thanks Max. You keep it so easy and precise.
Thank you soo much for your courses. They are super easy to understand and give in depth knowledge. It helped me to get my current job and I will try to teach others like you are teaching.
Thanks a lot.
You are amazing and always on time! Thank you!
Thanks for the information bro. I'll be checking updates on react from your channel from now on. Subscribed ❤️
great video max. your courses helped me out a lot with work.
Thank you 😊 you are the best in explaining ❤
Amazing! looking forward to using new featrures! Thanks, Max ✨✨
React Fullstack😍 coming, Thanks for the info
Thank you for the update Max, it's easy to follow up with just one video. What pain it would have been to read it on text.
I started your React course on Udemy two weeks ago. You are such a great teacher, so I bought several more courses. Thank you Maximilian.
When my friends ask me about how to learn React or Javascript, I tell them to buy Max courses on Udemy.
But people complain of it.
They said it's not updated and other inconsistencies
React js is a shame to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.
thank you for sharing your precious time and knowledge with us
Keep it up Max! You are awesome!
Thanks 🙏 for updating on React 18 features, sir.
that was quick! thank you Max
I finished reading React 17 documentation 7 days ago. Now I saw you video I'm still in the mood to check their website again ✔ thanks for informing us 👍 👌
Max, thank you! You are the best!
Amazing explanation. Love React and Max.
You are one of best teacher on udemy. I 've learned Angualr, React and JavaScript from your Udemy courses.
Thank you max 🙏
For me he's the best teacher.
Thank you sir!
Thank you!
Great video. Thanks
thank you!!😀
Very useful, thanks mate.
At 0:40 you can also do this: ReactDOM.createRoot(document.getElementById('root')).render();
I've even seen somebody do this:
import { createRoot } from "react-dom/client";
createRoot(document.getElementById('root')).render();
Thank you for this great video!
Thanx max. It is helpful
very well explained 👐
Thank you, great video.
I bought your Udemy course (React), and it Is one of Best desitions i ever made! The way you explain things Is so amazing, the way you start with almost nothing and after one hour or two, I am lerning advanced stuff. Awesome. Thank you for existing!! :) Ps: seriously, thank you so much!
Thanks a lot.
didnt need to see the title to know who the tutor is! Thanks Max!
Thank you Max, Short & sweet understandable. keep it up ,Great work
Thank you Max, you taught millions of people.
Well explained.
I took the #React certification from your Udemy Course, 1.5 year ago... Since that I am a huge fan of #React.
#React is the best #JavaScript framework ❤️ ❤️ ❤️.
thanks!
Thank you Sir
You’re amazing, dude.
Always first on the news. Excellent
Thanks, Max
Thank you boss ❤. you are such a amazing man. Love from bangladesh
Ich habe zu viel dingen gelernt. Danke schon Max. Back in the days when I was starting out development, I would look at your courses in Udemy and just wish I could access it. A few years down the line I got access to your courses and it has transformed me into a better developer. Be blessed Max!
This was so much more helpful than the React docs for making this change 😁 Thank you good sir!
Great stuff.
I miss react since I use Angular. Just curious if new web courses are coming soon! Looking very much forward!
Woaaaaaah. This is bomb !
Interesting stuff
I was never excited about anything like this, after i saw the React 18❤️
Love you 😘😉♥️
Max is the greatest to ever do it. If you want to learn a new tech fully, reference Max courses
Nice summary of React-18 Changes. Thanks, Max
{2022-06-15}
Dankeschön
Omg I randomly come across this video and immediately recognized the voice! Had many courses on Udemy from Maximilian
Hello Max ! Are you going to update the React Native course as well ? Thank you !
One small correction at 2:47: React does batch process state updates if there are multiple updates happening. It doesn’t necessarily go one by one.
Awesome
Looking forward to wversion 18
when he said, it does not break your existing code, well it does. FC does not contain children anymore. Instead use it with PropsWithChildren
❤️
great
Does anyone know how to make “react-dom/client” work with a purely CDN implementation? I get a warning for not using the client but can’t seem to fix it without switching to something like webpack.
I will be a React Sage someday!
hello and thank you very much for the video! I know it's not stackoverflow but I have a trouble with newest version of React. I run into this error `index.js:1 Uncaught SyntaxError: Unexpected token
Awesome thanks. Do you plan to update part of your React course?
The course is 100% up-to-date
🥇
Hey Max, great job but something is not working with typescript , done same changes update react and react dom and types could you please made a video that is with typescript. redux toolkit I am using and react-query, something went wrong my
app is not responding well
Now, we can get two or more independed react executions trees in the same page :O
❤❤❤❤❤
Redux was working weird, i tried everything to fix but at the end using reactdom's render method fixed all the issues.
Max, I as a steady student of alll your courses on Udemy (react, next, django) am highly interrested about one thing: does the lazy loading, Suspense and code splitting this way nullify the ultimate need for a bundler like webpack or ViteRoll...? I hit my head to the wall everytime when working on a react project with that annoying webpack setup for minification and code splitting. Does lazy and Suspense and the lazy imports code splitting fully replace the webpack?
Got an error with Typescript though, when const root = ReactDOM.createRoot(document.getElementById("root")) I get "TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'.Type 'null' is not assignable to type 'Element | DocumentFragment'." I know why of course, but is that expected? Just put an exclamation mark? Seems a bit hacky...
Hi Max, would you recommend jumping into nextjs framework or reactjs and express framework for a fullstack developer?
I'm not Max, though I'd recommend learning express first. nextjs uses pretty much the same code as express for api routes. So instead of jumping into nextjs, you should learn express and the concept of a rest api first.
Hi, please how can I use react-router@6 with the new React updated version@18
👍
Hi i have implemented the changes in the code but why is it that when i click my links it is not rendering. I have to refresh the browser for it to render the components.
Does this work without issues for 3rd party libraries. How will libs like redux work without upgrading?
is it implement-able on React Native?
If you are authoring. react component library what should be the dev & peer dependency versions for react, react-dom??
package --> devDep = [react 18, react dom 18], peerDep = [^17.0.0 || ^18.0.0]
OR
package --> devDep = [react = ^17, react dom = ^17], peerDep = [^17.0.0 || ^18.0.0]
Hey MAX I wanna learn how to prepare yourself for any interview(IT) only from you, would you like to teach me and many of out there like me??
And last I LOVE YOU AND MANUEL FOR Everything I got from YOU AND MANUEL.
Watching this video at night is painful due to white screen flashing between slides
Could you share the code for that first example? (The concurrency one). Thanks
You find a complete intro (incl. link to a GitHub repo with demo code) here: ruclips.net/video/lDukIAymutM/видео.html
It will be easier to digest if you compare these 2 lines:
```
const root = document.getElementById("root");
// React 17
ReactDOM.render(, root);
// React 18
ReactDom.createRoot(root).render()
```
The reaction of next js if react completely add server-side rendering 😂
how can I use material-ui/core icons in react 18
remix already has many of the features
react-redux is not installing in the 18th version.... How to overcome this situation??
So basically NEXT is laying foundation for core react features😂
i have problems with create-react-app with react v18
Thanks for sharing.
Just want to feedback that the purple background color is a little uncomfortable for me when watching this video.
react version 18 has not updated redux toolkit
Heard concurrency and i am like wait is this asyn await... 😆
Me thinking I can now create a component like `const App = async () => {}`
Will you update your udemy course?
If you watch the video, you’ll see that there basically is nothing I could update right now :)
I’ll update a few videos from render() to createRoot()
@@academind please add one concurrency search part also
DO blazor tutorial.