Skip to main content

Getting Started

On this page: How to install template & use

tip

Before using thist template, I suggest to learn ReactJS

Requirements​

Installation​

  1. Clone repository 
git clone https://github.com/KPGTB/fivem-react-template.git

You can also download that template or create a new repository from it.

  1. Open terminal in web/react and install node packages
npm i
  1. Change name, description, etc. in
  • fxmanifest.lua
  • web/react/package.json
  • web/react/package-lock.json
  • web/react/src/index.html
  1. Edit your code like you want
  2. After changes in web/react you need to build react project
npm run build
caution
  • Don't use Webpack Serve. Always build project and check it in-game
  • You need to import every stylesheet into web/styles/main.css. Don't import styles into React components!
@import url(PATH_TO_CSS_FILE);
  • All asset paths must depend on web/build/index.html file. Don't import assets into React components!

Examples:

  • Image path: web/assets/image.png
  • Path to image in every component: ../assets/image.png

Project structure​

  • client - Client-side Lua scripts
    • client.lua - Example of NUI toggling
    • react.lua - Lua utils of react-fivem connection
  • server - Server-side Lua scripts
  • web - NUI
    • assets - NUI assets like images
      • logo.png - Example asset
    • styles - NUI styles (CSS)
      • main.css - Main CSS file
      • app.css - Example App component Style
    • build - Folder with built node project
    • react - ReactJS front-end
      • src - Source of node project
        • components - Components of ReactJS
        • pages - Pages of ReactJS (Components that represent pages)
        • utils - Some utils
          • FiveM.js - JS utils of react-fivem connection
        • App.jsx - File with basic ReactJS component + Small example

Utils​

In this template, I added some utilities that help with the react-fivem connection.

Lua Utils (client-side)​

  1. Sending messages to ReactJS
SendReactMessage(action, data)

action - Text with name of action (It will be used in JS)

data - Data of message. It can be text, number, boolean, table, etc.

Example:

SendReactMessage("hello", "world")

That function will send a message with the name hello and the data world to ReactJS. See JS Utils section to check receiving message in JS

  1. Setting visibility of NUI
SetReactVisible(visible)

visible - true or false

  1. Toggling visibility of NUI
ToggleReactVisible()
  1. Checking if NUI is visible
IsReactVisible()

JS Utils​

To change default visibility, go to web/react/src/App.jsx and change state value visible

  1. Handling messages from NUI 
useNui(action, handler)

action - Name of action

handler - Function that will be executed after message from FiveM

Example:

useNui("hello", (data) => console.log(data))

That function will print into the console data received from a message with the name hello. See Lua Utils (client-side) section to check sending messages from Lua. In that case, it should print world

  1. Sending data to Lua
callNui(action, data, handler)

action - Name of NUI callback

data - Data to send

handler - Function that will be invoked after callback

Example:

LUA

RegisterNUICallback("example", function(data,cb)
    print(data)
    cb("sth")
end)

JS

callNui('example', "test", (data) => console.log(data))

What function will do:

  1. FiveM will register callback with name example
  2. ReactJS will send test to FiveM's callback with name example
  3. FiveM will print example into console and send a callback with text sth
  4. ReactJS will print into console response sth

Examples in code​

In that template, I added some examples. Remove it when creating a new resource.

  • client/client.lua - lines 1-3
  • web/assets/logo.png
  • web/styles/app.css (don't forget to also remove the import from web/styles/main.css)
  • web/react/App.jsx - lines 13-14