• 1.开始安装node.js运行环境 1.1下载地址: ... 这个连着npm一起下载。 ...关于npm和node.js的区别与关系,这里有个很好的引用 ... 其实npm是nodejs的包管理器(package manager)。我们在Node.js上开发时,会用到很多别人...

    1.开始安装node.js运行环境

    1.1下载地址:

    https://nodejs.org/en/

    这个连着npm一起下载。

    关于npm和node.js的区别与关系,这里有个很好的引用

    其实npm是nodejs的包管理器(package manager)。我们在Node.js上开发时,会用到很多别人已经写好的javascript代码,如果每当我们需要别人的代码时,都根据名字搜索一下,下载源码,解压,再使用,会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上,如果要用某个或某些个,直接通过npm安装就可以了,不用管那个源码在哪里。并且如果我们要使用模块A,而模块A又依赖模块B,模块B又依赖模块C和D,此时npm会根据依赖关系,把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦!

    1.2 版本验证

    在命令行看到一下版本:

    npm -v
    node -v

    2.react

    这里给出vscode官方使用react的教程,按上面操作的
    https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

    如果操作正确,那么在my-app中输入npm start会出现下面的结果:
    这里写图片描述

    3.Vscode在终端code命令实现

    开始想像当初用python一样,修改 ./bash_profile 来实现修改Linux中的环境变量,但发现Vscode有更好的实现方法:

    在vscode中使用command+shift+p ,然后在其中输入code,就自动可以看到修改其中的vscode命令。

    所以 在2中的那步骤 code .也解决了。

    展开全文
  • 第一步,安装node.js开发环境 。 第一种,Node.js安装包及源码下载地址为:https://nodejs.org/en/download/  下载后直接安装即可。 第二种,接着打开终端,输入以下命令安装Homebrew ruby -e “$(curl -...
    第一步,安装node.js开发环境 。

    第一种,Node.js安装包及源码下载地址为:https://nodejs.org/en/download/  下载后直接安装即可。

    第二种,接着打开终端,输入以下命令安装Homebrew

    ruby -e “$(curl -fsSL  https://raw.githubusercontent.com/Homebrew/install/master/install);  

    再输入命令 brew install node

    完了之后,在终端输入node -v, 出现版本号则表示安装成功。如下:

    (非必需)可安装nvm进行node版本管理

    第二步,安装npm

    如果你安装了最新版本的node,则默认已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。如下

    如果不是最新的,建议升级了最新的,或者单独再安装npm,命令:brew install npm


    第三步,安装jspm

    1. 在全局范围安装jspm,就可以在任何命令使用jspm命令了终端输入命令:npm install jspm -g
    2. 完成后,输入 jspm ,会返回一些帮助信息 。

    第四步,为项目添加jspm依赖

    1. 选择你喜欢的目录,新建一个文件夹,可使用命令mkdir xxx,   cd 到对应的文件夹下(这里假设新建文件夹名称为 ZXY_RN_Project)。
    2. 初始化npm, 创建package.json, 输入命令:npm init ,填写你的项目名称,接下来一路回车即可。
    3. 查看ZXY_RN_Project,会发现下面多了一个package.json文件.
    4. 重要步骤来了,输入
      npm install jspm --save-dev
       把jspm添加到项目开发依赖。完成后,命令ls, 会发现又多了node_modules文件,打开这个文件,会发现里面很多关于babel,ES6等等的东西。
    5. 最后执行命令 jspm init, 为jspm创建配置文件config.js, 一路回车即可。
    6. 到这里,项目添加jspm依赖就算完成了。

    第五步,安装React
     
    1.     在ZXY_RN_Project下,通过jspm安装react, 命令jspm install react@0.14.0-rc1 (注:0.14.0-rc1为版本号)。一路回车即可。如果安装过程,出现error错误,则重新再执行一下命令即可,直到没出现error信息即为成功。
    2.  通过jspm安装rect-dom, 命令jspm install react-dom@0.14.0-rc1 (注:0.14.0-rc1为版本号)。过程同上。
    3. (非必需) 如果你项目想使用semantic-ui, 需安装semantic-ui,命令jspm install semantic-ui    导入semantic-ui样式需要安装jspm插件,命令jspm install css 
    4. 上面步骤完成后,你会发现ZXY_RN_Project下面多了jspm_packages文件夹。


    第六步,安装BrowserSync
      
    1. 通过npm安装browserSync,命令npm install -g browser-sync
    2. 使用BrowserSync启动项目,命令browser-sync start --server 。 如果你想启动后,增加一些监听文件修改时,自动刷新页面,则启动命令为 browser-sync start --server  --no-notify --files ‘xxxx'     (xxx为具体的文件名,相对路径,有多个时,可用逗号分开,如 'index.html, app/main.js’);
    3. 到此,我们可以看到React项目正常启动后,出现页面。

    第七步 IDE的选择

         可选择Sublime Text(程序员Jon Skinner开发), 或Atom ( github内部使用的,现在开源)等等,至于两者或其他的比较,谷歌一下。上面新建的项目,可以直接用IDE打开,如用Atom打开,目录结构如下:





    第八步 编写代码

     经过上面七步,已经完成了一个React项目的构建,下面,我们可以使用IDE进行编程,这里以Atom为主。
    编写完代码后,如果启动项目命令为 browser-sync start --server  --no-notify --files 'xxxx',则保存代码后自动刷新页面,无需手动刷新,如下。






    Atom有非常多优秀的插件,可参考这里,http://blog.csdn.net/qq_30100043/article/details/53558381
    如果遇到安装失败的情况,请看这篇文章,万金油方法, http://www.cnblogs.com/strangerqt/p/5572435.html
    同样,Sublime Text也存在非常多的优秀插件,http://www.cnblogs.com/Rising/p/3741116.html
    展开全文
  • Mac react环境搭建

    2018-06-20 11:32:01
    https://www.cnblogs.com/xy-milu/p/6837142.html网上的教程有好多,在这里不一一列举,我只介绍我今天安装成功的步骤首先,在安装react之前要先配置好node1.安装node 在这里下载node的安装包...

    https://www.cnblogs.com/xy-milu/p/6837142.html

    网上的教程有好多,在这里不一一列举,我只介绍我今天安装成功的步骤

    首先,在安装react之前要先配置好node

    1.安装node

      在这里下载node的安装包https://nodejs.org/en/download/ 。我下载的是.pkg文件,直接双击安装就好

      node —v命令检验是否安装成功

      npm -v用来检测npm

    2.通过npm使用react

      国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

    一般这个时候就可以使用cnpm来进行操作,但是我的一直显示命令未找到。所以我放弃了使用cnpm,继续使用npm命令

    npm配置taobao镜像的registry

    然后直接用

    就是从taobao镜像拿包了

    3.两种react开发环境构建

    使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

    create-react-app 自动创建的项目是基于 Webpack + ES6 。

    执行以下命令创建项目:

    在浏览器打开http://localhost:3000/  盗用菜鸟教程一张图,因为我的已经更改了

    项目的目录结构如下

    复制代码
    复制代码

    之后我们可以修改src/App.js 文件代码来改变页面样式

    reate-react-app 执行慢的解决方法:

    在使用 create-react-app my-app 来创建一个新的React应用,在拉取各种资源时,往往会非常慢,一直卡在那:

    可以看到资源还是使用了 npmjs.org,解决方法是换成淘宝的资源:

    -- 配置后可通过下面方式来验证是否成功

    npm start来启动配置,那么自动会进入开发模式,此时热替换是处于自动激活状态

    使用npm run build来编译得到生产环境,此时代码会被编译到build目录下,此时会自动将整个应用打包发布,它会自动使用Webpack控件进行优化与压缩

    使用 Webpack-React-Redux-Boilerplate快速构建 React 开发环境

     其允许在一个项目中配置多个应用入口,同时支持开发模式、构建模式与库构建模式。同时笔者习惯不将webpack配置文件分成单独的dev与prod文件,而是合并到一个文件中。如果需要使用该模板,直接使用如下命令

    在执行时要注意,进入到包含install.sh的文件夹下面,否则第二句命令可能会出现找不到的问题,

    得到的模本文件夹主要由以下构成

    复制代码
    复制代码

    其核心的关于应用的配置文件即apps.config.js,在模板项目中其配置为

    复制代码
    复制代码

    开发模式

    开发模式下主要读取apps.config.js中的devServer配置,主要是可以配置调试的入口JS文件与开发服务器监听的端口号。开发模式下会自动使用dev.html作为默认的HTML文件传输到浏览器中展示,譬如在模板项目中是将helloworld项目作为当前正在开发的项目,切换到项目目录下使用npm start,即可开启开发模式,此时在浏览器内打开http://localhost:3000即可看到运行效果

    构建模式

    对于应用中存在的多应用入口,主要是在apps.config.js中的apps下进行配置的,一个典型的应用配置为:

    复制代码
    复制代码

    因为我只设置到这里。剩下的东西可以自己探索

    4.运行别人的react项目

    从git clone或者直接复制到某一个路径下,用webstorm打开,在webstorm的终端下面输入

    命令,相当于将项目载入环境;

    之后输入

    开启服务器,就会自动打开网页显示项目内容。

    但是我遇到的问题是,后台报错,样式消失  ,,,,,node-sass没有安装上。。。

    于是在终端输入



    或者

    安装好node-sass重新开启服务器

    就OK啦


    展开全文
  • React Native MAC下环境配置安装

    React Native MAC下环境配置安装

    1、安装HomeBrew

    第①步:打开终端操作命令行工具,在命令行输入:

    ruby -e “$(curl –insecure -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

    执行完毕后会提示输入系统密码:

    这里写图片描述

    第②步:回车键入系统密码提示安装成功:

    这里写图片描述

    第③步:验证是否真正安装成功: brew -v

    这里写图片描述

    至此说明HomeBrew已经安装成功。

    2、安装Nodejs

    第①步:浏览器进入 https://nodejs.org/en/download/ 选择Mac下的 macOS Installer(.pkg)下载。

    第②步:验证Nodejs是否安装成功,命令行输入 node -v

    这里写图片描述

    3、安装WatchMan检测bug

    第①步:命令行输入 brew install watchman

    这里写图片描述

    第②步:验证是否安装成功 watchman -v

    这里写图片描述

    4、安装Flow(JavaScript的静态类型检查器,方便找出类型错误问题)

    命令行输入 brew install flow即可

    这里写图片描述

    4、安装React Native

    命令行输入npm install -g react-native-cli
    输入后报错N多,如图
    这里写图片描述
    次数说明需要配置bash_profile文件的环境,可采用简单的sudo操作方式。
    重新输入命令sudo npm install -g react-native-cli

    这里写图片描述
    安装成功!

    至此React-Native MAC的下基础准备环境已经安装完毕!

    补充

    webstorm代码提示React-native

    1. 在命令窗口中输入 git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

    2. 打开webstorm, 选择file–>Import Settings…–>ReactNative-LiveTemplate–>ReactNative.jar–>OK–>Restart

    展开全文
  • 概述前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境。配置mac开发环境基本环境安装1.先安装Homebrew:用于安装NodeJS和其他工具。 注:Homebrew详解,对这个比较...

    概述

    前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境。

    配置mac开发环境

    基本环境安装

    1.先安装Homebrew:用于安装NodeJS和其他工具。
    这里写图片描述
    注:Homebrew详解,对这个比较了解的略过,我也是用mac没多久,这里给小白普及下。
    Homebrew全称Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X。是一个包管理器,用于在Mac上安装一些OS X没有的UNIX工具(比如著名的wget),Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中,并在 /usr/local/bin 中创建符号链接。
    安装Homebrew:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    这里写图片描述
    然后一路回车
    这里写图片描述
    最后出现success,就表示安装成功了。
    这里写图片描述
    安装完成后,可以用brew doctor命令检测下是否有什么冲突的地方。关于Homebrew其他的介绍可以自行查看官网资料。

    安装 Node.js

    React Native 需要 NodeJS 4.0或更高版本,Homebrew的Node默认包是6.0版本的,所以直接安装即可:

     brew install node

    这里写图片描述

    安装React Native 命令行工具npm

    之前我们说过npm是一个包管理工具,它是用来管理node的,详细介绍请看npm详解
    命令行工具可以轻松创建和初始化工程:

    npm install -g react-native-cli

    注:如果出现错误 :EACCES: permission denied,使用命令: sudo npm install -g React-native-cli.

    安装Yarn

    Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli

    其他建议安装

    Watchman

    Whtchman是Facebook开发的一个检测文件系统变化的工具,在RN开发中可以检测js文件等是否有变化,从而达到保存及编译的效果。这个在windows中也有,个人觉得可装也可以不装,直接手机上reload也是可以的。

     brew install watchman

    Flow

    静态类型检查工具

    brew install flow

    Nuclide

    Facebook推出的一款React Native集成开发环境(IDE),不过我不太喜欢,我一般用webstorm+Android/ios 的ide。

    快速开发React Native

    每次学习一门新的语言,我们总是总喜欢来一个helloWord。

    react-native init HelloWord
    
    cd HelloWord 
    
    react-native run-ios

    注:也可以用Xcode打开iOS/HelloWord.xcodeproj 并点击Run按钮。
    小提示:react-native命令行从npm官方源拖代码时会遇上麻烦。请将 npm仓库源替换成淘宝的:

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

    关于在mac上怎么搭建Android的运行环境这里不在讲解,大家可以看看我之前的文章React 和Android的整合,这篇文章也是补了之前RN在windows环境下开发,而没有在mac下开发,后面我们将讲解怎么在mac上开发一款RN应用。

    展开全文
  • mac下安装react开发工具 — React Devtools 一、下载 官网地址:https://github.com/facebook/react-devtools 下载react-devtools-master文件夹到本地 二、npm安装依赖 进入到react-devtools-master文件夹,用npm...
  • 参考文档ReactNative中文网 1.安装Java环境 假如我们之前配置好过iOS环境的话,就直接从Android Studio开始配置。注意,Android配置会比iOS稍微麻烦一些。 终端运行 javac -version Android Studio需要Java ...
  • React Native简介React Native已经Facebook开源,就引起了业界的关注,越来越多的开发者开始尝试在生产中 使用它。React Native为JavaScript开发跨终端应用提供了更加丰富的想象空间。下面就介绍一下环境配置。环境...
  • react Native从零开始 mac配置环境 在mac下,我们需要安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 Xcode。 这里我们用 Homebrew来安装node和Watchman. 安装命令为 brew install node brew install...
  • npm install -g react-native-cli安装react-native 命令行工具react-native –help可以查看命令行工具支持的命令接下来安装Xcode 之后安装Android Studio然后初始化一个应用react-native init FirstAp
  • 最近自己配了一下React native环境,各种坑。以下两个给我留下了深刻的印象,其实都是这样一种心情:解决不了超级蛋疼,解决完了觉得自己一定遇到了一个假问题!不多说,请看大屏幕: 1、ndk-build binary cannot be...
  • 1.安装Homebrew 2.安装node Watchman brew install node brew install watchman ...3.2 配置java环境变量,在终端运行以下命令 /usr/libexec/java_home(运行此命令可以得到java安装路径) touch ~/.bash_profile ...
  • 其实Mac配置安卓环境可以通过AndroidStudio来完成,这个度娘上有很多的资料,在这记录下我绕过AndroidStudio进行安卓的真机调试的配置过程。 贴上运行时的报错信息:No connected devices! FAILURE: Build ...
  • mac 下运行React-native android 遇到的一些问题
  • 安装完成之后查看node版本和npm版本;...通过npm安装创建React项目的依赖包create-react-app(这里选择全局安装,则需要用到管理员权限,若不选择全局,可不使用管理员权限) sudo npm install -...
  • React Native Mac环境搭建

    2016-06-03 13:44:37
    这里只介绍Mac 上的环境搭建,其他环境搭建请参考: http://facebook.github.io/react-native/docs/getting-started.html 。 上面有所有环境搭建。1、安装Homebrew安装Homebrew是为安装Node.js做前提准备。 安装...
  • React Native+Android环境搭建和开发配置Mac)   一.必须的软件安装   1.Homebrew安装,Homebrew,Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。 命令行安装:   /usr/bin/ruby -e &...
  • Mac下安装React native

    2015-03-30 23:02:39
    首先是安装node环境。brew install node*安装node如果出现某些异常,可以尝试加上sudo 在git上下载,或者直接clone...在react-native的项目目录下使用react-native命令行命令init初始化一个demo项目。react-native in
  • 配置用户设置 搜索emmet.triggerExpansionOnTab,启用。 点击展开目录,打开setting.json设置 把配置偏好设置,把这两个命令粘贴到用户设置 "editor.snippetSuggestions": "top", "emmet....
  • Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" homebrew在安装软件时可能会...
1 2 3 4 5 ... 20
收藏数 6,708
精华内容 2,683