[FREE] [NUI] FiveM + ReactJS Simple Template

License


img

FiveM + ReactJS Simple Template

A simple template to make FiveM Lua scripts with NUI created in ReactJS. Webpack is configured to make editing easier. Editing styles and assets doesn’t require building a Node project. Only changes in JS/JSX files require building.

Documentation

Docs

License

Apache 2.0

Download

https://github.com/KPGTB/fivem-react-template

5 Likes

Just curious, what would make players use yours over someone elses which is more compatabile and more up to date…

for example: GitHub - project-error/fivem-react-boilerplate-lua: Basic Lua & React (TypeScript) boilerplate for FiveM

Also your usecase of https://github.com/KPGTB/fivem-react-template/blob/main/web/react/src/App.jsx is a little out of date for todays standards of React for multiple reasons primarily due to states and passing props down.

Hello! I just needed something simple for me, so I made it and published it if someone else needed it too. Why my resource? Not everyone wants to use TypeScript. Also, the problem with most other resources like that is that they have a lot of useful files, code, and packages. I made something simple that is easy to use for developers and for people.

1 Like

That’s fair enough, appreciate the response!

Interesting, I personally just use Vite to create react-project and then I just have eventlistener for ‘message’ in the main.jsx and use SendNuiMessage on the client to control the rendering of the ui.

How does this simple template differ from the way how I work with NUI on fivem?

So, the main difference (probably, because I don’t know how do you have configured react) is that everyone can edit assets and styles without building project. I think that it is very helpful. In that resource I added also small utils… With it you dont need to add all headers, links etc to nui fetch. You can simply use one function to make it. You can also use useNui function, and you won’t need to add new event listeners for every message.