Programmable styling - #15 React JS prototyping

Programming the CSS styling to allow for conditional styles integrated with the components. Shut out the pain of us scalping the CSS file and putting everything inline and as JavaScript variables. Just go with it. You will be fine.

🔗 Better Playlists on Heroku

🔗 This episode's code

- - -

In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!

And yes, this is not Travis - David and MPJ are filling in!

- - -

MPJ's channel on programming Fun Fun Function is great -

David is known as Data David discussing analytics and data -

[ablanchi]

The way you style React makes me think you would like styled-components library ;)

[Jorsfel]

There are some obvious advantages here, but for people like me who work with pre-processors like Sass every day this whole inline approach seems like a step backward in terms of readability, maintainability, and coherence for what honestly looks like not that much gain in functional terms. Sass already has variables, functions, loops, arrays, and can be used to write css very programatically already without involving js beyond the adding or removing of related classes. Handling things like variable scaling of font sizes betwen different screen sizes is surprisingly simple with Sass mixins and functions, and sure you could rewrite them as js functions, but for what gain?
Maybe this makes heaps of sense in React and if I was working with React every day maybe there'd be more obvious things to like about it and I'd love it, but for now it just seems awkward and hamstrung and the idea of doing this anywhere outside of React (and having to maintain it) is honestly frightening.

[koodauskanava]

You should call the function isOdd because odd numbers return every other number than 0, which are concidered true values in truthie expressions.

[boballen]

What's up with these warnings from the console? :
<Warning: Unsupported style property font-family. Did you mean fontFamily?>

It does the same thing with 'font-size' and bottom-margin'. When I change them to the camelCase format they work and the quotes are no longer required either. Is this a react thing or what is going on?

[catwhisperer]

So if you use inline styles and JSCSS then they are the greatest things since sliced bread but if you aren't in favor of them you aren't one of the cool kids lol. That smells a lot like hype based development to me.