Hello World Project

Now that we have everything set up and ready, we can create a simple hello world project.

1. Initialize the JavaScript project#

   Start by creating a new rnue JavaScript project:

   npmpnpmyarnbun

   Copy

   bashCopy

   $ npm create @rnue/app@latest hello-world

   The initializer asks you to choose a starter:

   • Minimal (TypeScript) (default): React Native for Unreal only
   • Minimal (JavaScript): React Native for Unreal only
   • Expo Web + RNUE: One React tree for the browser and Unreal

   This guide uses the default Minimal (TypeScript) starter. It creates a new folder called hello-world containing the basic boilerplate for your app:

   • hello-world
     • src
       • App.tsx
     • .gitignore
     • .npmrc
     • app.json
     • babel.config.cjs
     • index.ts
     • metro.config.cjs
     • package.json
     • tsconfig.json

2. Run the metro development server#

   While working on the project, you will use a development server to serve your JavaScript code to rnue in Unreal Engine. Start it by running:

   npmpnpmyarnbun

   Copy

   bashCopy

   $ npm run start

   The terminal shows the following output:

   TerminalCopy

   > hello-world@0.0.1 start
   > react-native start
   
   Welcome to React Native v0.86
   Starting dev server on http://localhost:8081
   
   
                           ▒▒▓▓▓▓▒▒
                        ▒▓▓▓▒▒░░▒▒▓▓▓▒
                     ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒
                    ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓
                    ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓
                    ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓
                    ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓
                    ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓
                    ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓
                     ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒
                        ▒▓▓▓▒░░░░▒▓▓▓▒
                           ▒▒▓▓▓▓▒▒(the Metro logo, drawn in block characters)
   
   
                   Welcome to Metro v0.84.4
                 Fast - Scalable - Integrated
   
   
    INFO  Dev server ready. Press Ctrl+C to exit.
    INFO  Key commands available:
   
      r  - reload app(s)
      d  - open Dev Menu
      j  - open DevTools

3. Add a React surface to your Unreal Engine project#

   This step assumes some basic familiarity with the following Unreal Engine concepts:

   • Content Browser
   • Blueprints
   • Levels
   • Level Blueprint
   • UMG
   • Widget Blueprints
   • Creating Widgets

   If you are new to these concepts, take some time to familiarize yourself with them before continuing.

   Now we have a running development server ready to serve our JavaScript code to Unreal Engine, let's add a React surface to our Unreal Engine project.

   1. Create a new level and widget blueprint#

      We will start by creating a new level and a widget blueprint.

      

      Fig. 3.1Create a new level and widget blueprint

   2. Add a React surface to the widget blueprint#

      Then, we will add a React surface to the widget blueprint in the widget blueprint editor.

      

      Fig. 3.2Add a React surface to the widget blueprint

   3. Show the widget blueprint on screen#

      To show the widget blueprint, we will add some simple logic to the level blueprint that creates it adds it to the viewport.

      

      Fig. 3.3Show the widget blueprint on screen

   4. Run the game#

      You can now run the game and see the React surface in action!

      

      Fig. 3.4Run the game

      You did it!

      Congratulations! You have successfully created your first React Native for Unreal Engine project! 🎉