[React-Native]入门(Hello World)
(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。
(2)在Mac上安装Xcode,建议Xcode 6.3以上版本
(3)安装node.js:https://nodejs.org/download/
A,使用Homebrew安裝nvm :$ brew install nvm
安裝完後,為了讓你可以直接在shell使用nvm指令,必須在你的 .bash_profile 加入以下這行(習慣把設定放在.bashrc的人可以把以下的.bash_profile改成.bashrc)
source $(brew --prefix nvm)/nvm.sh
或者直接輸入以下這行來加入
$ echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile
記得重新source你的 .bash_profile 來讓設定生效
$ . ~/.bash_profile
OK,以上就完成了nvm的安裝,簡單吧!
使用nvm安裝Node.js
安裝完了nvm,接著安裝主角node。先用$ nvm ls-remote指令看一下有哪些版本可以安裝:
$ nvm ls-remote
v0.10.20
v0.10.21
v0.10.22
v0.10.23
v0.10.24
v0.11.0
v0.11.1
v0.11.2
v0.11.3
v0.11.4
v0.11.5
v0.11.6
v0.11.7
v0.11.8
v0.11.9
v0.11.10
直接用$ nvm install 指令安裝官網上建議的版本:
$ nvm install v0.10.24
######################################################################## 100.0%
Now using node v0.10.24
也同時安裝最新版來測試nvm的版本管理功能:
$ nvm install v0.11.10
######################################################################## 100.0%
Now using node v0.11.10
使用nvm無痛切換Node.js版本
在介紹使用nvm切換版本前,先簡單說明nvm的工作原理。
nvm會把各個版本的node安裝在/usr/local/opt/nvm底下。我們可以看看該目錄底下放了哪些東西:
$ ls /usr/local/opt/nvm
INSTALL_RECEIPT.json LICENSE.md alias bin nvm.sh v0.10.24 v0.11.10
我們可以發現透過nvm安裝這兩個版本,事實上會在nvm目錄下另外建立了v0.10.24以及v0.11.10兩個目錄來分別存放node的binary檔。又nvm會在你的$PATH最前面安插指定版本的目錄,透過這個方式你在使用node指令時就會用指定的版本來運作了。
實際確認PATH的值看看:
$ echo $PATH
/usr/local/opt/nvm/v0.11.10/bin: ...
nvm的用法非常的簡單。我們可以另外用$ nvm ls指令確認nvm目前可以管理的版本有哪些:
$ nvm ls
v0.10.24
v0.11.10
current: v0.11.10
由於透過nvm安裝node,會自動把最後安裝的版本設為目前使用中的版本,因此上述指令會看到current: v0.11.10,表示我們目前正在使用v0.11.10
我們可以用$ nvm use 切換版本:
$ nvm use v0.10.24
Now using node v0.10.24
也可以偷懶一點,不用打完整的版號:
$ nvm use 0.10
Now using node v0.10.24
切換成別的版本看看:
$ nvm use 0.11
Now using node v0.11.10
夠簡單吧!
不過問題來了,如果你另外開一個shell視窗,並輸入nvm,會發現current version是空的:
$ nvm ls
v0.10.24
v0.11.10
current:
這是因為利用nvm use指令只會在當前的shell生效,當你開了新的shell就會發現
PATH的值已經不包含剛才設定的node目錄了。要解決這個問題就是利用
nvm alias default 來設定一個預設的node版本:
$ nvm alias default 0.10
default -> 0.10 (-> v0.10.24)
此時再打開另一個shell視窗,就可以直接使用你所設定的node版本了。
實際跑跑看Node.js
我們直接拿官網的例子來試試看
先產生一個example.js的檔案:
$ touch example.js
內容如下
http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
執行看看
$ node example.js
Server running at http://127.0.0.1:1337/
打開瀏覽器,輸入http://127.0.0.1:1337,如果看到 “Hello Word” 就代表成功了
後記
(4)建议安装watchman,终端命令:brew install watchman
(5)安装flow:brew install flow
(6)安装命令行工具 sudo npm install -g react-native-cli (如果连不上则切换国内镜像 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org再运行 sudo cnpm install -g react-native-cli)
三、Hello, React-Native
现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:
打开终端,开始React-Native开发的旅程吧。
(1)创建一个空项目:终端输入:react-native init HelloWorld
(2)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
(3)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。
[React-Native]入门(Hello World)的更多相关文章
- React Native入门教程 3 -- Flex布局
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...
- React Native入门教程2 -- 基本组件使用及样式
在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- React Native入门-刘望舒
React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...
- React Native入门——布局实践:开发京东client首页(一)
有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...
- react native 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...
- React Native 入门到原理(详解)
抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...
- React Native入门指南
转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...
- 《React Native入门与实战》读书笔记(1)
ReactNative介绍 它的底层引擎是JavaScript Core,调用的是原生组件而非HTML5组件(HTML+CSS+JavaScript构建的组件).运行时,可以做到与Native App ...
随机推荐
- 10个网页设计师必备的CSS技巧(转)
英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...
- Linq系列(5)——表达式树之案例应用
在进入今天的正题之前,先感慨下本人的blog的人气一篇不如一篇.再加上换公司后人身自由受到了比之前大得多得多的限制,实在令本人有些郁闷.不过每次提笔写些东西跟大家分享,总是能让我感到愉悦和欣慰,希望我 ...
- Objective-C 成员变量
成员变量的访问权限 Objective-C中的成员变量有以下三种属性 public(外部及其子类可访问) protected(子类可访问,外部不可访问) private(外部及其子类不可访问) 默认情 ...
- iOS开发之 -- bundle程序束的制造
我们在写项目的时候,需要添加大量的图片,这个时候除了在x-code-->Assets文件里面添加图片外,还可以添加程序束,这样的话 项目看起来比较整齐,也显得比较专业,下面就来说一下程序束的制造 ...
- iOS开发之--一些有用的博文和博客
应用内购的详细教程: http://mp.weixin.qq.com/s?__biz=MzA3NzM0NzkxMQ==&mid=2655357883&idx=2&sn=7cda ...
- 第二十五篇:使用 sigaction 函数实现可靠信号
前言 在前文中,讲述了一个可靠信号的示例.它分成几个步骤组成( 请参考前文 ).在 Linux 系统编程中,有个方法可以将这些步骤给集成起来,让我们使用起来更加的方便. 那就是调用 sigaction ...
- instance method '*****' not found (return type defaults to 'id')
博文转载至 http://blog.csdn.net/cerastes/article/details/38025801 return type defaultsnot foundiOSwarning ...
- 二 Android Studio 打包EgretApp (开机画面、横竖屏、调试、和原生交互)
测试环境: Windows7 Egret Engine 5.0.14 Egret support 5.0.12 Android Studio 2.3 目录: 一 修改开机画面 二 横竖屏设置 三 修改 ...
- MapRecude
任务:分析通话记录,查处每个手机号码有哪些打过来的号码 13510921776 10086 13710148751 10086 13914248991 10086 13510921776 137101 ...
- Code Forces Bear and Forgotten Tree 3 639B
B. Bear and Forgotten Tree 3 time limit per test2 seconds memory limit per test256 megabytes inputst ...