react-node

〇、centOS nginx 部署

1. $ yum install nginx -y

2. 配置文件

当装好后就会在 /etc/nginx 目录下看到一堆文件，其中 nginx.conf 这个文件就是默认的 nginx 配置文件，下面有一个目录叫 conf.d, 我们自己写的配置文件就放在这个目录下。

3. 报错

如果报 nginx: [error] open() "/run/nginx.pid" failed (2: No such file or directory) 这样的错误，那就先执行：
nginx -t
将得到以下输出：
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
再执行：
$ nginx -c /etc/nginx/nginx.conf
$ nginx -s reload

这时候直接访问我们的公网ip地址，应该就能得到welcome to nginx

4. 自己的配置

进入到 /etc/nginx/conf.d 新建一个 任意名字.conf 在里面写入 server 的配置

server {
  listen 8080;
  listen [::]:8080;
  server_name echo;
  root /var/www/echo

  localtion / {
    try_files $uri $uri/ /index.html
  }
}

5. 在server的配置

如果没有使用hash router, 那么就会刷新之后页面无法访问
只需要在 server 配置里加上

    localtion / {
      try_files $uri $uri/ /index.html
    }

了解一下 连接

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

一、一些命令

1. cp
2. mv
3. :wq --> 保存并退出
4. q! --> 退出且不保存
5. touch filename
6. vim filename

二、first-react

1. npm list -g --depth=0 --> 查看全局装了哪些包
2. npm init react-app projectname
   -- 这种方式不需要全局安装一些东西，用于创建一个react项目（node必须6以上）
3. 在 package.json 中看到react-scripts 版本为2.x, ie-10及以下都不兼容，则卸载 react-scripts，再安装1.x版本
   npm uninstall -S react-scripts
npm install -S react-scripts@1.x

---

或者

1. npm install -g create-react-app
2. create-react-app --scripts-version=react-scripts@1.x projectname

react 目录树

• firstreacct
  • node_modules
    • ...
  • public
    • favicon.ico
    • index.html
    • manifest.json
  • src
    • App.css
    • App.js
    • App.test.js
    • index.css
    • index.js
    • logo.svg
    • serviceWorker.json
  • .gitignore
  • package-lock.json
  • package.json
  • README.md

src目录为我们要操作的目录，里面的东西可以全部删掉，然后新建 index.js 开始写

三、react相关概念

1. 引入依赖

import React from 'react';

-- 写了这句话可能没有地方使用React，但是只要写了这句话就表示这个文档用的是 JSX 的标准

import ReactDOM from 'react-dom';

2. react element

const app = (<div>
    <h1>这是标题一</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus consequatur quod quaerat totam facere ut ducimus voluptatum dolorum modi accusamus, quo alias quisquam tenetur magnam cum dignissimos maxime quis porro</p>
  </div>)

render(
  <App>
    
  </App>
  document.querySselector('#root')
)