A comprehensive, but not exhaustive, translation of ReactJS 17.x into Luau.
React Luau is a declarative library for building user interfaces. It's a highly-tuned translation of ReactJS and currently based on React 17.
- Declarative: React makes it easy to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
- Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in Luau instead of managed with Roblox's Instances, you can easily pass rich data through your code and keep the state out of the data model.
- Tuned for Roblox: Luau is not Javascript, so we deviate from ReactJS in certain places for a more ergonomic programming experience in Luau and with Roblox's wider programming model. For example, React Luau introduces Bindings, a form of signals-based state that doesn't re-render, for highly-efficient animations driven by React.
Learn how to use React Luau in your project.
We have several examples on the website. Here is the first one to get you started:
local React = require(Packages.React)
local ReactRoblox = require(Packages.ReactRoblox)
local e = React.createElement
local function HelloMessage(props: {
name: string,
})
return e("TextLabel", {
AnchorPoint = Vector2.new(0.5, 0.5),
Position = UDim2.fromScale(0.5, 0.5),
AutomaticSize = Enum.AutomaticSize.XY,
Text = `Hello, {props.name}!`,
})
end
local function App()
return e("ScreenGui", {}, {
MyMessage = e(HelloMessage, {
name = "Taylor",
}),
})
end
local root = ReactRoblox.createRoot(Instance.new("Folder"))
root:render(ReactRoblox.createPortal(e(App), Players.LocalPlayer.PlayerGui))This example will render "Hello, Taylor!" into a TextLabel on the screen.
React Luau is MIT licensed. Go do cool stuff with it!
