最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【未解决】用create-react-app创建的ReactJS的app中引用ReactJS-AdminLTE

ReactJS crifan 590浏览 0评论

折腾:

【已解决】ReactJS-AdminLTE中如何调试和哪部分代码是首页的源码

期间,实在搞不懂AdminLTE的ReactJS项目,是如何运行起来的

所以想要系统的去学习一下 reactjs的项目,从无到有的如何搭建起来。

之前也知道有一些react的app的模板

【整理】ReactJS+Webpack的项目模板boilerplate

facebookincubator/create-react-app: Create React apps with no build configuration.

还是去继续用30000+ star的:

create-react-app

create-react-app/README.md at master · facebookincubator/create-react-app

去折腾看看。

➜  create-react-app npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
added 60 packages, removed 78 packages and updated 11 packages in 5.304s
➜  create-react-app create-react-app reactjs_demo
Creating a new React app in /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts…
yarn add v0.21.3
info No lockfile found.
[1/4] 🔍  Resolving packages…
[2/4] 🚚  Fetching packages…
[3/4] 🔗  Linking dependencies…
warning “eslint-loader@1.7.1” has unmet peer dependency “eslint@>=1.6.0 <4.0.0”.
warning “eslint-config-react-app@1.0.5” has unmet peer dependency “babel-eslint@^7.2.3”.
warning “eslint-config-react-app@1.0.5” has unmet peer dependency “eslint@^3.19.0”.
warning “eslint-config-react-app@1.0.5” has unmet peer dependency “eslint-plugin-flowtype@^2.33.0”.
warning “eslint-config-react-app@1.0.5” has unmet peer dependency “eslint-plugin-import@^2.2.0”.
warning “eslint-config-react-app@1.0.5” has unmet peer dependency “eslint-plugin-jsx-a11y@^5.0.3”.
warning “eslint-config-react-app@1.0.5” has unmet peer dependency “eslint-plugin-react@^7.0.1”.
warning “babel-preset-react-app@3.0.1” has unmet peer dependency “babel-runtime@^6.23.0”.
warning “eslint-plugin-react@7.1.0” has unmet peer dependency “eslint@^3.0.0 || ^4.0.0”.
warning “eslint-plugin-import@2.2.0” has unmet peer dependency “eslint@2.x – 3.x”.
warning “eslint-plugin-jsx-a11y@5.0.3” has unmet peer dependency “eslint@^2.10.2 || 3.x”.
warning “eslint-plugin-flowtype@2.34.0” has unmet peer dependency “eslint@>=2.0.0”.
warning “html-webpack-plugin@2.29.0” has unmet peer dependency “webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3”.
warning “extract-text-webpack-plugin@2.1.2” has unmet peer dependency “webpack@^2.2.0”.
warning “babel-loader@7.0.0” has unmet peer dependency “babel-core@6 || 7 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0-rc”.
warning “babel-loader@7.0.0” has unmet peer dependency “webpack@2”.
warning “webpack-dev-server@2.5.0” has unmet peer dependency “webpack@^2.2.0”.
warning “url-loader@0.5.9” has unmet peer dependency “file-loader@*”.
warning “sw-precache-webpack-plugin@0.11.3” has unmet peer dependency “webpack@^1 || ^2 || ^2.1.0-beta || ^2.2.0-beta”.
warning “webpack-dev-middleware@1.12.0” has unmet peer dependency “webpack@^1.0.0 || ^2.0.0 || ^3.0.0”.
warning “react-dom@15.6.1” has unmet peer dependency “react@^15.6.1”.
[4/4] 📃  Building fresh packages…
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is “0.27.5” while you’re on “0.21.3”.
info To upgrade, run the following command:
$ npm upgrade –global yarn
success Saved 898 new dependencies.
├─ abab@1.0.3
├─ abbrev@1.1.0
├─ yallist@2.1.2
├─ yargs-parser@4.2.1
└─ yargs@6.6.0
✨  Done in 97.98s.
Success! Created reactjs_demo at /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo
Inside that directory, you can run several commands:
  yarn start
    Starts the development server.
  yarn build
    Bundles the app into static files for production.
  yarn test
    Starts the test runner.
  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd reactjs_demo
  yarn start
Happy hacking!

然后

npm start

Compiled successfully!
You can now view reactjs_demo in the browser.
  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.10:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.

就可以看到首页了:

booleanhunter/ReactJS-AdminLTE: ReactJS version of the original AdminLTE dashboard

➜  reactjs_demo npm install adminlte-reactjs
npm WARN deprecated bower@1.8.0: ..psst! While Bower is maintained, we recommend Yarn and Webpack for *new* front-end projects! Yarn’s advantage is security and reliability, and Webpack’s is support for both CommonJS and AMD projects. Currently there’s no migration path, but please help to create it: https://github.com/bower/bower/issues/2467
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN gentlyRm not removing /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/html-minifier/node_modules/.bin/uglifyjs as it wasn’t installed by /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/html-minifier/node_modules/uglify-js
npm WARN gentlyRm not removing /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/espree/node_modules/.bin/acorn as it wasn’t installed by /Users/crifan/dev/dev_root/daryun/Projects/xxxsourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/espree/node_modules/acorn
npm WARN gentlyRm not removing /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/autoprefixer/node_modules/.bin/browserslist as it wasn’t installed by /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/autoprefixer/node_modules/browserslist
> fsevents@1.1.2 install /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/fsevents
> node install
[fsevents] Success: “/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node” already installed
Pass –update-binary to reinstall or –build-from-source to recompile
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-dom@15.6.1 requires a peer of react@^15.6.1 but none was installed.
added 100 packages, removed 738 packages and updated 294 packages in 51.657s

本来还想去用:

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
// import reactjsAdminlte from ‘adminlte-reactjs’;
class App extends Component {
  render() {
    // let ProfileCard = reactjsAdminlte.ProfileCard;
    // let HeaderBar = reactjsAdminlte.HeaderBar;
    // let NavigationMenu = reactjsAdminlte.NavigationMenu;
    
    return (
      <div className=”App”>
         <div className=”App-header”>
          <img src={logo} className=”App-logo” alt=”logo” />
          <h2>Welcome to React</h2>
        </div>
        {/* <HeaderBar /> */}
        <p className=”App-intro”>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
export default App;

去试试,adminlte-reactjs如何呢,结果直接挂了,都没法运行了:

➜  reactjs_demo npm start
> reactjs_demo@0.1.0 start /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo
> react-scripts start
sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! reactjs_demo@0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the reactjs_demo@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/crifan/.npm/_logs/2017-08-07T12_41_29_517Z-debug.log

重新安装一下:

➜  reactjs_demo npm install adminlte-reactjs
npm WARN react-dom@15.6.1 requires a peer of react@^15.6.1 but none was installed.
removed 69 packages and updated 1 package in 5.965s

再运行npm start问题依旧。

删除掉adminlte-reactjs,重新安装:

➜  reactjs_demo npm uninstall adminlte-reactjs
removed 577 packages in 21.273s
➜  reactjs_demo npm install
removed 84 packages in 9.139s

看看能否正常运行。

结果还是不行。

去install看看,结果安装了1000多个包:

➜  reactjs_demo npm install react-scripts
> fsevents@1.1.2 install /Users/crifan/dev/dev_root/daryun/Projects/xxxsourcecode/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/fsevents
> node install
[fsevents] Success: “/Users/crifan/dev/dev_root/daryun/Projects/xxxe/web/AdminManagement/reference/create-react-app/reactjs_demo/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node” already installed
Pass –update-binary to reinstall or –build-from-source to recompile
added 1123 packages, removed 11 packages and updated 73 packages in 63.464s

结果npm start

各种错误:

算了,重新下载和安装使用create-react-app吧。

然后顺带好好学习一下:

create-react-app/README.md at master · facebookincubator/create-react-app

中的解释,可以学习到很多新知识,新概念。

比如:

postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

ai/browserslist: Share browsers list between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset.

browserl.ist: A page to display compatible browsers from a browserslist string.

再去试试,问题依旧。

根本没法集成。

adminLTE react js create-react-app command not found

Setup instructions result in “create-react-app: command not found” · Issue #138 · facebookincubator/create-react-app 

bash: create-react-app: command not found · Issue #1182 · facebookincubator/create-react-app

Create-react-app: command not found · Issue #962 · facebookincubator/create-react-app

node.js – create-react-app, installation error (“command not found”) – Stack Overflow

reactjs – create-react-app not currently working – Stack Overflow

算了。放弃。

【总结】

此处的ReactJS-AdminLTE做的还是很不成熟,至少对于create-react-app创建出来的app中,

先去:

npm install adminlte-reactjs

然后就导致连:

npm run start

npm start

都无法启动了:

sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! reactjs_demo@0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT

所以只能放弃。

转载请注明:在路上 » 【未解决】用create-react-app创建的ReactJS的app中引用ReactJS-AdminLTE

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
56 queries in 0.086 seconds, using 18.68MB memory