I have a project that uses React and I would like to trim my CSS build file. React has no html files so I'm not sure how to get UnCSS working with React. Can I use React with UnCSS? If yes how would I proceed?
As already commented it is possible to use React with uncss by supplying the urls to pages. However, there is an alternative way. React has a function renderToString which will return the output HTML as a string. you can write this to a file and pass the file to uncss for it to find all css selectors. Keep in mind that it won't detect classes added dynamically so those will have to be added manually in ignore property of options object passed to uncss. You can read more about it on uncss docs
Related
I want to use the regular Flowbite CSS code inside my React app.
https://flowbite.com/docs/components/modal/
I added the following code inside my react file:
https://flowbite.com/docs/components/modal/#default-modal
I added the CSS in the header:
And include the following JavaScript file before the end of the body element:
When I include the mentioned code (https://flowbite.com/docs/components/modal/ ), the modal just do not work.
How come this happens, can I fix it somehow?
And also, I do not want to use the Flowbite-react library as it does not have any documentation, and also do not have a lot of templates available.
I tried to add the mentioned steps and experimented, but I did not get the modal running with react
Right now what I have tried is using dangerouslyinnerHTML to try getting this done but for some reason it only renders some of my html. How would I be able to completely call a HTML file in my typescript file?
I've created a react application using create-react-app, and installed element-react as a dependency. I followed the instructions stated here to use internationalization -- specifically adding these lines of code to what I think is the entry file (App.js):
import { i18n } from 'element-react'
import locale from 'element-react/src/locale/lang/en'
i18n.use(locale);
Unfortunately, this doesn't work. The other approach stated is using webpack but I don't want to do that. How do I make internationalization work with element-react? What is the entry file in a react application?
Actually, it did work when I placed the il8n code in index.js. It just doesn't seem to work for tables when they don't have data. The workaround for that is to set the emptyText property of the Table component.
I was wondering before starting to do it, if is posible to create a react proyect(i need to do a forum widget) code it on react and the compile it and put the .js output file in other proyect, not with react the other proyects uses php symphony and twig, would be as easy as importing the script and adding a ?
Yes it can be done. The bundle of a react app is a complete js with everything that you need to run it. At the end you only import one js file in your html. I recommend you use a bundler library like webpack or browserify to generate a minified bundle and apply other functionality before creating the final bundle.
In React, there is two ways to use the react file. one is JSX and another is js file. my doubt is why react created new extension to develop the react application event though js file format is getting support by it.
You can use js extensions for JSX components if you want. But actually JSX is not JS standard. I think thats why they created a new extension. Being strict, JSX is not JS.
Some eslint rules, like airbnt ruleset, force to you to use .jsx extension for React components, and .js extensions for JS 'plain' code.
Here there is a interesing thread discussing about that:
https://github.com/airbnb/javascript/pull/985