Hey
I am curious to see what CSS frameworks people using in conjunction with React, now that it seem to have caught on within the Meteor community.
I have tried Material UI, but I felt it was too restrictive in many cases, so I’ve decided to find something else
I’ve been using Semantic UI with React & Meteor on my latest project and am finding they all work together remarkably well.
There are a few little gotchas as can be expected, but most of it just figuring out which part of the stack should take responsibility for things (e.g. using a Meteor ReactiveVar to keep track of what state an onboarding modal’s form is in so React can render the correct presentation, like a button showing loading indicator etc, and deciding on which Semantic UI callback to use to set that ReactiveVar). Sounds like it could be tricky but I’m finding it’s all very intuitive in practice. Surprisingly so, I haven’t had this much FUN developing with multiple new technologies in a long time.
So yes, highly recommend checking out Semantic UI, they even have React integration examples in their docs to help get you started.
I did have a brief look at Semantic, but I wasn’t too fond of using JQuery inside of my React components. Is there any way to avoid this?
I’m not sure to be honest - I’m so comfortable with jQuery and it’s bundled by default with Meteor that it never really occurred to me not to use it. Does it matter using it with React as long as you’re not changing the DOM? (By which I mean, are there reasons I’m perhaps not aware of why mixing jQuery/React is a VeryBadThing™?).
The only jQuery I’m tending to write within React is to get input values (which I suppose I should really replace with React refs) and calling things like .form() or .modal() to initialize Semantic UI’s modules. You could probably limit your jQuery exposure to just the initialization/refresh calls (which usually go in componentDidMount() and/or componentDidUpdate()). I’m fairly new to this particular combo stack so it’s possible I’m doing something horribly wrong. So far though, no great calamities to report!
Is Animation work well with Semantic UI? can you tell me how to use Semantic’s Animation with react ? 
I have the same question.
I quite liked the look of MUI as it looks lightweight.
they have a beta version of something for React
https://www.muicss.com/docs/v1/react/boilerplate-html
but my question is, if we just use the HTML/CSS version, will that get broken by React? ie different ways to control the UI fighting? Or is it just “cleaner” to use ReactJS calls to build up the UI?
addtionally material-ui is broken into many sub packages,
const RaisedButton = require('material-ui/lib/raised-button');
NOT
const Mui = require('material-ui');
const RaisedButton = Mui.RaisedButton;
so just including the parts you need in your app.
I’m not clear how this works with Meteor.npmRequire
if there’s a way to just bundle in parts of an npm module into your app?