React学习笔记の基本命令
===
<center>
<h1>Learn once, write anywhere</h1>
</center>
```
曾青松
教授 博士
Email:qingsongzeng@163.com
http://www.zengqs.com
广州番禺职业技术学院
```
# 配置CentOS 7环境
将当前操作用户zengqs加入到sudoers列表
- sudo的用户列表存放在 /etc/sudoers 文件中。默认情况下该文件为只读，不能修改。
- su 一下，提升到root用户。
- 执行`visudo`打开`/etc/sudoers`文件
- 找到 root ALL=(ALL) ALL 这一行。 在命令模式下 yy 复制，再 p 一下粘贴。
- 把新行中的root 改成 你想要使用sudo的用户 zengqs ALL=(ALL) ALL
# Visual studio Code
CentOS 7 下[安装vscode](https://code.visualstudio.com/docs/setup/linux#_rhel-fedora-and-centos-based-distributions)
We currently ship the stable 64-bit VS Code in a yum repository, the following script will install the key and repository:
~~~~shell
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo yum check-update
sudo yum install code
~~~~
> 执行命令`code`可以打开vscode，建议不要以root身份运行。
# NodeJs安装
Run as root on RHEL, CentOS or Fedora for Node.js 8:
~~~~bash
curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -
~~~~
Then install, as root:
~~~~bash
yum -y install nodejs
~~~~
To compile and install native addons from npm you may also need to install build tools:
~~~~
yum install gcc-c++ make
~~~~
使用nodejs命令`npm`
~~~~
[root@localhost zengqs]# npm
Usage: npm <command>
where <command> is one of:
access, adduser, bin, bugs, c, cache, completion, config,
ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
explore, get, help, help-search, i, init, install,
install-test, it, link, list, ln, login, logout, ls,
outdated, owner, pack, ping, prefix, prune, publish, rb,
rebuild, repo, restart, root, run, run-script, s, se,
search, set, shrinkwrap, star, stars, start, stop, t, team,
test, tst, un, uninstall, unpublish, unstar, up, update, v,
version, view, whoami
npm <command> -h quick help on <command>
npm -l display full usage info
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
/root/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
npm@5.0.3 /usr/lib/node_modules/npm
~~~~
安装完node后建议设置npm镜像以加速后面的过程。
> 注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！
~~~~shell
sudo npm config set registry https://registry.npm.taobao.org --global
sudo npm config set disturl https://npm.taobao.org/dist --global
~~~~
定制的 cnpm 命令行工具安装脚本:
~~~~
npm install -g cnpm --registry=https://registry.npm.taobao.org
~~~~
# React Bootstrap
React Bootstrap 是由 React 构建的 Bootstrap 3 组件，也是最受欢迎的前端框架之一。项目地址：[https://react-bootstrap.github.io/](https://react-bootstrap.github.io/)
案例：
- [基于 React.js + Redux + Bootstrap 的 Ruby China 示例](https://my.oschina.net/rinaliuzhen/blog/761934)
# ant-degign
> Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。项目地址：[https://ant.design/index-cn](https://ant.design/index-cn)
特性
- 企业级金融产品的交互语言和视觉体系。
- 丰富实用的 React UI 组件。
- 基于 React 的组件化开发模式。
- 背靠 npm 生态圈。
- 基于 webpack 的调试构建方案，支持 ES6。
安装`ant-degign`开发包
~~~~
$ cnpm install antd --save
~~~~
# 环境配置
安装create-react-app工具
> create-react-app是来自于Facebook出品的零配置命令行工具，能够帮你自动创建基于Webpack+ES6的最简易的React项目模板，有助于初学者快速上手实践。
~~~~shell
sudo npm install -g create-react-app
~~~~
创建一个React Web项目
> 创建`ant-design-demo`项目。
~~~~shell
create-react-app ant-design-demo
~~~~
生成的空的项目的目录结构如图所示：
启动项目
~~~~shell
npm start
或者
yarn start
~~~~
打开 http://localhost:3000/ 查看你的 App。
如果你准备将其部署到生产环境，只需创建一个压缩包，并且运行
~~~~
npm run build。
~~~~
create-react-app特点
- 单依赖: 只有一个构建依赖。它使用了 Webpack，Babel，ESLint，和其他很棒的项目，但是把他们整合到一起提供给用户。
- 零配置:这里没有配置文件或者命令行选项。开发和生产构建配置都已经设置完毕，这样以来你可以专注于写代码。
- 无锁定: 您可以随时到自定义设置。运行一个简单的命令，所有配置和构建依赖会移动到你的项目内，因此你可以选择他们的位置。
为什么用它
如果你用 React 开始，使用 create-react-app 自动构建你的 app。无需配置文件，并且 react-scripts 是在 package.json 额外的构建依赖。你的环境会提供你需要构建现代化 React app 的任何东西:
- React，JSX，和 ES6 支持。
- ES6 之外的语言扩展，如对象扩展运算符。
- 一个开发服务器用来检查常见错误。
- 从 JavaScript 中 引入 CSS 和图片文件。
- 自动补全 CSS，因此你不需要 -webkit 或者其他前缀。
- 一个 build 构建脚本为生产模式从源码去打包 JS、CSS、和图片。
自定义配置
- 如果你对默认配置不满意，你可以从工具中退出，并像样板生成器一样使用它。
- 运行 npm run eject 复制所有依赖文件和相应依赖 (Webpack、Babel、ESLint 等等) 到你的项目，因此完全可控。
- 类似 npm start 和 npm run build 的命令依旧会工作， 但他们会指向复制的脚本，你可以根据自己的需求调整。
>注: 这是个单向操作。一旦 eject，你就回不去啦!
你可能不需要使用 eject。 这个功能集适合中小型部署，但是，如果你无法自定义该工具，最好不要用这个命令。