React Miami Live Show

This is the whole Syndax team. Wes Bos, me, myself, Caitlin Blum, Ben Vinegar, Randy Rector, and CJ Reynolds, we're all here today. Say hi.

So the plan today is that we have a lot of segments. The first one is going to be we shouldn't have put this one first. Yeah. It's gonna be tough. I'm kinda worried about this one. Map filter reduce, where we've given each other a map filter, well, map filter and reduce, and you have to determine the output just by looking at the code.

Next up is syntax error where we try to stump each other on syntax bugs that we've, deviously hidden in code.

This will be available again later on the show too. So pigeonhole.atforward/sick.

Okay. Oh, man. Why you do this? Audience as well. You try to figure it out. Student name length times the student score. Okay.

So out of the first one, you get the properties.

So you get individual, name, score, and then points.

So for Wes, it's obviously going to be 3, times 2. We have, that is 6.

making thing ever. I'm just gonna ignore that part for right now. Okay. The filter, okay.

Come on.

How many times something goes into something else? Or is that that's division.

Bam. Got it. Remainer. Model. Oh, come on, Wes. Okay. After something has been evenly divided by 2, how many are left over? Okay. So that really gives us only the even ones. So which ones are even? So Wes is even. CJ is going to be even.

2 times 4. Okay. Scott is 5 times 3, not going to be is that even? Node. 5 times 3.50. No. Not even. A note. Yep. Okay. So so so far, we are filtering out Scott. We have Wes, which is, now points of, 6. CJ points of 8. Yep. Okay? And the reduce, we are adding the student points together, and you're just returning the points.

So the point is, we have 6 plus 8 equals 14.

Fifteen. What?

Sorry about that. I did come up with this game, though, so it's on me.

We did the 2 hardest

K. So

The user document has 2 IDs, which I guess is fine.

1 is a number. 1 is a string.

Export default async function.

Save user promise user document.

I'll give you a hint. It is a syntax error. It is a syntax error. Oh, man. I gotta, like, blur my eyes to see this.

Gosh. Darn it.

I don't know. I don't see it. Alright. Audience.

Nope.

I don't use interface that much. Well

Remember class components? Yes. When was the last time?

a that's fine. That's fine. I think it's just a image thing. It's not an image. That's not the intention. I can see the line numbers. I know. It's not intentional. Okay. Well, I I extra point for that one.

Syntax highlighting was turned off.

You are defining the type, then you're yeah.

The equals to an object. I feel like that is the wrong order of things.

Let me just check the rest of it.

I isn't this the wrong syntax for the Node,

Function, user, card.

Let's see.

Oh, man. You're crushing me.

User is I mean, we'd obviously don't know what user is. User is users destructed.

Yep. D yeah. Okay. So users should should be the variable user, not inside of brackets.

Right? Because this is React. Yeah. This is React. It's props.

Now I don't write React.

I don't see it. What is it? Alright. Gotcha. Audience.

Wes should have a timer. Right here. What?

I think it just might be cut off.

Yeah. That Node. Okay. Yeah. So that's not the issue? I cut I yep.

You're

Yeah. It works.

Transform. Okay. So translate x looks fine. Translate y. Let's see.

We have let's check the parentheses.

3 open, 3 close, 2 open, 2 close, var var move, move 10 pnpm times negative 1 px, and that's inside of the calc.

Why? Why? Let me see this. Calc, there's no misspellings. It's not something devious like that. Nope. Yeah. Var move is is fine both times. Those are both pixels. You're multiplying pixels. There's nothing crazy there.

We need well, it How many of you see it. Can you do a translate y and a translate x to separate properties? Yeah. You you can. Quick. Because I never do that. That's fine. Always three d.

Yeah. That's kind of what I was looking at. Anybody see it?

Calc.

I don't see it. What is it? Alright. Help me out there. What do Wes got?

This one hurts me. Yes.

This one hurts me too. Yeah.

Okay.

Esno, is this a JavaScript compiler and TypeScript checker written in Rust with a focus on static analysis and runtime performance?

Well, let's see. Alright. Let's Alright. Get your votes in.

And the winner is it's a JavaScript compiler.

Alright. Ready to go? Get your votes in. And And I'm gonna hit go.

Next question here.

Which of these statements about MySQL is false? The my sequel dolphin is named Sekila.

Or PlanetScale attempted to fork my sequel after licensing disagreements in 2020? Which of these is false? False. Which one is false?

Brand name for the Venlafaxine antidepressant medication in Mexico or both? Get your votes in.

Vextor.

A ByteDance's design token generator that outputs to CSS, JavaScript Tailwind, SwiftUI, and Android Compose, or both? Yeah.

Zuber, is this Uber's zoo stand based state machine library for architecting real time UIs.

Zuber.

This one's for the locals.

An upcoming standard library for JavaScript for working with date and times or both? Get your votes in.

Ready?

Alright. Next Wes, Dev.

What's your name? Dev. Dev.

React DOM's use form state was recently replaced with what hook for working with server components?

Use action state.

The what? That JS a hutz. That was a tricky

So you can close

I went deep on the the GitHub website for that one. Michael. Michael.

a shirt. Next question for Michael.

Name eight reserved keywords in JavaScript.

Alright. Don't don't look at the screen. I'm gonna show them all. We're gonna show them. So you Scott look at all these people.

I gotta guess the ones that you have oh, you have a lot of them. There are a lot of them. Yarn a lot.

For, switch, function, class.

Why am I there? Default.

Await.

Yeah. Yeah.

Try, catch, replay.

Oh, yeah. I guess we gotta open up the Yeah. We do have 1. We have 2 in let's see.

Clear clear winner on that one. Scott is a much better coder than I am. Thank you. Wes did Scott get his dope shirt? Mac Weldon. This shirt is from Mac Weldon.

That's a dope shirt.

Have you guys struggled with Next. Js caching as much as Sam? How do you say he's the same? Selikhoff. Selikhoff did yesterday on stage and Me on My Side Projects. Yeah.

Node. That's true.

Solid. Sorry.

What else? I yeah. I think we just named all of them. Sorry. Literally everything, but who cares? Because React is king.

Low key, I like aspect ratio. I use that all the time. Aspect ratio for me. Oh, man.

All the new HSL stuff. Wes, what is your least favorite thing about the current state of React? Oh,

the little buggy things that get in the way, the needing a key, the Yeah. Node. The class name stuff, like, this useCallback, the stuff that a compiler could do for you.

Yeah. JavaScript.

Yeah. For me, I like data layer wise.

Right now, I'm using Pocket Bos for everything.

Pocket Base is sick. It's easy to host your own old office bake baked right in. But if I'm going full data, like we did on the Syntax site, it is, it's Prisma and, MySQL. But Yeah. I also like Drizzle and Postgres JS well as Drizzle and SQLite. All that stuff is good for me. Why is Century's brand all purple? David Kramer here?

Oh, yeah.

type it in online. I get it. When was the last time you coded vanilla JS?

back end is now possible. I like the DOM Yeah. Myself.

I stopped using React. I like Tailwind.

First.

on the flight here, and, it was great. It was really nice not having to worry about the server. I didn't need server side rendering. And if you don't need server side rendering, it just makes things harder. That's So yeah. Again I like server side rendering when you need it. It's easy enough. Beauty of JavaScript, beauty of React, Do you need to do server? Sure. Use React. You need to do

In in now, I don't know. Too many times I'd pick something that wasn't a meta framework on top of React, because I mean, even create React app was kind of like a starter kit, not like something you'd probably keep around forever.

But now with the server side components or React server components, there really isn't a React platform for server components. You have to use Remix. You have to use, Next. Js. And and to me, I'm going to pick one of those more full featured frameworks personally. Yeah. That to me is React at this point. I'm hoping for, like, a like, I usually

Have I used Remix? Yes. Love Remix. Very bullish on Remix. Big fan. I like Remix, what they did for actions and, then what everybody copied from them from that. And I'm I'm glad everybody copied that from them because it's, the best way to do form stuff. Poor Ryan is gonna just fix all the server component stuff for us so we don't have to

and it just kinda sat in a Google Drive document for a whole year. And then one one day, both of us were like, oh, wait. Remember that thing we were gonna do? Oh, yeah. Let's do it. Yeah. And then it's really easy to just keep going once you start. And then now we're at 700 something. So thank you so much, everybody. Thanks, everybody, for coming out. This is super fun. Have a good night.