I'm developing a frontend application that must be responsive at least for desktop and mobile resolutions.
I'm wondering what's the recommended way to structure the codebase.
Searching online various solution I found:
using something like tailwind where in every tag I can specify some "responsive" class which activate only at specific breakpoints
using #media-queries
using libraries like react-responsive
Using approach 1) I feel like the component is very messy and difficult to read: every line, every tag could be rendered or not based on classes applied. Understand what is rendered desktop or mobile side is madness.
Approach 2) is pretty ok but you have the css outside of the component.
Probably it's right to have the css outside the component for someone but I think that react encourage to encapsulate even this kind of aspect inside the component, right?
Approach 3) is basically like the approach 2) but encapsulating it in the component.
What it's not clear to me is:
are these the only approaches that are recommended nowadays?
when using something like 1) or 3) should I create N different version of the same component, where N is the number of breakpoints that I should support? Or the component should be only one with conditional logic that use different styles based on the resolution?
Duplicate the components makes all more clearer to read but has the downside that maintain all these duplicates could be very difficult (every edit, every fix, should be copy-pasted in every component).
At the same time using only one component with "responsive classes" is harder to read even if you have the advantage to maintain only one class.
What do you think?
Thanks
Related
I have taken several react courses that walk through building applications. The courses teach syntax and concepts. But how you solve a problem using react is different!
I am a dinosaur web person who is used to html/javascript.
In terms of a real-world example, such an enterprise level component, how do you tackle it? Do you follow a process where you write pseudo code first? Do you start with writing your code all in one file, and then break them into their own components?
I was going to try to create a modal component (I am sure they exist in a million places already) but for the sake of understanding, but I immediately get hung up in my own confusion.
If you need to use some simple components like modals, buttons etc., you can use one of the popular component libraries like Material UI.
I am using jointJS as a diagramming library. It creates nodes on a graph using svg elements.
I want to use react to render the content of those nodes, and since jointJS lets me configure what svg element i want it to use, all I have to do is
Configure jointJS so it knowns a node is a <foreignObject>
Retrieve that foreign object, and mount a react component inside of it using createPortal
Dynamically size the foreign object so it fits the react component.
It works fine, but I don't have enough experience with foreignObject to know if any caveats are to be expected.
Can anyone provide some feedback about their experience with such practices ?
Answering my own (old) question feels a bit like:
If you're reading this because you're faced with a similar issue, my advice is to avoid being in this situation in the first place.
Some standard CSS features will behave inconsistently, won't work at all, or will have very different outputs depending on the browser you're using.
If I remember correctly, transform and opacity are the two main problematic properties.
Also, animating those properties will rarely work at first try.
Perhaps this is such an edge case that browser bugs are not often found and reported. (and probably not prioritised).
We ended up developing a flowchart library that natively uses react to display nodes.
Cheers!!
I'm currently working on a project where a situation has come up that I haven't experienced before and not sure I know the best way to handle it. I am looking to have one parent react application that would handle my navigation (with react-router) throughout the different pages of the app and also the login/authentication.
Then in the same repository I would be looking to have multiple other react applications that would render whenever clicked on the from the navigation menu in the parent application, with the navigation menu always remaining on the page.
Does anyone have any good suggestions on how to accomplish this. Maybe even with only one build process (not a necessity, but a nice to have)
I think you are after a micro front end.
You could take a look at https://github.com/CanopyTax/single-spa/tree/master/examples
This is a great project with lots of potential. Unfortunately , I haven't been able to use it since my company insists on using create-react-app and version 2 has been problematical when trying to use the library with it.
There are various tools to help an individual to build animations with ReactJs. But each one has its own shortcomings. Following are the tools that I've explored till now:
ReactCSSTransitionGroup : Quite effective but I don't like how it introduces coupling between CSS and Javascript. For example:
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={700}
transitionLeaveTimeout={700}
></ReactCSSTransitionGroup>
Now one needs to add classes like example-enter, example-leave, example-enter-active and example-leave-active in CSS. Not a big fan of this. Besides this is not easy to manage when one is going for complex sequential animations.
ReactMotion : Another powerful tool. Useful for sequential animations as well. But implements them through delays which is not a goo approach for complex animations as introducing new elements into the chain would mean altering the delays for other elements.
ReactTransitionGroup So far my favorite solution. It exposes lifecycle hooks and one can manage the animations using tried and tested libraries like GSAP and managing complex pieces is quite easy. But it works on the DOM nodes and we know that whatever changes React undergoes outside its render method, it is not aware of that. So even though it achieves the desired output, it goes against React's way of working. For example, one can look at this fiddle https://jsfiddle.net/tahirahmed/h68s0zod/ (I didn't make this I stumbled upon it while doing my research.)
I understand that animations happen on DOM nodes and for production environments it makes total sense to use tried and tested solutions like GSAP or VelocityJs or AnimeJs. But how to make sure that all that plays well with React?
P.S. - I have tried solutions like Velocity-React and React-GSAP-Enhancer but they don't seem to get the job done as for sequential animations, they tend to rely on delays and not promises. Besides they do forced updates which is not a good way to go.
I am combining ReactCSSTransitionGroup and styled-components.
So I define all CSS and params inside the "styled component". So anyone who wants to re-use this transition will create <ExampleTransitionGroup> and all params and css are handled inside this componnet.
I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.