React.js入门笔记 创建hello world 的5种方式

一、ReactJS简介

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

ReactJS官网地址:http://facebook.github.io/react/

Github地址:https://github.com/facebook/react

ReactJS中文地址:http://reactjs.cn/react/docs/getting-started.html

二、ReactJS特点

1,虚拟DOM

    通过DOM diff算法,只会更新有差异化的部分,不用渲染整个页面,从而提高效率

2,组件化

把页面分成若干个组件,组件中包含逻辑结构和样式

组件只包含自身逻辑,更新组件的时候可以预测,利于维护

页面拆分多个组件,可以做到重用

3,单向数据流

数据是从顶层组件传递到子组件中

数据可控

  三、入门React 编写  Hello,world  首先了解下什么是JSX

    React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM,虚拟DOM也可以通过JavaScript来创建,例如:

var child1 = React.createElement(‘li‘, null, ‘First Text Content‘);
var child2 = React.createElement(‘li‘, null, ‘Second Text Content‘);
var root2 = React.createElement(‘ul‘, { className: ‘my-list‘ }, child1, child2);

 React.render(
     <div>{root2}</div>,
   document.getElementById(‘container5‘)
 );

使用这样的机制,我们完全可以用JavaScript构建完整的界面DOM树,正如我们可以用JavaScript创建真实DOM。但这样的代码可读性并不好,于是React发明了JSX,利用我们熟悉的HTML语法来创建虚拟DOM:

var root =(
  <ul className="my-list">
    <li>First Text Content</li>
    <li>Second Text Content</li>
  </ul>
);

 React.render(
     <div>{root}</div>,
   document.getElementById(‘container6‘)
 );

四、React   编写Hello,world  入门的5种方式

  第1种方式 

  <div id="example1"></div>

   <script type="text/jsx">
   React.render(   //直接html
    <h1 className="classN1" >1 hellow   直接 html  world  </h1>,
    document.getElementById(‘example1‘)
  );

  </script>

第2种方式 

<div id="example2"></div>

 <script type="text/jsx">
 React.render( //直接创建元素
  React.createElement(‘h1‘, {className:‘classN2‘}, ‘2 Hello, 直接创建元素  world!‘),
  document.getElementById(‘example2‘)
);
  </script>

第3种方式 

<div id="example3"></div>

<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
    // return    <h1>hellow  组件 创建 html  world  </h1>   //有无括号均可
     return  (<h1 className=‘classN3‘ >3 hellow  组件 创建 html  world  </h1>);
    }
});

 React.render( //组件方式创建元素
 <CreateEl/>,
 //或者双括号  <CreateEl></CreateEl>
  document.getElementById(‘example3‘)
);
  </script>

第4种方式 

<div id="example4"></div>
<script type="text/jsx">

var JsxCreateEl=React.createClass({  // 直接  jsx 方式 创建
render:function(){

    return (
        React.createElement(‘h1‘, {className: "classN4"},"4 Hello, 直接  jsx 方式 创建  world!   ")
          )

    }
});

 React.render( //组件方式创建元素
  React.createElement(JsxCreateEl, null),
  document.getElementById(‘example4‘)
);

  </script>

第5种方式 

<div id="example5"></div> 

 <script type="text/jsx">

var Hello=React.createClass({  // 模板 Hello
render:function(){

    return (<span>{this.props.data}</span>)

    }
});

var World=React.createClass({  // 模板 world
render:function(){

    return (<span>  和 World 模板拼接</span>)

    }
});

 React.render( // 2个 模板  组件方式创建元素
  <h1 className="classN5" >
   <Hello data=‘5 hello‘ />
    <World  />
   </h1>,
    document.getElementById(‘example5‘)
);

  </script>
 

五、上结果图

附上代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />

</head>

<body>
<style>
*{ margin:0; padding:0;}
body{ background:#333;}
#box{ background:url(loveImg/QioA-fxehfqi8208393.jpg) no-repeat center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px auto;}
#example1,#example2,#example3,#example4,#example5{  margin:20px auto; width:100%; background:rgba(255,255,255,.3); padding:5px 10px; font-size:13px; color:#f1f1f1;-webkit-box-sizing:border-box;  }

 </style>

 <div id="box">

  <div id="example1"></div>

   <script type="text/jsx">
   React.render(   //直接html
    <h1 className="classN1" >1 hellow   直接 html  world  </h1>,
    document.getElementById(‘example1‘)
  );

  </script>

 <div id="example2"></div>
 <script type="text/jsx">
 React.render( //直接创建元素
  React.createElement(‘h1‘, {className:‘classN2‘}, ‘2 Hello, 直接创建元素  world!‘),
  document.getElementById(‘example2‘)
);
  </script>

<div id="example3"></div>

<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
    // return    <h1>hellow  组件 创建 html  world  </h1>   //有无括号均可
     return  (<h1 className=‘classN3‘ >3 hellow  组件 创建 html  world  </h1>);
    }
});

 React.render( //组件方式创建元素
 <CreateEl/>,
 //或者双括号  <CreateEl></CreateEl>
  document.getElementById(‘example3‘)
);
  </script>

  <div id="example4"></div>
<script type="text/jsx">

var JsxCreateEl=React.createClass({  // 直接  jsx 方式 创建
render:function(){

    return (
        React.createElement(‘h1‘, {className: "classN4"},"4 Hello, 直接  jsx 方式 创建  world!   ")
          )

    }
});

 React.render( //组件方式创建元素
  React.createElement(JsxCreateEl, null),
  document.getElementById(‘example4‘)
);

  </script>

 <div id="example5"></div> 

 <script type="text/jsx">

var Hello=React.createClass({  // 模板 Hello
render:function(){

    return (<span>{this.props.data}</span>)

    }
});

var World=React.createClass({  // 模板 world
render:function(){

    return (<span>  和 World 模板拼接</span>)

    }
});

 React.render( // 2个 模板  组件方式创建元素
  <h1 className="classN5" >
   <Hello data=‘5 hello‘ />
    <World  />
   </h1>,
    document.getElementById(‘example5‘)
);

  </script>

 </div>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>

</body>
</html>

时间: 2024-10-26 02:55:14

React.js入门笔记 创建hello world 的5种方式的相关文章

Node.js入门笔记

第一步自然是安装了,我是用Webstorm这个ide,安装分2步: 1.安装nodejs,下载Windows下的安装版本,注意是以msi为扩展名的,然后下一步,没啥好说的,下载地址如下: 32位的msi:http://nodejs.org/dist/latest/ 64位的msi:http://nodejs.org/dist/latest/ 2.安装WebStorm8.0.3,好像会自动找到nodejs的安装路径,不需要配置啥东东: 装好WebStorm,启动它,然后创建项目(New Proje

JS判断是否是IE浏览器的几种方式

1.得到浏览器的信息,返回由客户机发送服务器的 user-agent 头部的值. if(navigator.userAgent.indexOf("MSIE 8.0")>0){ IE }else{ 非IE } 注:MSIE 8.0---->IE8浏览器 MSIE 7.0---->IE7浏览器 .............. 2.字节判断 if("\v"=="v") // 这个判断真的只有在IE下才为真,包括IE 8. {IE} el

hibernate动态创建数据库表名几种方式

数据库中数据量很大, 但又不可以删除时同时又要优化程序检索数据时间. 答:方式有很多比如 创建数据库表分区,创建索引, 存储过程等; 我这里采用动态创建数据库表的方式. 完全可以在不创建表分区情况下实行分表管理 例如 日志记录表 将日期(yyyy-MM)作为默认表后缀动态追加, 例如 文章发布表 将用户名作为后缀名进行动态追加 ; 动态创建数据库表的方式要具体问题具体分析, 比如JDBC中直接使用create table 表名_dynamicStr(...); 文章发布系统 dynamicStr

iOS中创建单例的两种方式

刚刚开始做iOS开发的时候,不知道怎么创建单例,在网上搜的也大多数都不太全,所以总结了一下创建单例的两种方式 首先在.h文件中声明类方法 1 +(instancetype)sharedUtils; 然后在.m文件中实现它,实现的方法有两种 第一种,在创建一个对象时先判断在程序中有没有创建过这个对象 1 static PublicUtils *DefaultManager = nil; 2 3 +(instancetype)sharedUtils 4 { 5 if (!DefaultManager

iReport+jasperreport创建子表的几种方式(1)

在制作报表的过程中,子表是必不可少的,今天就研究了一下制作子表的几种方式 一.连接数据库创建子表 以MySQL为例: 1)iReport 创建父表 这个就是创建一个新的表格,不过记得数据源要选择mySQL ,其他的数据库数据源也一样的. 2)创建好之后,我们来创建子表,在组件面板找到拖动到父表当中的任意一个地方,我是放到detail里面的 它会产生一个向导 一路next下去,只是在最后一项选择use empty datasource,不过选其他的也行,待会我们还要修改 3)说一下原理:这种方式就

spring创建连接池的几种方式

spring使用连接池有很多种方式,jdbc(不使用连接池),c3p0,dbcp,jndi,下面将分别贴代码介绍这几种:  1.jdbc方式 使用的是DriverManagerDataSource,DriverManagerDataSource建立连接是只要有连接就新建一个connection,  根本没有连接池的作用 <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManag

JDBC 创建连接对象的三种方式

创建连接对象的三种方式 //第一种方式 Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb?user=root&password=root") ; //第二种方式 //读取properties文件 Properties pro = new Properties() ; InputStream in = JdbcDemo3.class.getClassLoader().ge

Java反射机制(创建Class对象的三种方式)

1:SUN提供的反射机制的类: java.lang.Class<T> java.lang.reflect.Constructor<T> java.lang.reflect.Field java.lang.reflect.Method java.lang.reflect.Modifier 2:什么是反射 JAVA反射机制是在运行状态中,对于任意一个类.都能都知道这个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称

spring中创建bean对象的三种方式以及作用范围

时间:2020/02/02 一.在spring的xml配置文件中创建bean对象的三种方式: 1.使用默认构造函数创建.在spring的配置文件中使用bean标签,配以id和class属性之后,且没有其他属性和标签时采用的就是默认构造函数创建bean对象,此时如果类中没有默认构造函数函数,则对象无法创建. <bean id="one" class="sdnu.machi.one"></bean> 如果one.class中没有默认构造函数则会报