{"id":24,"date":"2024-02-09T00:41:20","date_gmt":"2024-02-09T00:41:20","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/bracamod\/?p=24"},"modified":"2024-02-09T00:41:20","modified_gmt":"2024-02-09T00:41:20","slug":"working-with-react","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/bracamod\/2024\/02\/09\/working-with-react\/","title":{"rendered":"Working with React"},"content":{"rendered":"\n<p>So, over the course of this Capstone project, building a visualization tool for Fire\/EMS professionals, the primary technology my team and I have been using is the React Javascript framework. It\u2019s a powerful JavaScript library used for building user interfaces by breaking down pieces of a webpage into \u2018components\u2019, giving them characteristics and capabilities and passing them around the logic of your code like functions. This makes making code modular and reusable fairly easy and intuitive because that mentality is baked right into the framework\u2019s design philosophy. In general, it\u2019s been fun to learn how to use because it\u2019s so widely adopted in the industry and I\u2019d been meaning to spend more time with it.<\/p>\n\n\n\n<p>In our project, React is used on the client-side to create dynamic and interactive visualizations for the end-users. So far, extending the previous team\u2019s work has not been too difficult, though there have been some growing pains with learning how to make certain libraries play nicely together.<\/p>\n\n\n\n<p>I\u2019m sure there\u2019s easy ways to do this but it would be nice to know exactly how React is implementing vanilla Javascript under the hood and how the DOM is being manipulated, at least for my own sense of understanding and competence. So far, we haven\u2019t used any other tools in the general React ecosystem, like Redux or any complex CSS tools like Tailwind but we may in the future. Overall though, I\u2019m glad I\u2019ve had the opportunity to work as part of a team on this project and with this particular piece of technology.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, over the course of this Capstone project, building a visualization tool for Fire\/EMS professionals, the primary technology my team and I have been using is the React Javascript framework. It\u2019s a powerful JavaScript library used for building user interfaces &hellip; <a href=\"https:\/\/blogs.oregonstate.edu\/bracamod\/2024\/02\/09\/working-with-react\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":14137,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/users\/14137"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/posts\/24\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/bracamod\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}