This tutorial assumes that you have at least a beginner’s grasp of HTML and JavaScript.The widget will take the stock symbol as parameter and we need to be able to inject it several times in the same HTML page, either with the same, or other stock symbols.If you are keen to learn React from the ground-up feel free to check Learn and Understand React JS on Zenva Academy which covers all the basics + lots of bonus topics like React Router and Flux. We’ll create a widget displaying a stock price, because it seems like the trendy thing to do right now ! ![]() Nothing extraordinary, but just enough so that you can start to feel the interest of using React rather than coding it using jQuery… I have chosen to create a widget that needs to consume an API to display some information. Well, you’re in luck, there is a way ! Hopefully it will help you streamline your widget development, and hey, you might even enjoy doing it after that ! What we’ll build You just can’t put your finger on the right setup to do so ! ![]() Like me, you like well built apps and websites, so the perspective of creating a pure javascript widget to inject html in the DOM by yourself is pure evil ! You can’t sleep at night thinking that you’ll have to use jQuery or reinvent the wheel by coding again some utils functions that npm packages have had in store for a decade.Īlso, since you know React (or not, don’t leave just for that), you know that there might be a way to build a proper mini app that can instantiate in any website because, after all, that’s what a React app does. After all, web development is all about integration, and if you can’t create a component with a single responsibility principle and inject it anywhere, well …. Chances are, if you’re doing web applications, that you will at least once, come across a need where you want to embed some component in a website that you did not develop, or one that is in a different technology than your preferred stack.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |