We'll download the requirements for getting started with React Native, refactor our app to ES6, walk through debugging, and talk about the philosophy behind React and React Native.

Install:

brew install --HEAD watchman
brew install flow npm install -g react-native-cli

Create a project:

react-native init githubnotepicker

Run the project:

cd githubnotepicker
react-native run-ios

The simulator will pop up.

Enable the hot reload:

cmd + D -->  enable hot reload

After that, once you change the code, the app will reload automatically.

Debugger:

class githubnotetaker extends Component {
render() {
name="zhentian";
debugger;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}

We add a 'debugger' there. "cmd + D" --> Enable remote JS debugging.

Then refresh the page, you will see a page pop up, then open the debug tool. Then you can debug as you do on the web.

[React Native] Up and Running的更多相关文章

  1. React native采坑路 Running 1 of 1 custom shell scripts

    1. Running 1 of 1 custom shell scripts 卡住的问题. 分析: 四个文件没有下载完成. boost_1_63_0.tar.gz folly-2016.09.26.0 ...

  2. 【React Native开发】React Native应用设备执行(Running)以及调试(Debugging)(3)

    ),React Native技术交流4群(458982758),请不要反复加群.欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  3. React Native 红屏之Could not connect to development server.

    React Native 是目前最火的开发框架,其他不说了,上Bug. 按照  React Native iOS环境搭建 高级版 在mac上  搭建 React Native  环境,运行 项目 若出 ...

  4. React Native开发之npm start加速

    在Windows下好不容易安装好React Native环境之后,运行npm start,结果就是无限被等待,快的话160秒(将近3分钟啊....) 而Mac下因为有watchman所以是飞一样的速度 ...

  5. React Native的环境搭建以及开发的IDE

    (一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...

  6. React Native官方DEMO

    官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法. 运行官方DEMO步骤如下 安装react native环境 React Native项目源 ...

  7. 深入浅出 React Native:使用 JavaScript 构建原生应用

    深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...

  8. 【转】【React Native开发】

    [React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组 ...

  9. React Native:使用 JavaScript 构建原生应用 详细剖析

    数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 Pho ...

随机推荐

  1. *[codility]Number-of-disc-intersections

    http://codility.com/demo/take-sample-test/beta2010/ 这题以前做的时候是先排序再二分,现在觉得没有必要.首先圆可以看成线段,把线段的进入作为一个事件, ...

  2. 基于FFmpeg和Qt的播放器 QtAV库

    http://blog.csdn.net/ibingow/article/details/8144795

  3. Android USB Host与HID通讯 (二)

    不好意思,从上一篇到现在确实比较忙,中间又外出了一段时间,虽然也上LOFTER,或者看到一些朋友QQ上加我,给我发信息询问,有些看到了有些可能没看到,偶尔回复了一两个,也不咋的详细,在此我想说,一方面 ...

  4. 浅析Android的窗口

    一.窗口的概念 在开发过程中,我们经常会遇到,各种跟窗口相关的类,或者方法.但是,在 Android 的框架设计中,到底什么是窗口?窗口跟 Android Framework 中的 Window 类又 ...

  5. How to: Define a Windows Communication Foundation Service Contract

    This is the first of six tasks required to create a basic Windows Communication Foundation (WCF) app ...

  6. 保持与 Microsoft Azure Files 的连接

    我们在最近的博客文章中介绍了 Azure StorageFiles的预览版,请单击此处.该文章包含 Azure Files 的相关信息,说明了如何申请预览版并开始使用,还介绍了一些有助于创建共享和传 ...

  7. 卸载安装失败的sqlserver2008 R2

    安装sqlserver2008失败,无法正常卸载. 从  计算机  控制面板 卸载时有如图弹窗 并且在  控制面板  中找不到如图的各种插件. 百般无奈之后,发现下载安装windows install ...

  8. 自动化测试实施的几个idea

    UI检查.测试的一个idea 在电子商务网站中, 为达到较好的用户体验, 可能页面上会有大量的UI设计,一堆css.ajax效果等,敏捷开发中, UI变动更是带来了测试的苦恼.对于回归组catch U ...

  9. Nginx反向代理+DNS轮询+IIS7.5 千万PV 百万IP 双线 网站架构案例

    原文地址:http://www.jb51.net/article/31844.htm Nginx  ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 ...

  10. JS 变量提升

    var a = 1; function foo() { console.log(a); var a = 2; } foo(); //undefined 根据变量提升机制,最后得出undefined; ...