Components

Components are encapsulated, reusable pieces of UI that you can combine to build a complete UI.

Components accept inputs, known asprops, and return elements to describe the UI that should represent those inputs.

Types of Components¶

Host Components¶

Ahost component is nothing more than a string that matches the name of a Roblox class. We used these in our earlier discussion aboutelements as the first argument tocreateElement. Examples include"Frame","ImageButton", etc.

When our component is a host component, the props that we pass to it will be turned directly into properties on the Roblox instance that the component refers to.

Function Components¶

Function components are the simplest kind of user-defined component: they're just functions that accept props as their only argument, and return some elements.

localfunctionGreeting(props)returnRoact.createElement("TextLabel",{Text="Hello, "..props.name})end

Stateful Components¶

Roact also hasstateful components, which provide additional features like lifecycle methods and state. We'll talk about these features in a later section.

You can create a stateful component by callingRoact.Component:extend and passing in the component's name.

localGreeting=Roact.Component:extend("Greeting")functionGreeting:render()returnRoact.createElement("TextLabel",{Text="Hello, "..self.props.name})end

Using Components¶

In our previous examples, we passed strings toRoact.createElement to create elements that represented Roblox Instances.

We can also pass our custom components to create elements that represent them:

localhello=Roact.createElement(Greeting,{name="Rick James"})

Thename value is passed to our component as props, which we can reference as theprops argument in our function component orself.props in our stateful component.

Components in Components¶

Components are designed to make it easy to re-use pieces of UI, so naturally, we can use components inside other components!

localfunctionGreeting(props)returnRoact.createElement("TextLabel",{Text="Hello, "..props.name})endlocalfunctionGreetEveryone()returnRoact.createElement("ScreenGui",{},{Layout=Roact.createElement("UIListLayout"),HelloJoe=Roact.createElement(Greeting,{name="Joe"}),HelloMary=Roact.createElement(Greeting,{name="Mary"})})end

Applications built using Roact usually have one component at the top of the tree, and include all other pieces as children.

Incrementing Counter, Part Two¶

We can revisit the incrementing counter example from the previous section, now using a function component. Changed sections are highlighted.

localReplicatedStorage=game:GetService("ReplicatedStorage")localPlayers=game:GetService("Players")localRoact=require(ReplicatedStorage.Roact)-- Create a function component that represents our UIlocalfunctionClock(props)localcurrentTime=props.currentTimereturnRoact.createElement("ScreenGui",{},{TimeLabel=Roact.createElement("TextLabel",{Size=UDim2.new(1,0,1,0),Text="Time Elapsed: "..currentTime})})endlocalPlayerGui=Players.LocalPlayer.PlayerGui-- Create our initial UI.localcurrentTime=0localclockElement=Roact.createElement(Clock,{currentTime=currentTime})localhandle=Roact.mount(clockElement,PlayerGui,"Clock UI")-- Every second, update the UI to show our new time.whiletruedowait(1)currentTime=currentTime+1handle=Roact.update(handle,Roact.createElement(Clock,{currentTime=currentTime}))end