![]() To get this going, we need to just create a file called index.js. There’s a plugin for this that understands JSX, and transpiles the JSX into JavaScript, which needs to be done in order to really use React. It can combine modules together into a single output file that’s typically called a bundle. ![]() Rollup is this open source project that understands JavaScript modules. For that, we need a module bundler, and Vizhub uses rollup internally. The next step is to get to a place where we can start to use JSX with React. Why use a module bundler? What is Rollup? that was a little detour of what unpkg is, and why we’re using it. ![]() For everything on NPM, it has this URL scheme where you can specify a package, a version, and a file. Unpkg is an open source project that is a global content delivery network, or CDN. It’s pretty much an efficient way of getting the files to your browser. A Content Distribution Network, also called Content Delivery Network, is where instead of just a single server serving the files, it’s a bunch of servers that are close to the people consuming them. But if you’re working in the browser like we are, you would use a CDN – a Content Distribution Network. If you were using node.js, you would say npm i - or npm install d3. You can go to and search for all sorts of libraries like React or D3. Nowadays, npm – Node Package Manager is the de-facto place where JavaScript libraries are hosted. Let me just stop and explain what is unpkg is all about. All the exports of React in a single global. So if I say console.log(React), there it is. And it should be a global variable called React in uppercase. What I really want to do is check that React is loading in here. Now if I open the Developer tools with Ctrl+Shift + J, we see the output – Hello JavaScript. Inside the tag, we can write some JavaScript like console.log("Hello JavaScript!") So now, we can access the React global by writing some JavaScript ourselves. I’m gonna make a new script tag begin script end script and then the source src attribute of this script tag will be that URL from. If I click through to View Raw, then it gives me this URL which I can use in a tag in my program here. React production.min that weighs 13 kilobytes. The UMD (Universal Module Definition.) build is what we need. But let me just poke around here and see if I can get the browser build. ![]() If I just type /react and hit Enter, it gives me the common JS build. The way I like to figure out the path for libraries is to use unpkg. And the way VizHub works with libraries is that we can just include the tag on the page, and then write some JavaScript that imports from that library. The next step here is to use the React library. What I’m gonna do next is use React to define this DOM structure, and we’ll pretty much be able to copy-paste our HTML into JSX, which sort of lets you write HTML inside JavaScript, but it also lets you sort of inject math or arbitrary JavaScript expressions. But I noted down these thoughts of what math we would want to use for defining these various coordinates. īut I was feeling a little frustrated that we couldn’t use math to figure out these coordinates. We used some CSS to make those scroll bars go away, and to set the margin to 0. Using JSX (javaScript XML) for SVG graphicsĭeriving graphics coordinates programmaticallyįor our face, here’s where we left off last time. Importing libraries using ES6 module syntax
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |