Ubuntu16.04 零基础react开发

4 篇文章 0 订阅
3 篇文章 0 订阅

实训作业做一个网站,也算一个机会好好学习一下整个流程和工具。准备前后端都学一下,因为前后端分离,我的任务集中在前端,先从react开始。

1. 安装nodejs

1.0 更新源

每次装软件先更新就对了,没什么坏处。

sudo apt-get update
sudo apt-get upgrade

这里有一个问题,有的时候会报一个错误

Failed to fetch ……

两个原因:

  1. 所使用的源不符合要求。可以去网上下载最新源。或者推荐直接下载deb包安装。
  2. 缓存服务器。网络服务商缓存策略问题,没有考虑到更新等问题。换个WiFi;更换源路径;……方法很多,不一定都有用,都可以试一试。时间紧迫,问题不大先搁在这里有时间再来解决。参考博客地址:https://www.cnblogs.com/fighting-forever/p/7234646.htmlhttps://blog.csdn.net/yanli33/article/details/70158100
  3. DNS配置问题。

等我解决了我的问题再来补充这个解决方案。

直接转后面使用vim安装,简直爽到飞起。前面我讲的都是垃圾

1.1 下载软件包

终端执行命令:

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash - //最新版本11
sudo apt-get install -y nodejs

同时还需要下载一个依赖工具:

sudo apt-get install -y build-essential

看上去真简单,然后我的就出错了……安装nodejs一直不成功。尝试了一下直接下载deb包,发现环境变量一直配不出来。后来时间到了该去跑步了,果断收拾书包回宿舍。

洗完澡出来又试了一下,有些命令就莫名其妙过了……不过还是安装不成功,一直显示说我有nodejs了但是查版本时候显示node未安装,又在劝我退学了真是。后来换了个命令:

sudo apt-get instrall nodejs-legacy
sudo apt-get instrall npm

虽然运行node -vnpm -v之后发现版本有点低,分别是v4.2.6和v3.5.2。哎聊胜于无嘛……

2. 创建react新项目(或者应该叫应用?)

新建文件夹React,进入。

mkdie React
cd React

插播一个很坑的事情,啥也别说先烧楼主祭天 https://segmentfault.com/a/1190000007542620
执行完sudo npm install npm@latest -g就报错了

sudo npm install -g n
/usr/local/lib/node_modules/npm/bin/npm-cli.js:79
let notifier = require(‘update-notifier’)({pkg})
^^^
SyntaxError: Block-scoped declarations (let, const, function, class)
not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions…js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3

哇气死了!评论是个好东西,可惜我都是错了之后才看到……听评论的,删除安装的npm。

cd /usr/local/lib/node_modules
mv npm/ /tmp/usr_local_lib_node_modules_npm

好了我不要升级了,这乱七八糟的玩意儿,小爷忙着呢……继续下一个步骤,安装Create React App(这个过程超级慢建议装一个国内的cnpm)并新建项目。

sudo npm install -g create-react-app
create-react-app Reservation_sysu

然后就尴尬了,说我node版本太低了至少要用8以上的……好吧乖乖升级。出现一个错误,哎呀麻我咋出现这么多错误呢我得啥时候才可以打代码呢安安静静的用Windows不好吗

……npm not being able to find a package.json……

输入npm init根据提示生成文件就好了。

前面很多都是废话,先看这里

然后npm实在太慢了我受不了安装了cnpm,然后尝试升级node升级不了,qtmd快滚,下载安装vim, 使用vim安装node,爽得很突然觉得我之前都白干了……参考博客 https://www.cnblogs.com/HansBug/p/8901865.html

首先使用curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash
或使用wget
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash
然后运行
~/.bashrc
系统命令进行同步。然后来检测下是否安装妥当
nvm -v
正确显示了版本号,则说明nvm安装完毕
安装最新的nodejs稳定版本
nvm instal stable
查看版本号
node -v npm -v

好的继续接着创建项目,你会发现报错了

name can no longer contain capital letters

换成小写的

create-react-app reservation_sysu

创建项目时间有点长,去喝口水吧

cd reservation_sysu
npm start

然后就可以看到react的欢迎界面了。

后记

半天加半个下午的东西,发现最多两个小时就可以完成,啥也别说了,日常被劝退……

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值