mardi 12 février 2019

What are best practices and design patterns regarding using libraries and client-side javascript in React?

I am currently learning React, and my previous web development has been more straightforward without a framework using server-served in-browser javascript scripts to programmatically modify Jade/Pug elements with things like Jquery, or injecting elements from other libraries.

I am now approaching React and seeing that, thankfully, a lot of that can be done straight in the .jsx. However, I am trying to do something now that would be a straight-forward script include into Pug and I am not sure how the best way to do it is.

I want to import a script from an external library (served by a CDN) into my view, then modify an element (a placeholder div in this instance that will be filled by the library) once both it and the script are loaded. Normally I would simply place a script at the bottom of the page. However, I am having issues with React not being able to load my script due to variables and functions in the library being out of scope. NPM install and importing the library at the top of my app does not fix it. I am currently binding my script to be injected in componentDidMount().

I have also tried simply placing the actual script file on the page, but no matter if the path is correct I receive a "Unexpected syntax error: <" even though the path is pointing to the correct file in my project.

Aucun commentaire:

Enregistrer un commentaire