折腾：
【已解决】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 “[email protected]” has unmet peer dependency “eslint@>=1.6.0 <4.0.0”. warning “[email protected]” has unmet peer dependency “babel-eslint@^7.2.3”. warning “[email protected]” has unmet peer dependency “eslint@^3.19.0”. warning “[email protected]” has unmet peer dependency “eslint-plugin-flowtype@^2.33.0”. warning “[email protected]” has unmet peer dependency “eslint-plugin-import@^2.2.0”. warning “[email protected]” has unmet peer dependency “eslint-plugin-jsx-a11y@^5.0.3”. warning “[email protected]” has unmet peer dependency “eslint-plugin-react@^7.0.1”. warning “[email protected]” has unmet peer dependency “babel-runtime@^6.23.0”. warning “[email protected]” has unmet peer dependency “eslint@^3.0.0 || ^4.0.0”. warning “[email protected]” has unmet peer dependency “[email protected] – 3.x”. warning “[email protected]” has unmet peer dependency “eslint@^2.10.2 || 3.x”. warning “[email protected]” has unmet peer dependency “eslint@>=2.0.0”. warning “[email protected]” has unmet peer dependency “webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3”. warning “[email protected]” has unmet peer dependency “webpack@^2.2.0”. warning “[email protected]” has unmet peer dependency “babel-core@6 || 7 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0-rc”. warning “[email protected]” has unmet peer dependency “webpack@2”. warning “[email protected]” has unmet peer dependency “webpack@^2.2.0”. warning “[email protected]” has unmet peer dependency “file-loader@*”. warning “[email protected]” has unmet peer dependency “webpack@^1 || ^2 || ^2.1.0-beta || ^2.2.0-beta”. warning “[email protected]” has unmet peer dependency “webpack@^1.0.0 || ^2.0.0 || ^3.0.0”. warning “[email protected]” 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. … ✨ 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 [email protected]: ..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 [email protected]: 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 > [email protected] 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 [email protected] 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 > [email protected] 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! [email protected] start: `react-scripts start` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] 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 [email protected] 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 > [email protected] 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
browserl.ist: A page to display compatible browsers from a browserslist string.
再去试试，问题依旧。
根本没法集成。
adminLTE react js create-react-app command not found
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! [email protected] start: `react-scripts start` npm ERR! spawn ENOENT |
所以只能放弃。
转载请注明：在路上 » 【未解决】用create-react-app创建的ReactJS的app中引用ReactJS-AdminLTE