How To: React + Roblox

[minimapletinytools]

Thanks for your comment everyone!

I had a very hard time getting started with react-lua myself. This guide aims to clear up some of the confusion I ran into. There are definitely some unfortunate hurdles in getting started with react-lua, especially when it comes to importing the library into your project and getting a your first UI to render. Once you get past these hurdles, I think react-lua is a really great choice for UI development.

Modern react is much more straightforward and easy to use than it use to be. Functional components and hooks fill the need for confusing class component definitions or rodux for state management. If you had a bad experience using Roact, I hope you’ll consider giving react-lua another go following this guide!

Still, React is definitely not the most straightforward tool learn and use. I think working with UI instances directly or other UI libraries like fusion are also great choices… Whatever you choose, just make sure you’re learning and having fun :D.

[0Tenth (QuackBack)]

One thing you get is all the package support that’s already within the React ecosystem, it just needs to be translated. For example some of the React touchscreen handler libraries, which would be a pain to implement yourself. You also get to use a almost 1:1 translation of React, compared to Roact which had multiple deviations and performance issues.

[vq9o (Metatable)]

I personally strongly disagree with usage of react-lua. Several engineers I work with strongly refuse to utilize such framework.

I agree with @AbstractAlex. I personally believe the current UI tools are fine, I dislike the fact you can’t visually see what your working on without a play-test or custom plugin. Framework just seems unnecessary.

[minimapletinytools]

I think working with native UI tools starts running into challenges when you want to manage very dynamic UIs. Things that might be difficult to model directly in the Studio WYSIWYG style editor.

Part of the magic of many Roblox experiences is in their simplicity so I really value your perspective too! Like, UI doesn’t need to be complex often times games will be better like this!

[WreckDough]

@AbstractAlex

I have never used it in a single game, and you shouldn’t either. World Zero, Drive World, Robloxian High School, Swordburst 1,2,3, etc.

Hey, this dude is pretty smart.

@Rocky28447

React is an extremely powerful UI framework that provides a great standard for not just reusing UI components throughout a single game, but reusing them across multiple games

This can be done with any framework that has a component/class system, and it does not have to be declarative and a complete mess to read.

@grilme99

it’s likely not the correct choice for many projects

*all projects

@minimapletinytools

React is definitely not the most straightforward tool learn and use.

Quite the understatement.

EDIT
let me just add that the reason so many people dislike roact/react/fusion etc is that It’s incredibly convoluted.

What serious advantage do these frameworks provide after all of the convolution? A component system. That’s literally it.

to back this up

1. want proof of it being convoluted? reread the post
2. what is the big advantage that everyone cites when talking about these frameworks? that you can reuse components. This is the only significant feature that is missing from the default roblox scripting environment, hence why everyone flocks to frameworks that provide it.

Any framework that has reusable components can accomplish anything that react-lua can. Forcing yourself in to the declarative paradigm has some drawbacks.

By using react, you are somehow justifying:

1. Creating ui purely in code, not visually, even though the entire point of ui is to be a visual interface
2. Using plenty of incredibly unintuitive, and frankly, spaghetti features to create simple systems (other frameworks can provide features in much simpler ways, except you wouldn’t know that because you only use declarative ui)

My main issue with react, is that its bloated and unintuitive. This goes against (what I believe) is a primary goal of the roblox engine: to be simple, intuitive and beginner friendly. There’s no reason that this paradigm can’t continue in to powerful ui frameworks. I don’t think its hard to understand why react-lua isn’t beginner friendly nor intuitive.

The point I’m making is there is a better way to do ui.

[Rocky28447 (Rocky)]

@WreckDough

This can be done with any framework that has a component/class system

Nobody claimed otherwise. However, React is the industry standard for a reason (actually, several).

@WreckDough

a complete mess to read

Hey man if you don’t know how to write clean and organized code, React really isn’t going to help you.

@WreckDough

*all projects

So don’t use it. I don’t understand what your problem is. I really don’t even know why you bothered to reply. Your post doesn’t add anything useful or valuable to the discourse and literally just amounts to “I think React is stinky.” There’s no meaningful critiques of React or how it works. You legitimately just posted “React stinky” phrased several different ways.

[WreckDough]

@Rocky28447

Hey man if you don’t know how to write clean and organized code, React really isn’t going to help you.

I don’t know how you turned the idea of “react (react-lua) code being a mess to read” to “writing react code is unorganized”.

Never did I say that react is unorganized, in fact, I think its incredibly organized. I mean, its declarative, how more organized can you get?

The point I was making was it’s unnecessarily convoluted and not what you would call “clean” when reading. Ideally, code doesn’t need comments or extra explanation, because its so simple and clear you can understand what its doing just by reading it. This is not how most people would describe declarative ui, at least on Roblox.

[grilme99 (brooke)]

@WreckDough

What serious advantage do these frameworks provide after all of the convolution? A component system. That’s literally it.

There are a lot more advantages to React than a component system. The biggest is the declarative nature. Imperative UI makes reflecting complex state bug prone and flaky. With React, it will reflect the state of your UI automatically and in the most optimal way possible.

For me, declarative frameworks are all about making complex state easier to reflect.

@WreckDough

*all projects

No. These kinds of sweeping and ill informed statements are not useful. I work on a game called Clip It. It has incredibly complex UI and simply would not exist without React today. We’re a 5 person team working on, essentially, a mobile app in Roblox. We’re doing a lot of work to make the UI feel like a native experience.

Clip It is composed of hundreds of components. I think we’re well over 200,000 lines of UI related code now. What we’re doing would simply be too much work without a declarative framework.

@WreckDough

• Using plenty of incredibly unintuitive, and frankly, spaghetti features to create simple systems

Can you be more explicit about what makes declarative spaghetti? Speaking from many years of experience using both approaches, imperative UI is a lot more prone to ending up spaghetti once you start manually reconciling complex state.

Also, complex UI like the ones in Clip It are far from simple systems. I think you massively underestimate how hard UI is when you go beyond simple screens.

[HealthyKarl]

@SownMoney707431

The autocompletion is a problem with the fact that the current Luau typechecking system isn’t nearly as advanced as TypeScript’s typechecking, which makes it impossible to add autocomplete for properties. Although there’s still some hope because Luau has an RFC that proposes the addition of keyof

I’ve been doing research.

It seems to be sufficient enough to assign a non-sense that I called P_Free as a Free Variable. Eventually, this will break in the future, with the unknown type… But I hope that it won’t.

The other way would be typeof(table.clone()) where the argument is empty. This returns a {- -} but the new type solver breaks it as well, by turning it into {+ +}

This will allow autocompletion in the properties field. For now

You can extend this further by just allowing it all.

but it is a little bit bugged thisis doesn’t exist it’s just typing everything I am typing, uhhhh @yohooyohoo

 

The only problem that remains is the autocompletion of this

But that can be fixed. (If the typecompletion thing wouldn’t crash for moving my cursor somewhere, randomly)

Now, all the properties are merged together into the autocomplete.

Only loss is this

This is due unifications not showing up as a type. But other than that, I think it works.
This is the best so far that I could pull out from type definitions.

I think not every Roblox Component puts everything inside props though. So…

To completly test it out.

Seems to work.

I wouldn’t see how keyof would solve it automatically.

Files were ReactBaseClasses and React all under react

@minimapletinytools

[Scolupus]

Just wanna ask the experienced guys, will react-lua help me in learning react for web development in the future?

[pobammer (HowManySmall)]

yes and no

different language but same concept

[Maximum_ADHD]

Absolutely wild take man, this isn’t Roact anymore.

Roblox’s new React module is incredibly fast and typechecked. It has substantially sped up my workflow, and made it far easier to have a universally communicated paradigm for developing UI.

Combined with Hoarcekat, I’m able to edit, preview, and even interact with changes to my UI in real time from edit mode. This has been a huge game changer for my productivity. I don’t have to keep restarting the game each time I want to test a change to my UI.

Manually having to hook up connections and having to manually manage the creation, destruction, visibility, etc. of elements in my UI has always been a hacky sloppy mess. I always hated writing UI code, but @grilme99 showed me the light and I’m not turning back anymore.

[Maximum_ADHD]

Just curious, is there a reason you haven’t considered moving over to function components?

[Elttob (dphfox)]

This is how I feel too. (Welcome to the frameworks club, by the way!)

I can’t go back from using Fusion or React or something now. For the kinds of problems I’ve encountered in my UI development workflows, frameworks have proven that they can solve them. I’ve shipped tens of thousands of completely new lines of code with my latest plugin releases, and so far I’ve had absolutely zero bug reports to go and fix.

For people who don’t have the problems that UI frameworks solve, they’re totally a waste of time, and that’s where I see Alex’s side of things. But if you have the problems these frameworks solve for, then it’s just no contest.

This even applies to the choice of framework specifically. You get different solutions from different vendors, and you pick the one that fixes your problems.

So I wholeheartedly agree with your sentiment.

[Meta_data (Meta)]

This resource has the same issues as all the other resources available on react-lua. It shows very primitive examples with no features and would never be implemented in a game.

I get how to do all that stuff but how do you animate? Logically as a Roblox developer, you’d think you’d use TweenService and useRef to get the GUIObject reference, but that’s not what you’re supposed to do.

It’s not easy as you have to either write your library for it, use an existing one (of which they are usually poorly documented or use roblox-ts, so you can’t understand them unless you know JS), or use this one useClock example I’ve found.

We need more UI examples that have been implemented with react-lua in actual games so people can dig through the code and learn from it.

[HealthyKarl]

Do you have an example, please?

Are you talking about something like this?

@minimapletinytools

Properties

In addition to built in properties like the styling properties above, you can also define custom properties for your custom React components.

local function MyCustomTextLabel(props)
	return React.createElement("TextLabel", {
		Size = UDim2.new(0,100,0,100),
		BackgroundColor3 = Color3.fromRGB(193,179,142),
		TextColor3 = Color3.fromRGB(127,127,255),
		Text = props.MyText,
	})
end

Now you can instantiate your MyCustomTextLabel with whatever text you want!

root:render(React.createElement(MyCustomTextLabel, { MyText = "I love Giraffes!" }, {}))

To me, it’s just something that returns a something.

React seems to pass that function’s arguments as well. Aslong the function are using props.

The only thing I am currently interested in about React, is the Developer Framework. If Roblox’s Developer Framework, doesn’t use props it’s pointless, and props would still not show up in the autocomplete.

 

Returning functions directly through a module without putting it in a table, also has Reloading issues when testing on Studio.

[grilme99 (brooke)]

This isn’t my post, but that’s super useful feedback. I’m going to try and get a tech blog for Clip It cooked up soon and I should be able to write some articles that cover more of the “meat” of using React. Will prioritize an animations blog post.

[MrMoled (Theo)]

If you’re hesitant about using React because you need to run the code to see changes, tools like Hoarcekat or UILabs have you covered.

• Hoarcekat: Simplifies the process by allowing you to write stories (.story.lua) and render them directly within the provided plugin. Hoarcekat has support for Luau and transpiled Roblox-TS code.
• UILabs: Offers a more advanced approach. It not only supports Hoarcekat’s story syntax but also introduces controls. These controls enable you to adjust your UI’s properties without modifying the story or creating multiple duplicate versions. UILabs was written using Roblox-TS but does also have support for Luau.

Learning to use a declarative UI library can be challenging, especially when it comes to quickly testing and iterating. However, with these tools, that hurdle is virtually eliminated, making the process much smoother.

[Meta_data (Meta)]

Thank you, I am glad you agree and I did not mean for my post to come across as negative. I have tried using React in my game to see if it would be a good fit and I ran into a myriad of problems as I mentioned in my reply, and the lack of resources and guides on how to deal with it made me quite frustrated with the whole process.

I am highly appreciative that a Roblox staff member took the time and made a detailed post like this.

[Kadison07 (Kadison)]

I had no idea this existed wow. Appreciate the guide!