Миграция с реакции-создания-приложения на обычное приложение с реакцией

Question

Недавно я начал работать над коммерческим проектом, который был написан другим программистом, основанным на реакции-создания-приложения. Поскольку проект уже достаточно большой и не перестает развиваться, работа с реакцией-созданием-приложения становится все более и более неудобной, потому что я хочу иметь возможность полностью настроить себя webpack, node.js и другие пакеты.

Я ищу возможность как можно быстрее перенести проект из реакции-создания-приложения в форму, как если бы проект изначально был написан без него.

Работать с кодом после npm run eject мне показалось неоправданно сложным.

Я пытаюсь найти хоть какие-то инструкции или руководства по этому вопросу, но пока не нашел.

Вот зависимости package.json:

{
    "dependencies": {
    "classnames": "^2.2.5",
    "google-maps-react": "^2.0.2",
    "history": "^4.7.2",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.1.1",
    "moment-timezone": "^0.5.17",
    "prettier": "^1.12.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-collapse": "^4.0.3",
    "react-copy-to-clipboard": "^5.0.1",
    "react-dom": "^16.3.2",
    "react-facebook-login": "^3.7.2",
    "react-google-login": "^2.11.3",
    "react-input-mask": "^1.2.2",
    "react-motion": "^0.5.2",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "1.1.4",
    "react-scrollchor": "^4.2.1",
    "react-slick": "^0.14.11",
    "react-stripe-elements": "^1.6.0",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "validator": "^8.2.0"
  },

  "devDependencies": {
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.10.0",
    "react-scrolllock": "^3.0.1",
    "redux-devtools-extension": "^2.13.5",
    "reselect": "^3.0.1",
    "stylelint": "^9.4.0",
    "stylelint-config-standard": "^18.2.0"
  }
}

Answer 1

I'd say it depends what you want to do. I had the same problem. I ejected my local copy and found I got a lot of problems. My solution was the take the existing CRA project ad do the following:

1. Update to latest react and react-dom, run 'yarn react@next react-dom@next'
2. You should now have the latest react versions - so you can code split using React.lazy/React.Suspense, use hooks and so on.
3. If you have an issue with errors when using the import syntax you need to use the babel-plugin-syntax-dynamic-import plugin. Put the "babel" field in your package json.

I hope that is some help. There are also libraries like https://github.com/timarney/react-app-rewired but I haven't used them.