Working with CSS in React [closed] - css

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am a beginner in React. I have been coding in AngularJS and bootstrap so far. I want to create an responsive application.
I have couple of questions to the developers who are already working on React:
My inclination towards something like bootstrap is because I do not want to spend a lot of time writing CSS. Bootstrap will give me ready CSS for common components like buttons, forms etc...but as bootstrap.js requires jQuery, does bootstrap works well with React? Can I use bootstrap 3 with React to create a responsive app? If not, is there any other CSS library I can use which works well for React?
In Angular, it was pretty easy to use some ready components from libraries like AngularUI which provided most common components one would ever need for an application. Is there any similar reliable library available alongside React as well which gives you common React components ?
I do not have any code samples at the moment because I have not really started yet and just want to get few doubts clarified first.

For bootstrap css styles, you should use
https://react-bootstrap.github.io
This is pretty good for react apps and it has many components with options to customize it's style.
Sorry, I'm not aware of any library like angular UI..

Related

Best practice to style react components? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 months ago.
Improve this question
I started working on an app made with tsx. This app has a general stylesheet for everything and some of the components have inline styling. Personally it feels disorganized.
I'm a biginner at css so I don't know what would be the best way to aproach this. I thought of two options: do all inline styling or make a stylesheet for each component. The first feels wrong ,in the second I'm gonna end up with 30 stylesheets and the overrides are going to mess up everithing.
The styled-components library is universally popular and you'll find plenty of support from the large community that uses it. With this you can write your css inside your component files. I'd also recommend getting the VS-Code extension for it so that you get css intellisense.

How to get around with conflict of bootstrap class names [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
We got a project which was handed to over to us by the client. In that say 38 screens are to be developed by us, the thing is they have already developed several screens before hand(more than 20) and handed over to us. The app is a hybrid mobile app, single page(using angular) and cordova. So the thing is they did not use any framework like bootstrap to develop the pages they have developed before handling it over to us. And other thing to note is since we have to use angular, all the css files will be minified into a single file. And they used the class names like row in their project, which are conflicting with the names in the bootstrap. But desperately want to use bootstrap, is there any way that we can use bootstrap without conflicting their already developed class names, or simply put, we don't want to modify their old classes in css, In a single page environment. Any suggestions are welcome.
Yes there is one solution, isolating Bootstrap CSS.
The idea is editing the bootstrap LESS file, and crunching adding a class (Suppose bootstrap-iso) before every element and to use bootstrap wrapping around like this
<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
Good news is you don't need to crunch and change : Here is link of crunched css file
Get this file, link to your site and use wrapping around like above. Hope this would be helpful to you.
Reference, Learn More

Why should one use React with Meteor? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm new to both Meteor and React and I didn't see the importance of using one with the other.
What features React provides that doesn't exist in Meteor ?
React uses a different approach on building and managing UI interfaces.
For example Blaze uses jQuery to manipulate the DOM directly, while react.js is working on a virtual DOM (unattached) and when there is an update it diffs the actual & virtual DOMs and updates only the parts that differ, to make the actual DOM reflect the changes.
The big advantage of react is that you can construct reusable UI components (something similar to web components).
I would very much suggest reading this great article on react & meteor
Update 03.02.2016
The guys from Kadira, who are well versed in meteor and offer professional tooling for meteor, say that react is the way. They also published a mantra - which is basically a blueprint on how to build proper meteor apps. I suggest reading into it

Wordpress theme development and bootstrap [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just started to explore the Bootstrap project which seems nice to use in web development. I read some articles, some of them where sceptical to the combination of Wordpress and Bootstrap. This was due to the fact that (as I understand it) Bootstrap has it's own pre defined classes that you are supposed to add to your html tags, while Wordpress has another set of classes for the same elements.
I understand the problem and I would like to know if there are any "best practices" regarding this. I know that there exists plugins for this task but I like to understand this myself. I think that the trickiest part is the auto generated wp-menus and those things, am I right?
Question:
I think (without further investigation) that I in some situations want to map a wordpress class (eg. wp-menu classes) to a Bootstrap class. How do I do that?
Twitter Bootstrap will help you to build responsive theme for wordpress quickly. You can check the following link to know the difference of major common twitter bootstrap's classes that means when you should use which sets of class. If you want to add or alter the class of Wordpress menu, you should customize the Walker_Nav_Menu class. This link will help you. You can follow the wordpress standard. And finally there are many wordpress theme development frameworks which have already bootstrap. i.e. roots, underscores and so on. I like these both.

If a codebase includes Twitter Bootstrap, should I use it in preference to hand-coding? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
A codebase includes Twitter Bootstrap, I can achieve a design for a component without using Twitter Bootstrap classes & elements. I can also achieve the design using Twitter Bootstrap classes & elements, overriding styles that are not applicable (but come with the built-in classes from Twitter Bootstrap). Which approach should I favor?
If the project already includes Bootstrap, it would probably be best to stick to the conventions of the project and use Bootstrap. If you have full control of the project you might want to remove Bootstrap, but either way it would be good to keep things consistent throughout.
Ask other coders you work with. If you're going to rewrite in your own way all the stuff that others are using and getting for free from Bootstrap, you will not make anyones life any easier.
This is probably going to result in very subjective answers, but I'll try to answer as well as I can.
I think it depends on the goals for your project, as well as the target design you have in mind.
If your priority is quick and low effort, maybe you want to use Bootstrap. That's where it seems to slot into development - when you don't want to, or can't, spend the time to do a custom job.
If you're hoping to end up with a project that looks like effort has gone into it, avoiding the cookie cutter feel you get from a popular visual framework is probably worth the effort.

Resources