A New Way to Write React

Yeah, you can write React using CSS now. But should you? This highly experimental package generates valid, type-safe React code from CSS files and, in doing so, encourages a very specific style of coding not everybody will like.
-- my links
newletter: www.joshtriedcoding.com/
discord: / discord
github: github.com/joschan21

[@joshtriedcoding]

who wants to start developing NextCSS with me

[@ShubhamShubham-gg9fj]

Up for this 👍

[@ekchills6948]

Mee

[@labhamjain3915]

2 days from now : "Introducing Astro.css" build full stack app just using css

[@user-el9tg4tu6v]

mee

[@ayanahmad4]

I'll be glad to be part of this 😊

[@sagarchavan5894]

A solution to a problem which at first place never exist.

[@chibuzoekwue]

Exactly 👍

[@brayancuenca6925]

well it’s cool to know it’s possible

[@winfredj9820]

moved to svelte. life has been better

[@EmmanuelOdii80]

Agreed.

[@BradySie-wo6vf]

no lol this is actually so useful. imagine the conditionals you'd need otherwise with tailwindmerge etc etc and having to conditional all the variants, this approach makes things much cleaner 100%

[@CoolPupGaming]

React is a meme framework now

[@21abdullah89]

Yeah pretty much

[@joshtriedcoding]

hahaha yes and i love it

[@CoolPupGaming]

@@joshtriedcoding what are your thoughts on angular? 🤔

[@TheSnHIMshow]

JS is a meme lang 😀😀

[@te20ja04]

Haha😂

[@WarSTRIKER1299]

"I'm a full stack css developer" "You mean TS or JS, right?" "You heard me correctly"

[@sicario55]

bruh

[@atmosph]

can't wait to see when we'll be able to create full-stack apps using only css

[@rod6722]

I'd rather have a SQL front-end powered by a separate CSS back-end.

[@StabilDEV]

Styled Postgres as a templating language is a MUST

[@BarisPalabiyik]

I am probably not going to use this ever lol. But I love the options and creativity in our field.

[@tvwithtiffani]

Same. But seems like an easy way to get a language model or chatgpt to generate react components, after giving it a few examples. Think AI

[@BarisPalabiyik]

@@tvwithtiffani yeah but it's pretty unorthodox, so it wouldn't be suitable for big production projects where you aim for the broad talent pool in the industry.

[@unzoid]

rico, reset the timer.

[@azekeprofit]

They best chance to integrate business logic directly inside CSS is using calc() expressions I now want to see it happen

[@ganeshkale9665]

first i think it's new so devin not get it but, then i realize devin can go through the documentation

[@OneShore]

What makes you think devin didn't come up with MistCSS?

[@wavyboyjodii]

😂😂😂

[@ganeshkale9665]

@@OneShore I think devin will forgive us,but he will not

[@muhendisim]

[@user-jz4iz2qh9u]

I like it. I love writing CSS and this binds the code to the style which is pretty neat.

[@gabrielbianchi2246]

I’m thinking it’s crazy you took this seriously Josh😂

[@wlockuz4467]

I did not expect a silly framework like this to promote Container/Presenter pattern which is actually a solid pattern.

[@bongbuincyril6150]

Devin is waiting for u guys

[@JakobRossner-qj1wo]

I still dont understand why you want this seperation of concerns. 😅 You are using Tailwind and React. Wouldn't something like Angular be better for this seperation of concerns?

[@paglagamer8871]

Next make a framework that can Build APIs with CSS only, Node.css

[@cedi2929]

Does that mean we write Next with SCSS?

[@wlockuz4467]

Never let JS devs cook.

[@Luxcium]

I can never watch those video without having the strong illusion that Josh is my friend and that I know him like in real life... Is it just me or anyone else have that strong impression that he is such a friendly person... Maybe I am just silly or something weird...

[@thepaintedsock]

Interesting way to generate boilerplate typescript components quickly. Though I prefer to write css without a compiler to test on multiple browsers because nothing else is quicker than raw html and css templating. Once a layout is well tested then it cam be used in react land or other framework of choice.

[@ruggeddog3103]

hell noo

[@geralt36]

Exactly my reaction to this.

[@genka14]

Thought it was a joke at first, but actually quite cool

[@AbhiShake-pl3cf]

I dont think i feel good having 2 files for same thing in the same places. Its like those initial transpilation old days where we had ts and transpiled js in the same place

[@ahmedyarkhan7006]

hey josh try mint with framer motion

[@thecodeinn]

What problem does this solve??

[@hoxtygen]

Don't worry, it's about to be created.

[@PJlikePajamas]

Pretty cool, I think I like the concept better than the application of the idea.

[@CoryTheSimmons]

These comments are the same people who laughed at Atomic.CSS (which went on to HEAVILY inspire Tailwind). Mist looks really interesting. One of the pain points of making React components are style variants... It just gets really messy. Mist seems to solve that. I think CVA might do this better.

[@TheGryphon14]

What's wrong with writing an actual react code?

[@wavyboyjodii]

I had to check if it was April 1st 😂

[@irfansaeedkhan7242]

its just over complicating things, its not a solution to any problem

[@TheSnHIMshow]

Smaller git repos 🤣🤣

[@Nab_001]

" People's creativity never stops "

[@mjerez6029]

Ok, I'm moving to React now

[@ashishsharma__]

It's interesting approach but I'm not sure I'm going to ever use it😂

[@theyreMineralsMarie]

This is actually not that bad. It just adds class names to components and generates types. If you style your react components using basic css and the className prop then this is really no different.

[@labhamjain3915]

CVA already does it and it's better in my opinion than this

[@theyreMineralsMarie]

@@labhamjain3915 you're right, CVA is better. This "MistCSS" project is just an interesting alternative that simply shows the flexibility of JS/Typescript.

[@merveillevaneck5906]

"perfect" DX but i have to fix imports manually 😂 all jokes aside tho this is not a bad take, but definitely needs a lot more tooling around it in order to be viable for a dev team to use

[@Smartercow]

It's too much unnecessary files. Seems cool tho if you want to separate css logic especially when using tailwind css but .module.css does accomplish with one less file

[@baldcoder_]

Nope. Tailwind is still a better option for reusable components. This specifically solves a problem that Styled Components created. But there are other (better) options out there that don't have Styled Components issues and don't need you to write a file, generate another file, and keep your eye on the import path.

[@ibrahimmohammed3484]

now i've seen everything

[@igorskyflyer]

Next framework: bring PHP into a React component

[@eduardo_assuncao]

Ow my gosh! The future is here 🤯

[@coreydevs]

ima head out

[@wizz1e80]

Why ?

[@buddy.abc123]

People are looking for problems that aren't there. We are nearing the singularity

[@nattawodsatee4068]

If it’s gonna generate the component for you. At least it should generate forwardRef instead of pray to new React to stop complaining about passing ref into function.

[@KrishnaJha25]

Damnnn!! ❤

[@OneShore]

Seems about right if you're already down the React rabbit hole.

[@BradySie-wo6vf]

no but why is this actually so useful for creating generic components tho

[@ziyadtaleb]

But why ?

[@griffadev]

What an absolute travesty i hope this is a meme package

[@joe-robin]

why ?

[@81NARY]

Nahh, who let the bro cook 😂

[@nanoadam415]

Is it only me or did anyone else think we were writing full on React logic in CSS

[@kelvinsmith4894]

Honestly I don't like it

[@julianklumpers]

One thing that is missing, is "AI"....... :P

[@turbdonkey]

I don't see the point. I would have to learn a new way to write code which doesn't have any benefits that I can tell.

[@MyCodingDiarie]

You're changing lives with your content. Keep inspiring!

[@joe_j]

Why don't you use windows 11?

[@joe_j]

So far at 4:50 I feel that so many steps to take to accomplish a very simple thing

[@joe_j]

Why dont they make one that reduces the number of files

[@idanmasas]

Why tho

[@coolemur976]

Nah. In smal projects it's just too much hustle. And in big projects you just can't trust every developer to follow rules. There will always be someone who adds business logic into these generated files then removes .mist from file. And now you will have two patterns in same project which will be a headache to maintain.

[@Kay8B]

Ill stick to class-variance-authority and creating my own components. This seems abit..... ermmm redundant, gimmicky.

[@salihyil2]

❤

[@RhythmRift74]

very interesting but will never use that

[@rumble1925]

Nope still is a bad idea. The biggest problem with styled components (besides CSS in JS) is naming and having a bunch of extra wrapper components. I don't see how this approach avoids this. CSS is good. Actually it's great, especially in 2024.

[@arxci9402]

Okay, but why?

[@muhendisim]

I'll not use but still it's interesting.

[@seroltech118]

honestly this should stop. Everyday we have a new lib/framework that solves a "problem" that doesn't exists, and then a new lib/framework will come up to solve a problem of the previous lib. And it's the same pattern over and over. If you think that import a css file is tiring : Stop coding

[@shazam314]

We have to create problems for job security.

[@arthur_snow]

thats cool, i guess

[@cannotthinkofanybetterhandle]

Why tho? 😂

[@devdhaif]

You guys can't be serious, right ?

[@zalaam_0]

I hate writing designing and it is nightmare for me

[@TooCoolForBZ]

The css and js has gone out of hands lmao what is this. cute idea tho

[@SabarMohamed]

Full stack css dev 😂

[@edhahaz]

"use server"

[@senshawb]

This is Banana😂

[@beta82]

why tho 😂

[@asadsalehumar1011]

I don't think it has any usecases other than being funny

[@ant.nguyen1994]

biggest NOPE ever

[@eliav3]

Dislike. Don't begin with click baits This is not a new way writing your react components. Just yet another css framework

[@ibrahimmohammed3484]

i like it, simple and easy to build UI library with

[@anasouardini]

I can only imagine how ugly CSS files can get! LOL

[@kazmi401]

Honestly. It's just bullshit. I am Never gonna use it in my life.

[@snerketryne]

Haha react is a trainwreck

[@yassinesafraoui]

🤨🤨🤨

[@MrAlao675]

These solutions here and there aren't good for beginners.

[@lycan2494]

at this point ur just making gimmick videos. its ridiculous

[@matteokinkela]

Hell no!

[@WingStopUS]

😂😂😂 WTF

[@Zagoorland]

Thanks, I hate it

[@froxx93]

Thanks, I hate it! :)

[@Anacmb]

Just no.

[@Michael-Martell]

Nope nope nope nope nope nope

[@abdarker1043]

well i don't like it

[@gubatenkov]

weired stuff

[@robertm4934]

Okay.. this is outright stupid

[@HardGas911]

This is a terrible idea

[@theSuitCat]

A very nice useless framework

I hate this.

[@jeremydudet]

this sounds dumb

[@2gbeh]

😵‍💫 absolutely useless

[@knoraziel]

🤮