Can somebody tell me why is nothing showing in my localhost?

I run npm, no errors on compile. When i use other componets instead of AppWrapper everything works fine.

import React from 'react';
import {createStore} from 'redux';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import {Provider} from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = createStore(messageReducer);

// React:


// Change code below this line
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    
    // Remove property 'messages' from Presentational's local state
    this.state = {
      input: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
  
    // Call 'submitNewMessage', which has been mapped to Presentational's props, with a new message;
    // meanwhile, remove the 'messages' property from the object returned by this.setState().
    this.props.submitNewMessage(this.state.input);
    this.setState({
      input: ''
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
           {/* The messages state is mapped to Presentational's props; therefore, when rendering,
               you should access the messages state through props, instead of Presentational's
               local state. */}
          {this.props.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};
// Change code above this line

const mapStateToProps = (state) => {
  return {messages: state}
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
};

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Container/>
       
      </Provider>
    );
  }
};

ReactDOM.render(AppWrapper, document.getElementById('root'));

Hello, I ran this code on IntelliJ with an .js file to look for anything but looks clean, you might want to double check what issue might be going on with the App Wrapper. I`m assuming this is an API if so more information might be needed, I type npm run start to check if the port is running or not.

hey, its not API, i just took a code from ( Extract Local State into Redux) lesson on React + Redux, added modules and ran it

Found mistake! Forgot to put “< />” around my AppWrapper on render call