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 失敗：參考

包管理

• 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網絡太慢解決辦法