Helo, I am new to reactJS. I am currently doing a full stack job on a forum-like website.
I was naively wondering if there is no way to just ignore the CSS step...
For example, I want to declare a standard component, let's say a button or a form. I just want to simply set the className so the it matches with the CSS stuff.
I did some search, and found nothing very convenient.
And of course, this "library" has to be open-source.
Don't know if I am clear.
Thank you.
Hi from the looks of it and the comments, it looks like you want a pre-built UI library. Basically, for React these are called UI Libraries, we have React-Bootstrap, Material UI and Kendo UI as UI libraries. They have pre-made React components with all the styling already implemented and any customization can be done separately.
You can have a look at React-Bootstrap for an easy solution to your problem.
Related
After clicking on the Set tag/status on left, I want to open a card like this on the right.
What is the good solution for it in React? Regular CSS or material ui or react-bootstrap will be fine.
it is a nice question but depends on how much time you have and how much determinate you are.
Showing some solutions related about you asked.
Regular CSS
You will need to use Javascript to support you on the hide/show logic using CSS and JS tricks and proprieties.
It is more complicated because there is no pattern until you create yours or use someone's but on the other hand you can practice more Vanilla JS and improve your CSS skills.
Material UI
It is a good option if you want to use robust components to support you with customization and style patterns.
It has a learning scale to make the usage easier but after that it has a good flow to use its components and customize them.
Some tips if you choose Material UI, use its theme override to put your own theme into all Material UI stuff using the lib styled-components and try not to customize all components using only CSS, use props following the docs, it will be scalable.
react-bootstrap
If you are used to use bootstrap with HTML, CSS and JS I do recomend to use it because it will be faster to you to build it, but if not I recommend you to go with Material UI.
But why Material UI and not react-bootstrap, because if you have never worked with anyone so learning about Material UI using React you be more advantageous considering that its components are good to use and on almost every case them solve the problem.
Final
These are what I think about those options you gave.
I really like Material UI and what they build, the components are so easy to understand and customize using those props or classes. The lib has some integrations and tools to help on style guide creation using override patterns.
If you have never tried it, I recommend you to do that and use that.
I'm building a web application using ReactJS.
I would like to know if it's a good idea to combine React and Bootstrap or if it's completely useless? Are there things I can do with one and I can't do with the others?
I know that Bootstrap is a Framework and React is a library but I'd like to know what's the difference between the two, since I read some articles explaining the difference between a library and a framework and couldn't really understand!
I would recommend going through this tutorial:
https://ourcodeworld.com/articles/read/561/how-to-use-components-of-bootstrap-4-in-reactjs
Basically, they aren't meant for the same purpose: you can write the business logic (~how your app will work) in ReactJS and then you can show it to the end user with some custom CSS class magic written in Bootstrap 4.
Hope that helps!
The difference between a library and a framework is explained really well in the following Stackoverflow post: What is the difference between a framework and a library?
If you want to use Bootstrap 4 in ReactJS you can use the following super easy and nice to use library: Reactstrap.
I hope this helps you.
Bootstrap is a CSS framework, It is used to make responsive and beautiful websites.
React js is a view library and makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
You can use them together if you want to build interactive and beautiful
websites.
To include bootstrap in React,
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that you get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. However if you are only interested in css, then it's perfect.
Using this you can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If you want simple setup, then you can use reactstrap link
Other frameworks include react-bootstrap link
This does not mean, that you have to use bootstrap only. You can use any other css framework like Bulma, Foundation etc.
Is it worth it using jQuery with React ?
My opinion is not to use jQuery with React, as jQuery or jQuery plugins changes DOM structure, This in turn causes problems with reactjs virtual DOM.
This does not mean you cannot use jQuery, you can, but its little different than normal use.
Reactjs has provided a way to use jQuery and other plugin here Integrating with Other Libraries
I have an AngularJS app in development, and the CSS is already done, just adding functionality.
What I now need is stuff like
date pickers
modals
tooltips
I'd love to use some of the stuff from angular-strap, but it's based on the bootstrap.css file.
If I don't include the bootstrap file, it doesn't work. If I include it, it works, but it breaks everything, my whole layout is destroyed. That happens also if I include the bootstrap.css first.
I then tried to only load partial elements from the bootstrap site. For example, the date picker from angular-strap said to use elements like tooltip, so I only used the tooltip css elements using the bootstrap customiser, then it displays but inline, not a tooltip anymore.
It's quite frustrating. Is there a way to add those amazing libraries without breaking the CSS of the existing app? I'm somehow not seeing what's really required for that.
My company's project is in the exact same situation. We use Foundations for our grid layout. But we want to use things like AngularUI which is based off of foundations.
What we've done is to include the bootstrap JS. And then selectively choose the bootstrap css that is needed. Doing it this way has given us the ability to use Datepicker & Modal. (Although, recently I found some better angular datepickers - and the angularUI datepickers just don't have the usability that I was looking for).
So it seems that what you may be missing is the JS for bootstrap. But without seeing your code it's really hard to say.
Per your request, here are some of the datepickers that I like better:
ngQuickDate
ng-bs-daterangepicker (useful for date ranges) (although, this one also has a BS dependency)
Jquery UI Datepicker (implemented as a directive)
I am currently using the jQuery autocomplete feature. Functionality wise, it works awesome!
But in terms of styling (in addition to theme roller), I would really like to see something like
http://loopj.com/jquery-tokeninput/ and
http://www.emposha.com/demo/fcbkcomplete/
I am still reading the codes in these plugin, so that I can achieve similar look/behavior. Ideally, I would rather stick with jQuery UI library than switching over to other plugin. How would one go about making this happen?
EVERYTHING in Jquery is style-able via CSS. If you want to achieve a different look, simply build CSS that will override the default styles. If there's a specific style you're trying to achieve, I'm sure quite a few of us would be happy to help with ideas to make them happen.
BTW, the emposa.com site link you provided is completely dead. I'm hoping you're not trying to achieve THAT style....
I don't know if this is just laziness from my part or what, but is there any jquery plugin that takes a form (inputs) and build a stylized form with the colorset of the ui theme used in the page? Even better, there is a tut where it explains this idea? It's a little bit tricky to explain (trickier even with my poor english), but I hope that you got the idea.
Any suggestion?
Wijmo is a jQuery UI and jQuery UI theme based library and they offer form decorators in their free version.
Also have a look at the great jQuery UI CSS Framework documentation. You might just be able to solve your problem by just adding the appropriate classes to your form elements.
It is possible that you write a simple jQuery widget that traverse your inputs and add jQuery theme styles (ui-..... classes) to them.
You can find the idea at:
http://www.tuttoaster.com/enhancing-forms-using-jquery-ui/12/
The widget is ready at:
http://pastebin.com/bu68sDha
You may need to make some small changes in the widget.
This solution is very good if you have some server side components that build the form for you and make the final htmls ready (like jsp tags)