• React学习笔记----如何在html页面中使用react 一、ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己一套,用来架设 Instagram 的网站。做...

    React学习笔记----如何在html页面中使用react

    一、ReactJS简介

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

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

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

    二、对ReactJS的认识及ReactJS的优点

    首先,对于React,有一些认识误区,这里先总结一下:

    • React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

    • React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

    • 有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

    • React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

    三、构建一个最简单的react页面

    为了快速的说明效果,我们先使用其他人的服务器(cdn服务器)进行创建一个页面,如下面代码所示:

    <!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title>React Tutorial</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
    <div id="content"></div>
    <script type="text/babel">
        var MessageBox = React.createClass({
            alertMe: function(){
                alert('你刚才点了我一下。。。。');
            },
            render:function(){
                return ( <h1 onClick={this.alertMe}>你好世界!!!</h1> )
            }
        });
    
        React.render( <MessageBox/>,
            document.getElementById('app'),
            function(){
                console.log('渲染完成啦!!');
            }
        )
    </script>
    <div id="app"></div>
    
    </body>
    </html>
    我们通过下面三段代码进行了对react的引用

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    也就是说,这样我们就可以直接使用了,效果如下面所示:


    上面就是使用了远端服务器提供的js库,那么如何使用我们自己下载到本地的JS库,下面就进行介绍:

    需要进行的工作有下面步骤:

       1、安装nodejs,对于nodejs的安装,请参考如下链接:nodejs的安装

       2、全局安装bower:npm install -g bower

       3、使用bower安装react:bower install react,安装过程如下图所示:



      4、使用bower安装能够将JSX 语法转为 JavaScript 语法的工具babel:bower install   babel



      5、然后开始进行页面的编写:如下所示:

    <html>
    <head>
        <meta charset="utf-8">
        <title>学习React!!</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bower_components/react/react.js"></script>
        <script src="bower_components/react/react-dom.js"></script>
      <!--  注意下面注释掉的的方式是旧版本所使用的编译转换方式,没有注释的是现在使用的-->
        <script src="bower_components/babel/browser.js"></script>
        <!--<script src="bower_components/react/JSXTransformer.js"></script>-->
        <!--<script type="text/jsx">-->
    	<script type="text/babel">
    /*		var MessageBox = React.createClass({
    			alertMe: function(){
    				alert('你刚才点了我一下。。。。');
    			},
    			render:function(){
    				return ( <h1 onClick={this.alertMe}>你好世界!!!</h1> )
    			}
    		});
    		React.render( <MessageBox/>,document.getElementById('app'),	function(){
    				console.log('渲染完成啦!!');
    			}
    		)*/
          class MessageBox extends React.Component {
              alertMe() {
                  alert('你刚才点了我一下。。。。');
              }
              render() {
                  return ( <h1 onClick={this.alertMe}>你好世界!!!</h1> )
              }
          }
          ReactDOM.render( <MessageBox/>,document.getElementById('app'),	function(){
                console.log('渲染完成啦!!');
                  });
    	</script>
    </body>
    </html>
    其点击后的效果如下图所示:



    以上就是在页面中使用react的方法


    展开全文
  • 当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法——就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简单、粗暴,但是也有很大的局限性。...
  • House https://github.com/DangrMiao/House 这是去年年底用react native的一个html5项目,由于时间关系,完成的比较粗糙,请多多指教,大神勿喷^_^
  • react写到独立的.js文件中,在html中调无效,页面没有反应 **index.html** <!DOCTYPE html> <html> <title>Hello React! <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"> ...
  • ReactHtml页面中使用React 2019-04-27 00:33:17
    1). React地址 ReactJS官网地址Github地址 2). 搭建环境 安装Node.js官网 全局安装bower npm install -g bower 图1.png bower安装react bower install react 图2.png bowe...
  • 本次的博客完整的代码不会贴出,主要是讲代码过程中的问题和解决方法废话:同理为了代码更快速,我使用了webpack进行管理,这里的webpack是使用了我上一篇博客自己的,同时加上加载所需要的loader就可以使用了...
  • 在做react项目时,有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面,如果直接插入的话页面显示的就是这段字符串,而不会进行转义,可以以下方法插入,便可以html的形式展现: &lt;div ...
  • 转载请注明出处:王亟亟的大牛之路继续本周的大方向,继续学习React,昨天把简单的hi all内容呈现出来后,今天研究如何多页面或者实现页面嵌套, 开始今天的内容前老规矩,先安利:...
  • react中渲染html代码 2019-06-04 14:53:33
    有时候需要动态渲染后台传过来的html代码文本,但是react的JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染,而不是html代码 例子: &lt;div dangerouslySetInnerHTML={{__html: code}}&gt;&...
  • 自动补全的方法: 文件 — 首选项 ----设置---- ... 到json文件中添加,不要忘了上面的那条后面要加 , (英文的逗号) "emmet.includeLanguages"...javascriptreact" } 就可以在页面中自在的htm...
  • React 显示html 代码 2019-07-11 13:46:38
    <p style={{height:'375px',overflowY:'auto'}} dangerouslySetInnerHTML={{__html:this.state.resultText}} ></p> dangerouslySetInnerHTML 属性显示 html代码
  • 在vue中,我们常常在标签上使用v-html来,将现成的html代码嵌入到被绑定的标签中,react如何操作呢? 类似于vue,react也有特殊的标签属性,用来代替v-html dangerouslySetInnerHTML属性,该属性被赋值,只接受对象...
  • react通过dangerouslySetInnerHTML加载htmlhtml的js方法无效
  • react+antd使用react-html-table-to-excel实现导出功能 npm下载依赖包 基于reactreact-dom npm install --save react-html-table-to-excel 使用 import React, {PureComponent} from 'react'; import ReactDOM ...
  • 本次开发,主要是node做项目的依赖管理,同时使用webpack进行打包。请确保运行项目前已安装这两样利器。项目结构深坑整个项目过程还算流畅,唯独在处理全屏状态下监听esc和f11按键的时候多花了点时间
  • React Native中解析HTML 2019-01-29 23:26:06
    使用这个react-native-htmlview可以解析HTML字符串。实现效果和vue中的v-html指令或jQuery中$(Selector).html()相同 示例: import React from 'react' import {Text,View} from 'react-native' import HTMLView ...
  • react加载 外部html 2019-11-11 15:50:59
    html加载器添加到您的项目中: npm i -D html-loader 将以下规则添加到webpack.config文件中: { test: /.(html)$/, use: { loader: ‘html-loader’, options: { ...import React, { Component ...
  • react里面for 改成 htmlFor 2018-08-06 10:28:02
    react的标签里面for 改成 htmlFor
  • 摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?...
1 2 3 4 5 ... 20
收藏数 98,407
精华内容 39,362