Running the application

[00:00 - 00:06] Running the application. Inside of your project in the SRC folder, create a new file, app, TSX.

[00:07 - 00:12] Define an expert and app component. Expert const app, it's a functional component.

[00:13 - 00:25] Here we return a blessed box that will render hello, react, blessed. You can provide the style for this blessed box and set the background color to blue, or whatever color you choose.

[00:26 - 00:29] You might have to import react. Now go to index TSX.

[00:30 - 00:39] Previously we used console log to log to the standard output. Now we'll want to avoid logging directly, and instead we'll log to the inspector.

[00:40 - 00:55] To do this, we'll override the global console with the inspector console. From now on, when we'll use console log console error or other functions, instead of logging directly to the standard output, it will go to the react debugging tools.

[00:56 - 01:24] Then you can load the configuration from .env, .env config, import .env, import everything as .env from .env. Initialize the blessed screen, import blessed, then define screen as blessed screen, set, auto-pading true, smart CSR true, send focus also true, title, github manager, and set the cursor settings.

[01:25 - 01:32] I'm going to set color to black, shape to underline, artificial true, and blink true. You can try to adjust those options if you want.

[01:33 - 01:40] Add the keypress event to track for the keypresses or ctrl C. We will use them to exit the application.

[01:41 - 01:56] We send the code 0, which means that the application exited successfully. Now below all that, call render, import render from react blessed, inside of it render memory router, and inside of it render our app.

[01:57 - 02:05] As the second argument passed the screen, where we'll render our application. As you remember, we defined the start script in the package JSON.

[02:06 - 02:11] This script runs our app using the Babel node. To be able to use Babel node, we'll need to set up Babel properly.

[02:12 - 02:25] Create file .babel or c with the following contents. We'll need to specify the presets, presetenv, preset typescript and preset react, and also transform class properties plugin.

[02:26 - 02:33] Make sure that you can launch your application by running yarn start. You should see a blue screen or whatever color you used and the message hello react blessed.