DEV Community

Cover image for build a tic tac toe game | react | tailwind css | next js
shAtud
shAtud

Posted on

build a tic tac toe game | react | tailwind css | next js

build a tic tac toe game | react | tailwind css | next js
https://www.youtube.com/watch?v=bZ1GqU7BC5k&feature=youtu.be
If you liked our content help us by subscribing on the channel and leaving a nice comment

Discussion (5)

Collapse
punisher49 profile image
punisher49

Seriously why would you use React and Tailwind for Tic Tac Toe

Collapse
shatud profile image
shAtud Author

the goal is not the tic tac toe game but learning many tailwind css and react concepts along the way ... thanks for your comment

Collapse
deathshadow60 profile image
deathshadow60

Which given the hard to follow bloat it ended up being, I would think that it would have taught you that Failwind and React aren't worth using in the first place.

At least if you know enough about HTML, CSS, and JS to write such a thing without the training wheels.

Thread Thread
shatud profile image
shAtud Author

sorry for that i didn't have enough time to add a voicecover (my english isn't every good so i'm strugling a little bit to convey my thoughts while coding so i usually add the voicecover after recording) and about the choice of using react and tailwind i just follow the webdev trends i mean to get a job you have to master the react library i did my second year final project (which is the web version of the emu8086) using only vanilla js and had a lot of fun building the interface without any freamworks but to be honest i was doing the react job a lot of times so it took more time to build in other words using react or any js freamwork makes the developement process faster ...thanks for your comment i really appreciate your feedback

Collapse
deathshadow60 profile image
deathshadow60

The video is hard to follow due to the lack of voiceover explaining any of the choices.

React has suckered you into writing 5k of JavaScript to do half that's job.

Don't use DIV with click events, you're omitting keyboard in the process. Anchors or buttons my friend. 99% of the time anyone tells you it's ok to add onclick to a DIV, they're talking out their backside. I don't blame you for that, I blame this industry riddled with liars, bunk artists, and snake oil peddlers devoid of the most basic knowledge of HTML.

Of course that you're using the bloated sucker-bait that is Failwind is probably why your markup is gibberish and inaccessible. Seriously, all of these HTML and CSS frameworks just make you work harder, not smarter.

It's funny as a Tic Tac Toe game is part of the React tutorials, and it's almost as badly written as yours. No offense meant, we all start somewhere.

Their (REACT's) original:
codepen.io/gaearon/pen/gWWZgR?edit...

Check my rewrite of the React tutorial version:
codepen.io/jason-knight/pen/dyVzpE...

A fraction the code, a fraction the effort, more logical code, without a single line of Failwind or React to be found. This is what I mean by how these frameworks, libraries, pre-processors and other such carnival sideshow nonsense saddles up developers and takes them for a ride.

See my article (part 1 or 3) about why I think React is junk for more:
medium.com/codex/part-of-why-i-thi...

I've never seen anything done with React that didn't fall into one of three categories:

1) Server side stuff that would be simpler and easier to maintain without it. (just use http's response.write and template literals)

2) Client side stuff that HTML and CSS can do without any interference from JS

3) Things that have no business being done client-side in the first place if you care at all about accessibility and usability.

Just like the garbage that are Failwind and Bootcrap, where they drag markup practices back to the worst of 1997 by using classes to recreate everything 4 Strict was telling us not to do.

These "time savers" and "easy" systems are not saving you time, nor are they any easier than vanilla code. You are being lied to by the people who created this nonsense!