最近有个项目需要用到react做一个前端界面,在网上搜索了一些关于react相关的知识,感觉比较多、而且零散。我虽然是一个后端开发工程师,但之前接触过一些界面开发,比如:jsp、ajax、html、css的还是了解一些,但是遇到这个react,感觉有点懵比。写法上和之前的完全不同,而且看了一写示例后发现,现在的前端开发和后端有点类似了,需要编译、打包…
好了,废话不多说,进入今天的正题。我在github上找到一个项目https://github.com/ltadpoles/react-admin 通过这个项目整体把握一下react,下载下来后如何运行?
这个就不废话了, 直接上之前看过的一篇文章吧
https://blog.csdn.net/liuxiao723846/article/details/48519593
cd /data
wget https://github.com/ltadpoles/react-admin/archive/master.zip
unzip react-admin-master.zip
cd /data/react-admin-master
npm install
一般情况,执行这个命令就会成功下载依赖到node_moduls,但这次报了一个错:npm EACCES: permission denied
解决方法:
cd /data/react-admin-master
npm i --unsafe-perm
cd /data/react-admin-master
npm run build
> react-admin@0.1.0 build /data/react-admin-master
> react-app-rewired buildCreating an optimized production build...
。。。
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.The build folder is ready to be deployed.
You may serve it with a static server:yarn global add serveserve -s buildFind out more about deployment here:bit.ly/CRA-deploy
根据输出我们可以看到,在react-admin-master下新建了一个build文件夹,这个文件夹是用来上线用的。我们看下其结构:
./
├── asset-manifest.json
├── favicon.png
├── index.html
├── manifest.json
├── precache-manifest.212f4f915e45f4bedbb826a93733418a.js
├── service-worker.js
└── static├── css│ ├── 0.e1069116.chunk.css│ ├── 0.e1069116.chunk.css.map│ ├── 1.f2693133.chunk.css│ ├── 1.f2693133.chunk.css.map│ ├── 2.855d33ea.chunk.css│ ├── 2.855d33ea.chunk.css.map│ ├── 32.4ac16fbd.chunk.css│ ├── 32.4ac16fbd.chunk.css.map│ ├── 33.7e2b1ae9.chunk.css│ ├── 33.7e2b1ae9.chunk.css.map│ ├── 34.10a87976.chunk.css│ ├── 34.10a87976.chunk.css.map
...
打包后,我们如果直接打开index.html文件,是不行的,会报错,因为正确的做法是在node的服务端以服务器的形式(域名+端口+路径)来访问。
npm install -g serve #进入build目录,然后使用serve启动
cd build
serve -s build
#报错:
serve: command not found#----------------
#serve安装成功了以后,运行serve -s build 项目就启动起来了,它的固定端口是5000;那么我们想改动端口怎么办呢?运行下面的命令就可以用指定的端口启动项目了:
serve -l 2000 -s build //从2000端口启动项目
解决:
cd build
npx serve
ERROR: Cannot copy to clipboard: write EPIPE┌─────────────────────────────────────────────────┐│ ││ Serving! ││ ││ - Local: http://localhost:5000 ││ - On Your Network: http://10.39.16.31:5000 ││ │└─────────────────────────────────────────────────┘
参考:
https://www.jianshu.com/p/edec36bfa54b
https://juejin.im/post/5db64fa95188256edd7e73ae
https://juejin.im/post/5aa26c106fb9a028d936c357
https://www.jianshu.com/p/7f81913d1298
https://www.html.cn/qa/react/15219.html