React整理-基础

前言

开发环境搭建

node环境

版本管理工具NVM

• https://github.com/nvm-sh/nvm
• https://github.com/coreybutler/nvm-windows

// nvm root setting.txt
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

• nvm淘宝镜像源

nvm uses实效处理意见(windows)

1. 删除已经安装的node和nvm
2. 再次安装nvm时，修改node.js Symlink

C:\Program Files\nodejs => C:\Program Files\nodejsx

• nvm-windows use 失败：参考
• nvm brew mac
• [nvm mac15以上fix](https://cloud.tencent.com/dev...）

包管理

• npm
• nrm：npm注册表管理器

注意事项:
建议安装mirror-config-china，为中国内地的Node.js开发者准备的镜像配置，大大提高node模块安装速度。

npm install -g mirror-config-china

• yarn

// 可通过npm安装
npm i -g yran

• yrm：yarn注册表管理器

react-devtools

• github地址
• 安装步骤

git clone https://github.com/facebook/react-devtools.git

• react-devtools 安装install.js失败 /electron/install.js:47

// ~ .npmrc 添加配置
electron_mirror="https://npm.taobao.org/mirrors/electron/"

• build chrome 插件并且安装

开发规范

standard js规范

• https://standardjs.com/

bem css规范

• http://getbem.com/

开发

在网站中添加 React

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<style>
    .app {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script type="text/babel">
    class HelloWorld extends React.Component {
        constructor(props) {
          super(props)
        }
        render() {
          return (
            <div class="app">
                <h1>hello world</h1>
            </div>
          )
        }
    }
    ReactDOM.render(<HelloWorld/>, document.querySelector('#root'))
</script>

• 示例

参考资料

• node-sass网络太慢解决办法