React

1. 安装 react 要使用 react，就必须装下面两个包的。 `$ npm &lt;span class="hljs-keyword">install&lt;/span> &lt;span class="hljs-comment">--save react react-dom&lt;/span> ` 2. 建立 babel 可能你不懂 babel 是什么，你可以把它理解为编译器，它能把 react 代码转成一般浏览器可读可执行的代码，通常可以用它来转化 react 或 vue 这样的前端代码，或者把 es6 代码转成普通的 javascript 代码等等。 如果还不理解的话，可以看我这篇文章 babel 入门指南。 要让 babel 很好的转化 react 代码，首先要安装好 babel，再装 babel 转化 react 的包。 运行下面的命令。 `$ npm &lt;span class="hljs-keyword">install&lt;/span> &lt;span class="hljs-comment">--save-dev babel-core babel-preset-react babel-preset-env&lt;/span> ` 创建 .babelrc 文件。 { <span class="hljs-attr">"presets"</span>: [<span class="hljs-string">"env"</span>, <span class="hljs-string">"react"</span>] } 为什么我知道要这么做呢？ 因为我是分别结合 babel 和 react 的官网给的最新官方指南。 ...

背景 React Native出来已经一段时间了，相对来说也算稳定了，在很多的企业中都实际使用他们，混合开发已经是未来的一种趋势，混合开发中使用的技术很多，不外乎Html5、JS框架通过一定的技术和原始交互，目前主流混合开发React Native、Cordova、APICloud、MUI、AppCan、Sencha Touch、jQuery Mobile等等（其他的小伙伴们自己收集），目前网上写教程的人很多，但是React Native更新速度很快，根据他们的教程，中间会遇到各种问题，今天我和大家一起踩踩各种坑，让小伙伴们快速集成到自己的APP中。后续持续更新，反馈发邮件411437734@qq.com共同探讨。 集成步骤 参考官方文档->react native 文档 本文使用开发环境 Android studio 注意最新的React Native支持的最新的SDK为16（android4.1） npm环境，小伙伴们自己安装 nodeJS自己安装，可以参考官方文档安装环境，有问题可以发411437734@qq.com沟通 创建Android项目（已有项目跳过） 打开Android studio 输入项目名称，选择项目目录，点击next 至此项目创建完成（需要注意的是最新的React Native支持最新SDK版本为16 android4.1） React Native集成到上面我们创建的ReactNativeAPPDemo中 参考Facebook react native文档 进入项目根目录，添加JS到项目中-点击Android studio中的Terminal（如下图）  分别执行一下语句 npm init npm install –save react react-native curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig init 主要根据提醒生成package.json文件 curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 下载.flowconfig文件 参考图片 查看项目中有node_modules，说明react和react native 安装完成 在项目根目录添加.flowconfig 参考下图  也可以手动创建在浏览器打开https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig网址复制内容创建文件 ReactNativeAppDemo配置相关内容 添加"start": “node node_modules/react-native/local-cli/cli.js start” 到package.json 文件下 scripts标签 修改前修改后 添加index.android.js文件到项目中 ...

学习网站 http://wiki.jikexueyuan.com/project/react-native/ http://wiki.jikexueyuan.com/project/react-native-lesson/ 环境搭建 安装HomeBrew（brew -v查看brew） 安装NodeJS （brew install NVM,nvm install node && nvm alias default node） 安装 watchman 和 flow(这两个包分别是监控文件变化和类型检查的)brew install watchman brew install flow 通过 npm安装react-native( npm install -g react-native-cli) init卡解决方案  注意：App开发环境的设置 iOS XCode 6.3 及其以上即可。 Android 这个比较麻烦。 设置环境变量：ANDROID_HOME export ANDROID_HOME=/usr/local/opt/android-sdk SDK Manager 安装以下包： Android SDK Build-tools version 23.0.1 Android 6.0 (API 23) Android Support Repository 使用步骤 react-native init 项目名称—-创建项目 进入项目根目录，项目目录（如下）：  react-native run-android 运行android项目/run-ios 运行IOS项目 项目中index.android.js和index.ios.js是我们的界面，以后的开发中都是对这些文件编写。例如：product.android.js/product.ios.js 由于android和ios的控件不同，需要根据不同情况添加控件。 ...

我一般都喜欢去一些技术类博客社区或者 UGC 社区浏览文章，相信与我同类的你应该也有这爱好。为了方便自己的阅读，而不用一个一个打开目标网站的地址，就基于 Node+React 写了一个小爬虫: Tech-Read，用于抓取常去的 UGC 社区的文章摘要。目前的版本大概样子如下： 在线地址：Tech-Read github 地址：tech-read 开发 Tech-Read 是个人的一个业余项目，初衷是方便自己阅读，实在是懒于去社区网站阅读，其次用于练手喽，毕竟最近在学点新东西。 在工作上，接触的技术栈是 Node + React，所以 TR 也采用了 Node + React 的技术栈。React 用于前端界面渲染，Node 用于抓取网页，并将解析后的 DOM 数据返回给前端调用。 前端的请求是用 fetch 发起的，由于部分社区做了跨域设置，So 用 Node 能帮我解决一些跨域的问题： 以及在 fetch 中解析 DOM 时碰到的诸如 Uncaught (in promise) TypeError: unexpected token <... 等杂七杂八的错误。 并且 Node 端提供了直接操作 DOM 节点的 cheerio，它是 jQuery 的一个子集实现，能非常方便的操作 DOM 元素。所以，目前我把 DOM 解析放在了 Node 端，前端只负责渲染。 所以，现在的处理流程如下： 由于目前业务比较简单，前端的状态管理就用 Flux。Node 使用 Koa，匹配到 fetch发起的路由后，通过 request向目标网站发起请求，然后通过 cheerio 解析 body，获取 DOM 元素数据，以 json 形式返回给前端进行展示。 ...