React入门介绍-ReactDOM.render()等基础

首先，React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架，它仅涵盖V-view视图层。JSX是javascript的扩展，像Typescript,coffeeScript等一样，都是Javascript的语法糖，最终都要变编译成JS执行，建议使用JSX的代码进行React的开发。因为Javascript代码与JSX代码并不兼容，凡是使用JSX的地方我们都需要加上 type="text/babel"。

在使用React之前，我们必须要先引入三个库——react.js/react-dom.js/browser.min.js

<html>

  <head>

    <script src="../../react.js"></script>

    <script src="../../react-dom.js"></script>

    <script src="../../browser.min.js"></script>

  </head>

  <body>

  </body>

</html>

JSX比较特殊的是允许Javascript和HTML的混写，看一个简单的例子：

   <div id="container"></div>

    <script type="text/babel">

    let value = "demo1";

    let buttonName = "submit";

      ReactDOM.render(

        <div>

          <input type="text" value={value}/> //注意单标签一定要闭合“/”,否则会报错

          <button>{buttonName}</button>//在{}中插入变量

        </div>,

        document.getElementById("container")

      )

    </script>

ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性，不能直接定义class而要用className，因为class是javascript中的保留字。例如给input添加className并更改样式：

    <input type="text" className="userName" value={value}/> 

    .userName{background: yellow}//在CSS样式中定义

同样可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示，如:backgroundColor而不是background-color;fongSize而不是font-size,

<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>

另外可以直接将样式赋值给一个变量，把变量赋值给style属性，如下：

    <div id="container"></div>

    <script type="text/babel">

    let value = "demo1";

    let buttonName = "submit";

    let inputStyle = {

      "backgroundColor":"yellow",

      "color":"red"

    };

      ReactDOM.render(

        <div>

          <input type="text" style={inputStyle} value={value}/>

          <button>{buttonName}</button>

        </div>,

        document.getElementById("container")

      )

    </script>

React入门介绍（1）-ReactDOM.render()等基础的更多相关文章

  1. React入门介绍（2）- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  2. React源码 ReactDOM.render

    在 react 当中,主要创建更新的有三种方式 1.ReactDOM.render || hydrate  这两个api都是要把这个应用第一次渲染到我们页面上面,展现出来整个应用的样子的过程,这就是初 ...

  3. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  4. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  5. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

  6. React入门实例教程

    文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  7. React 入门实例教程（转载）

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. 【转】react入门实例教程

    作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html    github地址https:/ ...

  9. React 入门实例教程【转】

    Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...

随机推荐

  1. HTML标签防XSS攻击过滤模块--待优化

    HTML标签防XSS攻击过滤模块 http://cnodejs.org/topic/5058962f8ea56b5e7806b2a3

  2. 11_传智播客iOS视频教程_NS前缀和@符号

    NS前缀的有NSLog和NSString Cocoa就是用来开发带界面的应用程序. Foundation框架之中的类.函数绝大多数都是从NextStep来的.看到NS前缀就知道这个类是从哪里来的.是很 ...

  3. UVa 1363 Joseph's Problem (数论)

    题意:给定 n,k,求 while(i <=n) k % i的和. 析:很明显是一个数论题,写几个样例你会发现规律,假设 p = k / i.那么k  mod i = k - p*i,如果 k ...

  4. UVa 11401 Triangle Counting (计数DP)

    题意:给定一个数 n,从1-n这些数中任意挑出3个数,能组成三角形的数目. 析:dp[i] 表示从1-i 个中任意挑出3个数,能组成三角形的数目. 代码如下: #pragma comment(link ...

  5. bzoj 2111: [ZJOI2010]Perm 排列计数【树形dp+lucas】

    是我想复杂了 首先发现大于关系构成了一棵二叉树的结构,于是树形dp 设f[i]为i点的方案数,si[i]为i点的子树大小,递推式是\( f[i]=f[i*2]*f[i*2+1]*C_{si[i]-1} ...

  6. 11.3NOIP模拟赛

    /* 考虑贪心 把原序列排序后,对于原中位数往后所有比要更改到的值小的都改成它 正确性显然. */ #include<iostream> #include<cstdio> #i ...

  7. bzoj1483: [HNOI2009]梦幻布丁(vector+启发式合并)

    1483: [HNOI2009]梦幻布丁 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 4022  Solved: 1640[Submit][Statu ...

  8. 【插件开发】—— 12 GEF入门

    介绍 前面也简单的介绍了一下插件开发的相关知识,下面主要就介绍一下GEF的相关使用.由于最近使用到编辑器这部分的操作,因此就跳过其他的内容,先介绍下GEF的相关知识. 前文回顾 1 插件学习篇 2 简 ...

  9. 文件cp功能

    #include<stdio.h> #include<unistd.h> #include<fcntl.h> #include<string.h> in ...

  10. c语言程序设计案例教程（第2版）笔记（一）—零散、输入输出、最小公倍数、选择排序、冒泡排序

    零散知识点: 非格式化输入输出:getchar().putchar() 格式化输入输出   :scanf().printf() 字符串输入输出   :gets() 或 scanf().puts() 或 ...