Build React.js From Scratch | Course Preview

🌟 Order Here!
buildreactjs.io
👨‍💻 GitHub Starter Code!
github.com/pkellz/sage-starter
⏰ Timestamps
0:00 - Intro
3:02 - Download starter code from GitHub
3:50 - Explore project structure
4:48 - Deconstructing JSX and React.createElement()
9:31 - Deconstructing React.render()
14:59 - Rewriting our own Sage.createElement() function
20:46 - Telling JSX to use our new Sage.createElement() function
21:42 - Rewriting our own Sage.render() function
28:00 - Testing our new custom library!
🌎 Find Me Here:
Twitter: / realdevsage
Ebooks: payhip.com/devsage
Discord: / discord
Merch: cottonbureau.com/people/devsage

[@DevSage]

🌟 Order Here!
buildreactjs.io
👨‍💻 GitHub Starter Code!
github.com/pkellz/sage-starter
⏰Timestamps
0:00 - Intro
3:02 - Download starter code from GitHub
3:50 - Explore project structure
4:48 - Deconstructing JSX and React.createElement()
9:31 - Deconstructing React.render()
14:59 - Rewriting our own Sage.createElement() function
20:46 - Telling JSX to use our new Sage.createElement() function
21:42 - Rewriting our own Sage.render() function
28:00 - Testing our new custom library!

[@giovannigonzaga6865]

I tried purchasing the course in your website but it is not working

[@DevSage]

@@giovannigonzaga6865 Could you give me more information? Is it not letting you pay? You can email me at [e-mail]

[@meonitelexdee3432]

The React Team should buy it and release it to the public to recruit new contributors!

[@yinonelbaz5309]

Amazing channel
You upload rare materials that are hard to find online

[@aaf2011]

Thanks man, this is really awesome I never seen someone explain react this way. You have got me.. 🙏🙏 Keep up

[@DevSage]

Glad you enjoyed!

[@jornejongsma]

A react with a virtual dom?! Looks pretty cool and promising, seeing your course site.

[@Geomaverick124]

This is pretty cool. I only know of Traversy Media and Stephen Grider who have courses that teach people how to build a library or framework. Keep up the good work!

[@DevSage]

💪🏾💪🏾

[@tuananhdo1870]

Can I know what is the Stephen Grider's course name?

[@natnichanachai9173]

Thanks to you

[@i_youtube_]

I hope you will expand this library and more topics to the course

[@suyesh]

Great channel man

[@DevSage]

Thank you Suyesh

[@carlosjulio8364]

Respect ♥

[@Krzysiekoy]

There is one thing that I don't quite get how it works. You have your createElement function. That function expects to be called with some arguments: type, props, and a number of child arguments all consolidated into ...children. Ok, I get this part.
But then, how does Sage Library get "passed into" createElement? Is this done by Babel "behind the scenes"?
So, do I get this right, that JSX is not a really part of React, but rather is a helpful syntax that Babel translates back into valid javascript? So, while creating our Sage library, we will be using JSX "out of the box" and babel will do the heavy lifting for us?
I'd like to see what does Sage Library look like "after translation" if that makes sense. Like what actually gets passed into the createElement function.

[@DevSage]

"But then, how does Sage Library get "passed into" createElement? Is this done by Babel 'behind the scenes'?"
- Babel is going to convert the JSX to Sage.createElement() calls (similar to how it does with the React.createElement). We tell Babel to use our custom Sage.createElement function instead of React.createElement by adding the JSX pragma instruction.
JSX is not a part of React. You can use React without using any JSX at all. Yes it's just a convenient way to represent our React elements without writing a whole bunch of createElement calls ourselves.
"I'd like to see what does Sage Library look like "after translation" if that makes sense."
- This would get translated to something like this. Click this playcode link:
playcode.io/927302

[@Krzysiekoy]

@@DevSage "Babel is going to convert the JSX to Sage.createElement() calls"
- OOOHHH, Ok, I totally didn't get this at first. I thought that the JSX would be converted into "something javascripty" and that "thing" would then get passed into createElement, but now that I think about, it doesn't make sense. So JSX being coverted directly into Sage.createElement() calls makes total sense now.
Thanks for you reply :)

[@DevSage]

@@Krzysiekoy No problem 👍🏽

[@mac.ignacio]

How about you have a "Conditional Statement" inside your element? Your code only works in basic element without conditional expression.

[@antwierasmus]

is this course still available? I don't see anything on the repo you showed in the video

[@antwierasmus]

also may I know if it's been updated, since there are few things that has changed with react server components

[@DevSage]

The course is still available at buildreactjs.io. But no the course has not been updated yet. Currently the course is focused on how React 16 works.

[@antwierasmus]

@@DevSage I wish this is updated since there have been a lot of changes since react 18. I want to know more in order to contribute to react open source

[@JohnHaugeland]

Does this cover parsing the actual jsx?

[@DevSage]

Babel is going to parse the JSX into Sage.createElement() calls

[@JohnHaugeland]

ah. so you aren't actually implementing react, you're just implementing the renderer

[@DevSage]

@@JohnHaugeland Not sure I understand what the difference is. Maybe you could elaborate?

[@JohnHaugeland]

@@DevSage - you're implementing react if you can parse react code without some other tool like babel doing almost all of the difficult work
you're not implementing react if you're just relying on babel to do all the hard work

[@JohnHaugeland]

most of the work in react is the jsx parsing, which here is just outsourced to an existing tool

[@programmingholic]

Sir Looking for Javascript Course beginner to Advance 🙏🙏

[@gabrielmichaud4169]

too