在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):project-error/fivem-react-boilerplate-lua开源软件地址(OpenSource Url):https://github.com/project-error/fivem-react-boilerplate-lua开源编程语言(OpenSource Language):TypeScript 62.5%开源软件介绍(OpenSource Introduction):FiveM React and Lua Boilerplate
A simple and extendable React (TypeScript) boilerplate designed around the Lua ScRT
This repository is a basic boilerplate for getting started
with React in NUI. It contains several helpful utilities and
is bootstrapped using For in-game workflows, Utilizing This version of the boilerplate is meant for the CfxLua runtime. Requirements
A basic understanding of the modern web development workflow. If you don't know this yet, React might not be for you just yet. Getting StartedFirst clone the repository or use the template option and place
it within your InstallationThe boilerplate was made using Install dependencies by navigating to the FeaturesThis boilerplate comes with some utilities and examples to work off of. Lua UtilsSendReactMessage This is a small wrapper for dispatching NUI messages. This is designed
to be used with the Signature ---@param action string The action you wish to target
---@param data any The data you wish to send along with this action
SendReactMessage(action, data) Usage SendReactMessage('setVisible', true) debugPrint A debug printing utility that is dependent on a convar, if the convar is set this will print out to the console. The convar is dependent on the name given to the resource.
It follows this format To turn on debugMode add Signature (Replicates ---@param ... any[] The arguments you wish to send
debugPrint(...) Usage debugPrint('wow cool string to print', true, someOtherVar) React UtilsSignatures are not included for these utilities as the type definitions are sufficient enough. useNuiEvent This is a custom React hook that is designed to intercept and handle messages dispatched by the game scripts. This is the primary way of creating passive listeners. Note: For now handlers can only be registered a single time. I haven't come across a personal usecase for a cascading event system Usage const MyComp: React.FC = () => {
const [state, setState] = useState('')
useNuiEvent<string>('myAction', (data) => {
// the first argument to the handler function
// is the data argument sent using SendReactMessage
// do whatever logic u want here
setState(data)
})
return(
<div>
<h1>Some component</h1>
<p>{state}</p>
</div>
)
} fetchNui This is a simple NUI focused wrapper around the standard When using this, you must always at least callback using This can be heavily customized to your use case Usage // First argument is the callback event name.
fetchNui<ReturnData>('getClientData').then(retData => {
console.log('Got return data from client scripts:')
console.dir(retData)
setClientData(retData)
}).catch(e => {
console.error('Setting mock data due to error', e)
setClientData({ x: 500, y: 300, z: 200})
}) debugData This is a function allowing for mocking dispatched game script
actions in a browser environment. It will trigger Usage // This will target the useNuiEvent hooks registered with `setVisible`
// and pass them the data of `true`
debugData([
{
action: 'setVisible',
data: true,
}
]) Misc Utils These are small but useful included utilities.
Development WorkflowThis boilerplate was designed with development workflow in mind. It includes some helpful scripts to accomplish that. Hot Builds In-Game When developing in-game, you can use the hot build system by
running the Usage # yarn
yarn start:game
# npm
npm run start:game Production Builds When you are done with development phase for your resource. You must create a production build that is optimized and minimized. You can do this by running the following: npm run build
yarn build Additional NotesNeed further support? Join our Discord! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论