Please explain to me why the first option doesn't work and the second one does.
Related
So I decided on taking it upon myself to make a React template with Deno as the backend. So far its been a good balance between learning something that is familiar (React) and new (Deno). Ultimately I would like to make it usable so that anyone using React can download it and get right in. With that said, there is one issue I am having and its with CSS.
While I can import the components CSS into my component, Deno does not recognize it when running the server. It will throw an "Unknown MediaType" error. So far there is only 2 workarounds I've found:
Use inline styling and turn the CSS for that attribute into an object.
Put all the CSS into the static file thereby making the file longer.
Personally I would choose the second option than the first because at least I could use stuff like media queries. I have tried using the ESM version of the "styled-components" module yet that doesn't work either. Can anyone share what they have been doing?
Solved it.
I ended up using the ESM version of the "styled-components" module and then set up the server-side rendering in the response body. Cant believe this gave me 2 weeks of headaches.
I have two theme files: light.css and dark.css. I want to switch between the two themes with the useState React Hook (or another method in a react functional components).
For example, I have this in my Navbar functional component:
import "./light.css"
So I want a mechanism to import (or rather switch) the two files using the hooks based on a user action by pressing a toggle or a button on the Navbar which would call a 'setTheme' and have that in a useEffect block.
Does that make sense? If yes, how do I do that? All the tutorials I can find are based on hardcoded css while in my situation I must use the two files mentioned above. thanks
Solved it!
I basically used what I was suggesting in my question but with an extra twist:
I used those hooks: useState, useEffect and useContext
the useState: to switch the values between dark and light.
the useContext: to write in the localstorage the theme: item (for persistence)
the useEffect: to check the value from the local storage each time the theme value is changed + refresh the browser.
Not sure if it is the neatest solution, but it works and saves the user preference which is a plus for me.
I'm working on a React app. I have a few different stylesheets to restyle the same elements. Let's say for sake of this question I have two that have identical elements but different styles. Right now, in the app, I just import it with:
import './Stylesheet1.css';
What I'd like to do is, based on a setting for that customer in a database, it would switch to using ./Stylesheet2.css instead.
I know there are extra modules to include out there that may help and I could do things with dynamically building stylesheets and I may need to go to those options, but for now, I'd like to see if there is simply some way to dynamically swap out which CSS file I'm pointed to.
Well another way you can do this is as follow:
import style1 from './Stylesheet1.css';
import style2 from './Stylesheet1.css';
It seems pretty absurd that at the beginning of each component file or each layout or each routing file, I have to import React, ReactMounter and stuff like that.
Is there any way around this? Ideally I would love to have each JSX file simply have the definition of something like ReactComponentAlpha = React.createComponent(...); without crap at the header.
Well having an explicit import in every file/module so that you always know what you are working is sort of the point. But you can try to work around that if you like by importing React into your global scope by assigning it explicitly to a global reference. I did not try this, but I think it should work like so:
in client/main.js:
import _React from 'react';
React = _React;
Give it a spin and let me know if it does the job for you.
I've just imported a Flex component into my project.
I have a theory question about importing.
all the imports statements in the component source files started with "com.subFolder.etc", but I have preferred to move the component folders into "componentName" and to replace all import statements as "componentName.com.subFolder.etc"
Is this ok ? Everything works perfectly, but I was wondering if the method is correct.
thanks
You can put the components anywhere you like, however you want to organize them. People will site best practices and theory but if you know where everything is and you tell the compiler where they are:
import componentName.com.subFolder.componentToBeUsed;
Everything will compile and run just fine.
Usually you will see code and components broken up in a domain model.
So you'll have:
com.yoursite.views
com.yoursite.events
com.someothersite.renderers
Which correspond to:
/com/yoursite/views
/com/yoursite/events
Basically all of your code living in folders within /com/yoursite/
and:
/com/someothersite/renderers
being a custom renderer you imported from someothersite.com to use in your application.
In the end, for the compiler and the flash player I don't think it matters where you put things as long as your happy and understand it all...and of course 6 months from now when you come back to look at this code!
It's totally correct, yes.
Note that Flex Builder (if you're using it) can automatically replace your import statements/class name when you rename a directory or a .mxml/.as file.
I never tried moving a complete structure, though, but I would't be surprised if it worked too.