Реагировать приложение не отображается в Codepen ни на что?

Question

У меня есть приложение реагирования, которое я сделал в VS Studio, помещая его в codepen, кажется, что оно ничего не загружает, какие-либо предложения?

Я пытался убедиться, что React связан и проверил все своисинтаксис, нет ошибок на локальном хосте, но нет отображения в codepen.

Я просмотрел код несколько раз и чувствую, что это глупая ошибка

https://codepen.io/donnieberry97/pen/EzmOvW

    class TodoListt extends React.Component {
      state = {};

      constructor(props) {
        super(props);

        this.state = {
          userInput: "",
          list: [],
          editing: false,
        };
      }

      changeUserInput(input) {
        this.setState({
          userInput: input
        })
      }


      addToList() {
        if (this.state.userInput === "") { (alert("Please enter a To-do")); return; };
        const { list, userInput } = this.state;
        this.setState({
          list: [...list, {
            text: userInput, key: Date.now(), done: false
          }],
          userInput: ''
        })
      }

      handleChecked(e, index) {
        console.log(e.target.checked);
        const list = [...this.state.list];
        list[index] = { ...list[index] };
        list[index].done = e.target.checked;
        this.setState({
          list
        })
      }

      handleEditing(e) {
        this.setState({
          editing: true
        })
      }

      handleRemoved(index) {
        const list = [...this.state.list];
        list.splice(index, 1);

        this.setState({
          list
        })
      }

      render() {

        var viewStyle = {};
        var editStyle = {};

        if (this.state.editing) {
          viewStyle.display = "none"
        }
        else {
          editStyle.display = "none"
        }


        return (
          <div className="to-do-list-main">
            <input
              onChange={(e) => this.changeUserInput(e.target.value)}
              value={this.state.userInput}
              type="text"
            />
            <div class="submitButton">
              <button onClick={() => { this.addToList(this.state.userInput) }}>Add todo</button>
            </div>

            {this.state.list.map((list, index) => (
              <div className="form">
                <ul>
                  {/* <div style={viewStyle} onDoubleClick={this.handleEditing.bind(t his)}> */}

                  <li key={list.key}>
                    <div class="liFlexCheck">
                      <input type="checkbox" onChange={(e) => this.handleChecked(e, index)} />
                    </div>
                    <div class="liFlexText">
                      <div class="liFlexTextContainer">
                        <span style={{ textDecoration: list.done ? 'line-through' : 'inherit' }}>
                          {list.text}
                        </span>
                      </div>
                    </div>
                    <button onClick={(index) => this.handleRemoved(index)}>Remove</button>
                    <input
                      type="text"
                      style={editStyle}
                      value={list.text}
                    />
                  </li>
                  {/* </div> */}
                </ul>
              </div>
            ))}


          </div>
        );
      }
    }

Answer 1

Удалить оператор import, рабочий пример .

Вы не должны использовать import, когда получили Внешние сценарии .

Кроме того, в вашем коде есть много ошибок, которые следует обработать, например:

• <div class="submitButton">, используйте className.
• Каждый ребенок в списке должен иметь уникальную key опору.
• Поле формы с value prop, но без обработчика onChange.

Проверьте журналы:

Answer 2

В codpen вам не нужно импортировать react вместо того, чтобы просто писать код, вот кодовый рабочий, работающий один: codepen

из кодов и box, вы можете узнать обо всех импортеКроме того, поскольку он не использует никаких внешних сценариев, ваш код будет работать нормально, если вы добавите в него импорт, в котором import ReactDOM from 'react-dom'; codesandbox покажет все эти предложения, вот пример работы codesandbox: codesandbox