Reactnative 随笔一

---恢复内容开始---

1、ReactDOM.render()    React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点

将h标签插入example节点

2、HTML语言直接写在JavaScript语言之中,不加任何引号,就是JSX的语法。

3、创建组件。

React.createClass({})  -----接收一个对象  属性render 返回定义的组件

渲染: ReactDOM.render(组件,将组件放到哪里(位置),渲染完成后的一个callback)

完整代码:

var HelloMessage=React.createClass({

alertMe:function(){

alert("You click me!!!");

},

render:function(){

return (<h1 onClick ={this.alertMe}>HELLO WORLD!</h1>)

}

});

ReactDOM.render(<HelloMessage/>,document.getElementById("app"),function(){

console.log("渲染完成啦!")

})

注意:组件名称声明时首字母一定大写,如果不是渲染不出

如果在控制台是报这样的错误:Failed to locate workspace file mapped to URL file:///D:/%E4%B8%AA%E4%BA%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Desktop/ReactDemoSelf/demo1/embedded from source map file:///D:/%E4%B8%AA%E4%BA%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Desktop/ReactDemoSelf/demo1/index2.html

原因在于你的父文件夹有汉字的缘故,用英文就不报这样的错误。

---恢复内容结束---

时间: 2024-10-27 12:38:08

Reactnative 随笔一的相关文章

react-native http请求之后navigator导航跳转

琢磨react-native有一段时间了.对于我来说,它的确是前端开发工作者的福音,因为我可以利用它来写app的代码,而且基本可以一套代码,多个平台使用. 早就想写一篇随笔记录一下react native的学习历程了,可是最近在navigator(导航,可以理解为‘页面’跳转)这里遇到了一个比较棘手的问题,所以耽搁了两天,中途甚至产生过放弃的念头,还一度去看了ionic以及QT的demo,思前想后,经过对比,发现还是react-native比较自己.刚好今天也将困扰已久额问题解决了,心情大好啊.

NET开发者部署React-Native

NET开发者部署React-Native 前情摘要 众所周知,有人说.net可以用Xamrian,呵呵,不习惯收费的好么?搞.Net的人设置一次java的环境变量,可能都觉得实在太麻烦了,可能是因为这些年微软确实把我们给带坏了,所有东西一键安装,简单设置,打开项目直接运行就行了,而要想成功部署android开发环境,那可能需要自己填N个坑,最近FB出的React-Native比较火,哥们在不忍转学java的情况下,,虽然java不是anroid,但兄弟我还是决定用React-Native来实现自

windows搭建安装react-native环境

在win10环境下,利用Genymotion模拟器,配置react-native的环境. 一.安装JDK 在网上下载jdk,版本最好是1.8以上.安装后要对环境变量进行配置. 同时在 Path 中配置jdk的环境变量: 说明: 安装完后可以通过 java –version 来查看当前安装的jdk的版本. 二.安装SDK 这个我是在360上下载的 Android Studio 版本的: 下载完后安装. 然后设置环境变量 ANDROID_HOME .为我们刚刚安装的sdk路径: 三.设置SDK 在我

Android 原生开发、H5、React-Native使用利弊和场景技术分享

http://m.blog.csdn.net/article/details?id=51778086 发表于2016/6/28 18:52:46  1176人阅读 最近工作中接触到React-Native框架,对其进行一些技术分析,结合之前了解的H5的一部分,加上自己做了很久的原生开发(十几个android app.sdk,包括2个ios), 总结下目前了解到的这三种移动端应用开发方式的特点和试用范围,作为个人知识的记录,也作作为公司内部互相学习的分享. 一.原生开发   原生开发是系统自带的a

React-Native做一个文本输入框组件

我又回来啦! 由于最近一直在做公司的项目,而且比较急.如今项目已经迭代到第三期,可以缓一缓了... 今天在公司里听前端的说,这个项目本来是用React-Native做的(去年10月份),但是做到一半发现坑太多,就中途放弃了,于是让我们android和iOS重新开发... 作为非常喜欢这个技术的我来说,表示相当的不服. 于是我打算利用闲暇时间做一个一模一样的出来,反正接口我都有(嘻嘻) 说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了. 好了,废话不多

C#博客随笔之六:数据绑定

这一篇随笔记录的是在完成程序中遇到的一些情况 首先要讲的是MVVM 所谓MVVM就是Model,View,ViewModel 下面是MVVM的优点(引用自百度百科): MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点1. 低耦合.视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变.2. 可重用性.你可以把一些视图

react-native开发经验

# **RN开发经验** ## 一.环境配置关于环境配置,前辈已有完整的总结:http://tvrn.devops.letv.com/docs/Environment.html **IDE准备:** [AndroidStudio](https://developer.android.com/studio/index.html),[VisualStudioCode](https://code.visualstudio.com/) 如何打造现代化RN开发环境:http://tvrn.devops.l

react-native 获取组件的宽度和高度

react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对于父组件的位置坐标.如果我们需要随时都可以去获取组件的尺寸或者相对于屏幕的位置坐标时,这种方式并不适合. 那么这里我们就来看下第二种方式,使用react-native中的findNodeHandle和UIManager来获取组件的尺寸: import { findNodeHandle, UIMana

Abby&#39;s 学习php5随笔

2017.6.27 Abby's cakephp2 学习之旅 下载了XAMPP集成开发环境,然后配置其数据库,参考学习教程, 1.建立表单. 配置完信息如下,Cache Apache默认在windows下是system用户,所以权限最高,但xampp集成环境中的apache确是administor 如何更改apache用户为system 静默开发.(一种开发方法,番茄ToDo中的学霸模式有些相似) 如何设置.ctp的显示 http://cakephp2.local/posts/index怎么就可