初始化 React 项目


一个后端从零开始搭建一个 React 项目的笔记。

环境搭建

node.js，知名发行版可以从官网下载最新LTS安装包。小众Deepin用了源里面内置的v6.3.1。
安装完node.js之后应该会自动安装npm

IDE设置

  • Visual Studio Code
    公司前端大佬使用，需要各种插件。但是我觉得这类小的编辑器，还是用来看各种单文件方便。

  • WebStorm
    作为 JetBrains 全家桶用户，就是你啦！代码检查，格式化，自动补全，应有尽有。

npm 相关

  • npm 版本

npm –version

据大佬介绍，5.7.0版本之后更改了很多东西，已经比cnpm快了，只需要设置国内源就好。

  • 设置国内源

国内使用淘宝源足够了，修改.npmrc文件。

1
2
3
cat > ~/.npmrc << EOF
registry=https://registry.npm.taobao.org
EOF

我也写了个一行的命令。

curl -sSL https://raw.githubusercontent.com/ldsink/toolbox/master/set-npm-mirror.sh | sh

  • 升级npm

sudo npm i -g npm

注意，这个使用了sudo，所以用户是root。如果需要使用淘宝源，需要在root下添加上面的源。

  • npm大部分的安装失败

    • 项目下面的node_modules可以删除
    • 链接到的node_modules也可以删了再重装

  • npm 文档 npm Documentation

  • 版本号规则
    npm 包默认遵守 Semver 语义化版本 2.0 的规则。
    组件的版本以 major.minor.patch 形式表示 主版本号.次版本号.修订号 比如： 0.1.0 0.3.1。
    patch位自动升级标识符~，minor位自动升级标识符^。

  • 更新并保存当前版本

npm update –save

React 基本知识

  • Introducing JSX。
  • props 用来传递数据，state 用来存储组件内部的状态和数据。
  • props 是只读的，state 当前组件 state 的值可以作为 props 传递给下层组件。
  • React 组件按照生命周期运行，改变 state 就会重新执行 render 方法。
  • render 方法返回的是一段 JSX 语法的结构用来渲染到页面上。

React 生命周期图

React生命周期图

赏

很惭愧，就做了一点微小的工作

支付宝
微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一个人的命运啊，当然要靠自我奋斗，但是也要考虑到历史的行程。

很惭愧，就做了一点微小的工作，谢谢大家。