First of all, to have full integration with the Monaco Editor, we need to eject the React application. You can read about the ejection process in the React documentation by following this link: https://create-react-app.dev/docs/available-scripts#npm-run-eject. Follow these steps to install the editor:

1. Run the following command:

npm run eject

The tool is going to ask for your confirmation. Press y to confirm:

$ react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. (y/N) 

2. Now, you need to install the monaco-editor library:

npm i monaco-editor

3. Next, we need the react-monaco-editor dependency. This is the component library that provides React bindings for the Monaco Editor component. Run the following command to install the dependency:

npm i react-monaco-editor

The monaco-editor library has a slightly complex configuration. There is a project called monaco-editor-webpack-plugin that will save you the time and effort of doing this manually.

4. Install the webpack plugin library by executing the following command:

npm i monaco-editor-webpack-plugin

5. To integrate the monaco-editor-webpack-plugin library, you need to update the config/webpack.config.js file. Import the MonacoWebPlugin type at the bottom of the file:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

6. Find the plugins section of the configuration file. The file is pretty big, so you may want to use the text search functionality. HtmlWebpackPlugin should look as follows:

7. Insert the new MonacoWebpackPlugin() line at the beginning of the plugins section, at the top of HtmlWebpackPlugin. Please refer to the following screenshot:

8. Update the index.css file by appending the following code to the bottom of the file:

html, body, #root {
  height: 100%;
  width: 100%;
}

9. Replace the contents of the App.css file with the following code:

.App {
  width: 100%;
  height: 100%;
}

10. Create a new Editor.js file so that we can store our editor component and its configuration settings.
11. Now, import the MonacoEditor object from the react-monaco-editor namespace:

import MonacoEditor from 'react-monaco-editor';

In this chapter, we are going to be using a functional React component. Follow these steps to get started:

1. First, put the initial component scaffold inside the Editor.js file:

import React from 'react';
import MonacoEditor from 'react-monaco-editor';

const Editor = () => {
  return (
    <div></div>
  );
};

export default Editor;

We need to provide at least two properties so that we can run the MonacoEditor component: the code property, which will display the default text inside the editor, and the options property, which will provide our configuration details.

2. Create the following constants inside the component function:

const Editor = () => {
  const code = '# hello';
  const options = {
    selectOnLineNumbers: true,
    minimap: {
      enabled: false
    }
  };
  return (
    <div></div>
  );
};

3. For demonstration and development purposes, let's also add the editorDidMount and onChange handlers. Update the code inside the component function and include the following functions:

const editorDidMount = (editor, monaco) => {
  console.log('editorDidMount', editor, monaco);
  editor.focus();
};

const onChange = (newValue, e) => {
  console.log('onChange', newValue, e);
};

As you can see, when editorDidMount is fired, we send a message to the console log and focus the editor. Each time the text value is changed, onChange executes, and we send event details to the console's output.

4. Let's finish the component implementation by rendering the MonacoEditor component with all the necessary properties:

return (
    <MonacoEditor
      language="markdown"
      theme="vs-dark"
      value={code}
      options={options}
      onChange={onChange}
      editorDidMount={editorDidMount}
    />
  );

5. The final code for our Editor component looks as follows:

6. As a final step, replace the content of the App.js file with the following code:

import React from 'react';
import './App.css';
import Editor from './Editor';

function App() {
  return (
    <div className="App">
      <Editor></Editor>
    </div>
  );
}

export default App;

Now, let's test the application and see the component in action.