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。 這個功能集適合中小型部署，但是，如果你無法自定義該工具，最好不要用這個命令。