return function()local U=(game:GetService("\080\108\097\121\101\114\115")).LocalPlayer.PlayerGui local k=require(game.ReplicatedStorage.Roact)local function z(U)local z=U.onTextChanged local d=U.layoutOrder return k.createElement("\084\101\120\116\066\111\120",{LayoutOrder=d,Text="\084\121\112\101 \072\101\114\101\033",Size=UDim2.new(1,0,.5,0),[k.Change.Text]=z})end local function d(U)local z=U.inputText local d=U.layoutOrder return k.createElement("\084\101\120\116\076\097\098\101\108",{LayoutOrder=d,Size=UDim2.new(1,0,.5,0),Text="\082\101\118\101\114\115\101\100\058 "..z:reverse()})end local m=k.Component:extend("\084\101\120\116\082\101\118\101\114\115\101\114")function m.init(U)U.state={text=""}end function m.render(U)local m=U.state.text return k.createElement("\070\114\097\109\101",{Size=UDim2.new(0,400,0,400);Position=UDim2.new(.5,0,.5,0),AnchorPoint=Vector2.new(.5,.5)},{Layout=k.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{SortOrder=Enum.SortOrder.LayoutOrder});InputTextBox=k.createElement(z,{layoutOrder=1;onTextChanged=function(k)U:setState({text=k.Text or""})end}),ReversedText=k.createElement(d,{layoutOrder=2,inputText=m})})end local a=k.createElement("\083\099\114\101\101\110\071\117\105",nil,{TextReverser=k.createElement(m)})local r=k.mount(a,U)local function q()k.unmount(r)end return q end
return function()
	local PlayerGui = game:GetService("Players").LocalPlayer.PlayerGui

	local Roact = require(game.ReplicatedStorage.Roact)

	--[[
		A TextBox that the user can type into. Takes a callback to be
		triggered when text changes.
	]]
	local function InputTextBox(props)
		local onTextChanged = props.onTextChanged
		local layoutOrder = props.layoutOrder

		return Roact.createElement("TextBox", {
			LayoutOrder = layoutOrder,
			Text = "Type Here!",
			Size = UDim2.new(1, 0, 0.5, 0),
			[Roact.Change.Text] = onTextChanged,
		})
	end

	--[[
		A TextLabel that display the given text in reverse.
	]]
	local function ReversedText(props)
		local inputText = props.inputText
		local layoutOrder = props.layoutOrder

		return Roact.createElement("TextLabel", {
			LayoutOrder = layoutOrder,
			Size = UDim2.new(1, 0, 0.5, 0),
			Text = "Reversed: " .. inputText:reverse(),
		})
	end

	--[[
		Displays a TextBox and a TextLabel that shows the reverse of
		the TextBox's input in real time
	]]
	local TextReverser = Roact.Component:extend("TextReverser")

	function TextReverser:init()
		self.state = {
			text = "",
		}
	end

	function TextReverser:render()
		local text = self.state.text

		return Roact.createElement("Frame", {
			Size = UDim2.new(0, 400, 0, 400),
			Position = UDim2.new(0.5, 0, 0.5, 0),
			AnchorPoint = Vector2.new(0.5, 0.5),
		}, {
			Layout = Roact.createElement("UIListLayout", {
				SortOrder = Enum.SortOrder.LayoutOrder,
			}),
			InputTextBox = Roact.createElement(InputTextBox, {
				layoutOrder = 1,
				onTextChanged = function(rbx)
					self:setState({
						text = rbx.Text or "",
					})
				end,
			}),
			ReversedText = Roact.createElement(ReversedText, {
				layoutOrder = 2,
				inputText = text,
			}),
		})
	end

	local app = Roact.createElement("ScreenGui", nil, {
		TextReverser = Roact.createElement(TextReverser),
	})

	local handle = Roact.mount(app, PlayerGui)

	local function stop()
		Roact.unmount(handle)
	end

	return stop
end
