I am trying to get more experience by implementing various web visual effects that I've seen online. The one I'm working on is to create a 'cursor trail' effect where the cursor trail is used to reveal a background image. For more context, you can find the inspiration for this effect here.
The CodePen that I have linked above contains an HTML file, a CSS file, and a JS file. For starters, I am trying to transfer this functionality into a simple React app. To do this, I first initialized a basic/vanilla react app:
npx create-react-app cursor_trails_effect
I'm having trouble incorporating this cursor trails effect into my React app. From the CodePen, I'm easily able to integrate the HTML and CSS parts into my React app, but am unsure how to connect to and execute the JS script that is part. Yet it makes me wonder, in general, how someone should go about integrating such a JS script into the React framework of web development?
Prior to posting this question, I conducted considerable research to understand how to execute scripts from external (.js) files, or use the <script> tag in React, and have tried to use a number of packages that claim to accomplish this (such as 'react-load-script', 'react-render-html', 'react-script-tag', 'dangerously-set-inner-html', 'react-helmet') but to no success.
Related
very much a newbie from a developer perespective but will do my best to explain.
Essentially my small startup offers a solution whereby you can embed some simple HTML/JS snippet onto a page and then style by inheriting/customising with your own brand css etc. That snippet calls our service to display 3rd party infortmation but the the advantage is it's embedded in the customers site.
In most cases we demo it to potential clients by pasting it into an existing page on their site using proxyman's map local tool to override. However with the rise in react based sites this approach isn't working as the code is handled in the app so it simply just overrides when we refresh the page.
I'm wondering if there is a workaround or a tool out there that would stop the react experience from overriding the snippet we are dropping in via proxyman?
Any help appreciated!
I've looked into a couple chrome extensions that supress react but that hasn't worked and there's no docs on proxyman that address it
I'm fairly new on the React scene and just finished a few small react applications. I deployed two of these applications to Github Pages, and they both function perfectly.
However, I noticed that the files in my repository are minified. Not only that, but the language meter shows it as 100% html. It's nitpicky, but I'd like for it to display JavaScript/CSS too. I would greatly prefer my files be visible, just in case anyone wanted to look at how my application was built (mainly recruiters).
Is there some way to make these files visible/UNminified without sacrificing performance?
Is there any reason I wouldn't necessarily need to undertake this? --> (would employers care?)
You're committing your built project, but you should upload the source code!
To expose your github pages you have to build the project inside the docs folder, so you can have source code and build on the same branch!
I have a quite simple question, does anybody know if there is some library out there for JS that could take in Sketch json output and give me back html in a form that I could render directly in browser (so not in form of html/css files but rather as code)?
There is https://www.animaapp.com/ but as far as I understand they export html and css in form of files.
I believe Figma or Zeplin both allow to import Sketch files so I wonder is there something open source out there that I could also use to render our Sketch file/json?
It requires efforts to write a program to convert Sketch into HTML/CSS, we have implemented our own one in our solution.
But the code of direct conversion is unstructural and not responsive, only works for fixed layout.
You can start from the repo below
https://github.com/mludowise/Sketch-HTML-Export
It takes us around 2 months to write a new one for a better quality of conversion.
You can use Desech Studio to import Sketch and then export as React.
The Sketch import will not be 100%. Here's a youtube video that gives more details, but they key things are:
html is positioned relatively with grids
imports all the css
imports images and svgs marked for export
As for React, it uses Facebook's create-react-app as a base. This is the github repo for the Desech Studio react plugin. Ultimately you can fork the react plugin repo and add your own code base and use that instead of the official react plugin.
But I agree with #pxCode This is not a 2 clicks import/export process. It will involve some work from your end too.
I am trying to serve a React widget for a Chatbot messenger like Intercom widget. Everything works fine until the SEO team argues with me about the size of the downloaded script.
I'm using:
React 16.13.1
React-scripts 3.4.1
Typescript 3.9.6
Redux 4.0.5
Styled-components 5.1.1
Material-UI 4.11.0
...
It weighs ~570k (gzipped) and that costs around 25 points on Google lighthouse benchmark.
So, just like Intercom did when they face the same issue, I split my code into chunks using dynamic import() feature. Now, when I run the benchmark it gives a good mark (I gain ~15 points) and everything goes green on dev mode.
But, I'm not sure anymore:
how to integrate my widget's chunks on customer's pages? (of course not as they are in dev mode: 5 separate script tags)
Which chunk/script from the generated ones should I use, and which one come dynamically?
do chunks really call each other only when needed? (because they don't look so!)
Do orders make a difference? (JS so I think it does)
I used to integrate similar script before modification:
<script
src="cdn.myhost.com/script.min.js"
data-lang="en"
data-license="XXX-XXX"
data-options='{"tags":["test"]}'
/>
Any suggestions will be helpful!
I've been trying to get jQuery datatables to work in a react component. My app doesn't use bootstrap but I want to use it for my tables so I've scoped bootstrap to a class so i can use it in a div without affecting the rest of the application.
I read the following article Integrating React and Datatables — not as hard as advertised, but the article presents a use case that is more basic than I think many jQuery datatables users use. npm datatables doesn't give you access to extensions (search, scroller, button functions, etc), and everything that comes without the extensions is easy enough that you might as well use an existing react table like primereact, react-table, griddle, react-data-grid, reactabular, fixed-data-table, or react-virtualized.
These offer many options but when tested, had at least 1 or more problems that prevented it from being easily adopted and use all the features needed. Some have issues i think I could help fix after I'm more seasoned with react, but I'm not there yet. I've used jQuery datatables in many production environments without any problems. It's a major sticking point moving to react.
So after weeks of searching and testing and trying to work through bugs, I'm back to trying to bring jQuery datatables into my react app. I realize it's not the "react way" but based on the react docs it's possible and there's a proper way to approach it. I don't need it to react with anything outside of its container or div i place it in.
Using the builder is the recommended way to download datatables so you can get your customized components. I'm also downloading rather than using the CDN because this is a local app and needs to work when there is LAN but no WAN access. I'm using create-react-app and I tried to download datatables from here to a folder in my project and had the following problems:
hot-reload started taking forever (>1min)
the page itself was moving at a crawl
extensions didn't seem to be working (could have been locked up?)
How do you use jQuery datatables in a react app while still being able to use the datatables extensions and without killing the hot-reload for create-react-app? Can anyone provide a working example?
Update
Apparently jQuery datatables has made some major updates since the last time I tried to use their builder and now it includes a way to npm install the extensions too. I'll post a github of a working solution if i find one before someone else can update.
Update
Here is a github i made of a react version that is partially working and a basic html/js/css version that is fully working. The readme tells what is working and not working. Can anyone show me why this not working properly?