If you want to continue your learning journey, don't miss How these tools and libraries work alone and how you can best use them together Taking things apart from otherĪbstractions and adding them back one at a time can really help you understand Was instructive and helped you understand what the different parts of the Reactįundamental abstractions are responsible for. Now, I wouldn't recommend building your whole app like this, but hopefully this To get React running in an index.html file without any build tools whatsoever: The page and you'll see something like this:, // 'Hello World', // ) const element = Hello WorldĪnd that's it! So here's the simplified and final version of everything you need That element is a regular JavaScript object. const element = document.createElement('div') // element.textContent = 'Hello World' // element.className = 'container' // rootElement.append(element) const element = React. Great, with React on the page (as the global variable React), we can now start The browser to load that JavaScript for us: JavaScript of its own, so we need to add separate script tags to the page for Watch "Create a User Interface with React's createElement API" on egghead.ioĪlright, let's add React to the page. Now what you'll see on the page is "Hello World" that's rendered inside a div Great, now that we have the rootElement, let's create a DOM element to putĬonst element = document. We give it the id of root to make it easy to find that DOM node in ourĬonst rootElement = document. But let's keep those in.)Īlright, we're going to create DOM nodes using JavaScript and put them into aĬontainer or "root" DOM node.
(Technically, you don't even need that much because the browser is veryįorgiving when it comes to this kind of thing and it'll add the html andīody tags for you automatically. Watch "Create a User Interface with Vanilla JavaScript and DOM" on egghead.io The next little bit will basically be a simple version of what you can watch forįree in my Beginner's Guide to React course on Simple as possible: a straight-up index.html file. So, let's strip everything away and make it as
If you don't know where react ends and webpack starts you won'tīe as effective as using either. Use a ton of tools together (both development tools as well as libraries we ship So let's go ahead and try this with React. Way they weren't intended, because you'll understand what their intended use When you use them in the future, you won't try to put two pieces together in a Their capabilities and what role they play in the overall application. Those rubber bands apart and exploring them in isolation. Their greatest potential, then you'll find you're much more effective by taking Honestly doesn't really matter all that much because all you care about isīut if you really want to get a solid foundation and use the abstractions to Where you don't know when one abstraction starts and the other ends and it
Is ship, it's natural to see all of those things as one big ball of rubber bands When we're talking about building applications, we're putting together manyĭifferent abstractions (tools and libraries) to do so. Valuable things you can do is remove everything until all you're left with is Understanding of something you're already familiar with), one of the most When you're learning something new (or you want to solidify your foundational Read on to follow the step-by-step process for how we get here (and enjoy the
0 kommentar(er)
