react npm初始化的使用

nmp网址 https://www.nmpjs.com/package/react

npm install react

查看是否安装成功 npm -v

react -v

配置npm淘宝镜像 淘宝镜像地址https://nmp.taobao.org

1.安装淘宝镜像 sudo npm install -g cnpm —rigistry=https://registry.npm.taobao.org

 

 

查看是否安装成功 cnpm -v

2.配置淘宝镜像

windows: Nodes安装目录下node_modules\npm\npmrc

mac: cd ~

atom .npmc

输入rigistry=https://registry.npm.taobao.org

 

React调试环境配置

1.进入react官网。2.本地新建一个文件夹，命令行进入文件夹 3 npm init. 按照指示只输入括号中的提示，如果不需要可以按enter键跳过（输入name，entry point: index.js）

5.安装必要的组件，按照react官网输入命令

sudo npm install --save react react-dom babelify babel-preset-react

6安装es2015

sudo npm install babel -preset-es2015 —save

7使用wepack打包运行

在项目中新建webpack.config.js

 

var webpack = require(‘webpack’);

var path = require(‘path’);

 

module.exports = {

context:__dirname + ‘/src’,

entry:’.js/index.js’,

module:

}

 

React相关插件

atom

atom-ternjs

格式化- atom-beautify 

直接打开浏览器 open-in-browser

快速html代码 emmet

文件图标file-icons

高亮当前行 highlight-line

高亮所有选择highlight-selected

 

之前新建RN项目都不会出现这个问题，今天报错如下，这里记录下吧。

报错截图：

This will walk you through creating a new React Native project in /Users/sipeng/Desktop/ReactNative/CodePushDemo/dounineApp
Using yarn v0.24.5
Installing react-native...
yarn add v0.24.5
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning react-native > connect@2.30.2: connect 2.x series is deprecated
error An unexpected error occurred: "https://registry.npm.taobao.org/inflight: Cannot read property 'asyncReset' of null".
info If you think this is a bug, please open a bug report with the information provided in "/Users/sipeng/Desktop/ReactNative/CodePushDemo/dounineApp/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
{ Error: Command failed: yarn add react-native --exact
    at checkExecSyncError (child_process.js:588:13)
    at execSync (child_process.js:628:13)
    at run (/usr/local/lib/node_modules/react-native-cli/index.js:294:5)
    at createProject (/usr/local/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/usr/local/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/usr/local/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
  error: null,
  cmd: 'yarn add react-native --exact',
  file: '/bin/sh',
  args: [ '/bin/sh', '-c', 'yarn add react-native --exact' ],
  options: 
   { stdio: [ [Object], [Object], [Object] ],
     shell: true,
     file: '/bin/sh',
     args: [ '/bin/sh', '-c', 'yarn add react-native --exact' ],
     envPairs: 
      [ 'rvm_bin_path=/Users/sipeng/.rvm/bin',
        'TERM_PROGRAM=Apple_Terminal',
        'GEM_HOME=/Users/sipeng/.rvm/gems/ruby-2.3.0',
        'SHELL=/bin/bash',
        'TERM=xterm-256color',
        'IRBRC=/Users/sipeng/.rvm/rubies/ruby-2.3.0/.irbrc',
        'TMPDIR=/var/folders/gp/cxw9cps10dq6mty6fxqlpwh40000gn/T/',
        'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.DhzYf3w68r/Render',
        'TERM_PROGRAM_VERSION=388.1.1',
        'OLDPWD=/Users/sipeng',
        'MY_RUBY_HOME=/Users/sipeng/.rvm/rubies/ruby-2.3.0',
        'TERM_SESSION_ID=94F116D3-E903-4682-ACDD-108465EDB87F',
        'USER=sipeng',
        '_system_type=Darwin',
        'rvm_path=/Users/sipeng/.rvm',
        'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.yvZGrcLxt2/Listeners',
        '__CF_USER_TEXT_ENCODING=0x1F5:0x19:0x34',
        'rvm_prefix=/Users/sipeng',
        'PATH=/Users/sipeng/.rvm/gems/ruby-2.3.0/bin:/Users/sipeng/.rvm/gems/ruby-2.3.0@global/bin:/Users/sipeng/.rvm/rubies/ruby-2.3.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/sipeng/.rvm/bin',
        'PWD=/Users/sipeng/Desktop/ReactNative/CodePushDemo',
        'LANG=zh_CN.UTF-8',
        '_system_arch=x86_64',
        'XPC_FLAGS=0x0',
        '_system_version=10.12',
        'XPC_SERVICE_NAME=0',
        'rvm_version=1.27.0 (latest)',
        'SHLVL=1',
        'HOME=/Users/sipeng',
        'LOGNAME=sipeng',
        'GEM_PATH=/Users/sipeng/.rvm/gems/ruby-2.3.0:/Users/sipeng/.rvm/gems/ruby-2.3.0@global',
        'RUBY_VERSION=ruby-2.3.0',
        '_system_name=OSX',
        '_=/usr/local/bin/react-native' ],
     killSignal: undefined },
  envPairs: 
   [ 'rvm_bin_path=/Users/sipeng/.rvm/bin',
     'TERM_PROGRAM=Apple_Terminal',
     'GEM_HOME=/Users/sipeng/.rvm/gems/ruby-2.3.0',
     'SHELL=/bin/bash',
     'TERM=xterm-256color',
     'IRBRC=/Users/sipeng/.rvm/rubies/ruby-2.3.0/.irbrc',
     'TMPDIR=/var/folders/gp/cxw9cps10dq6mty6fxqlpwh40000gn/T/',
     'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.DhzYf3w68r/Render',
     'TERM_PROGRAM_VERSION=388.1.1',
     'OLDPWD=/Users/sipeng',
     'MY_RUBY_HOME=/Users/sipeng/.rvm/rubies/ruby-2.3.0',
     'TERM_SESSION_ID=94F116D3-E903-4682-ACDD-108465EDB87F',
     'USER=sipeng',
     '_system_type=Darwin',
     'rvm_path=/Users/sipeng/.rvm',
     'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.yvZGrcLxt2/Listeners',
     '__CF_USER_TEXT_ENCODING=0x1F5:0x19:0x34',
     'rvm_prefix=/Users/sipeng',
     'PATH=/Users/sipeng/.rvm/gems/ruby-2.3.0/bin:/Users/sipeng/.rvm/gems/ruby-2.3.0@global/bin:/Users/sipeng/.rvm/rubies/ruby-2.3.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/sipeng/.rvm/bin',
     'PWD=/Users/sipeng/Desktop/ReactNative/CodePushDemo',
     'LANG=zh_CN.UTF-8',
     '_system_arch=x86_64',
     'XPC_FLAGS=0x0',
     '_system_version=10.12',
     'XPC_SERVICE_NAME=0',
     'rvm_version=1.27.0 (latest)',
     'SHLVL=1',
     'HOME=/Users/sipeng',
     'LOGNAME=sipeng',
     'GEM_PATH=/Users/sipeng/.rvm/gems/ruby-2.3.0:/Users/sipeng/.rvm/gems/ruby-2.3.0@global',
     'RUBY_VERSION=ruby-2.3.0',
     '_system_name=OSX',
     '_=/usr/local/bin/react-native' ],
  stderr: null,
  stdout: null,
  pid: 9488,
  output: [ null, null, null ],
  signal: null,
  status: 1 }
Command `yarn add react-native --exact` failed.

解决方法：

1> cd 到文件夹目录；

2> 执行下面语句：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

3> 再次 

react-native init dounineApp