• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

project-error/fivem-react-boilerplate-lua: Basic Lua & React (TypeScript) bo ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(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):

Material-UI logo

FiveM React and Lua Boilerplate

A simple and extendable React (TypeScript) boilerplate designed around the Lua ScRT

license Discord David Dependabot Status

This repository is a basic boilerplate for getting started with React in NUI. It contains several helpful utilities and is bootstrapped using create-react-app. It is for both browser and in-game based development workflows.

For in-game workflows, Utilizing craco to override CRA, we can have hot builds that just require a resource restart instead of a full production build

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 Started

First clone the repository or use the template option and place it within your resources folder

Installation

The boilerplate was made using yarn but is still compatible with npm.

Install dependencies by navigating to the web folder within a terminal of your choice and type npm i or yarn.

Features

This boilerplate comes with some utilities and examples to work off of.

Lua Utils

SendReactMessage

This is a small wrapper for dispatching NUI messages. This is designed to be used with the useNuiEvent React hook.

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 YOUR_RESOURCE_NAME-debugMode

To turn on debugMode add setr YOUR_RESOURCE_NAME-debugMode 1 to your server.cfg or use the setr console command instead.

Signature (Replicates print)

---@param ... any[] The arguments you wish to send
debugPrint(...)

Usage

debugPrint('wow cool string to print', true, someOtherVar)

React Utils

Signatures 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 fetch API. This is the main way to accomplish active NUI data fetching or to trigger NUI callbacks in the game scripts.

When using this, you must always at least callback using {} in the gamescripts.

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 useNuiEvent handlers as if they were dispatched by the game scripts. It will only fire if the current environment is a regular browser and not CEF

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.

  • isEnvBrowser() - Will return a boolean indicating if the current environment is a regular browser. (Useful for logic in development)

Development Workflow

This 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 start:game script. This is essentially the start script but it writes to disk. Meaning all that is required is a resource restart to update the game script

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 Notes

Need further support? Join our Discord!




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap