在html页面使用react_react 跳转html页面无法加载react函数 - CSDN
  • 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即可,简单、粗暴,但是也有很大的局限性。...

            当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法——就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简单、粗暴,但是也有很大的局限性。下面一步步介绍如何构建这样一个基于React的页面,最后给出完整的html示例代码。

            1、首先我创建一个最基本的html文件,然后引入React的库文件,主要是react 和 react-dom,此外还要引入babel进行语法编译,不然浏览器是无法识别你的react。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>
        <body>
            <div id="app"></div>
            <script type="text/babel">
              //我们的react
            </script>
        </body>
    </html>

            2、这样,我们就可以开始写js内容了,我们在id为app的div后面添加script标签,按照react的语法可以写我们的内容啦,还要注意script标签要加type="text/babel",不然无法识别jsx语法哦!如下:

    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('root')
        );
    </script>

            以上就是React的最简单的方式。这篇文章的主体内容就结束了,文章有点短,那么再添点油加点醋吧!!

            这个结构太简单了,以至于我们新手不知道该如何写自己的内容,所以后面加了点内容让小白更明白React的使用。这里定义了一个MessageBox的组件,添加了个点击事件。render return的内容就是我们想自己想怎么改就怎么改的东东,ReactDom.render就把这个组件MessageBox渲染到id为app的div中啦。

    <script type="text/babel">        
        class MessageBox extends React.Component{  
            onClick = ()=>{  
                alert('clicked');  
            }
            render = ()=>{  
                return ( <div><h1 onClick={this.onClick}>Hello World!</h1></div> )  
            }  
        }
        ReactDOM.render( <MessageBox/>,  
            document.getElementById('app'),
        )        
    </script>

            要注意的是,这里使用了ES6的写法,为什么呢,因为React已经摒弃了ES5的写法,全力拥抱了ES6。比如:我们创建一个叫Message的组件:

        ES5: 

    var Message = React.createClass({
        render: return (<h1>hello</h1>)
    })

        ES6:

    class MessageBox extends React.Component{ 
        render = ()=> <h1>hello</h1>
    }

            这种ES5的写法未来可能会不受支持啦,多学学新东西有好处,什么箭头函数啊、let、const等等,这里render的return都可以省了。

            我们已经定义好了一个组件,而且ReactDom.render只能渲染一个组件,那么多个组件怎么用呢,我们需要把其他组件放到前面的那个组件中去。这里创建了一个组件TimeNow来显示时间,具体内容可以不用管,在MessageBox中的render中,把组件TimeNow放进去就OK。(<div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow /></div>)。

            注:

           1、render的return只能返回闭合的一个节点,如<div></div>,不能返回<div></div><div></div>这种结构。所以这里在原来的组件中加了一层包裹的div。

            2、我们将两个组件定义在了一个地方,但我们一般的操作流程会将不同组件放在不同的文件中,尤其是大的项目,这种最简模式就存在局限,React 文档上也有注明:Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP. 所以在最简模式上直接引入组件文件是行不通的,而是需要服务器环境。解决方法是开一个本地服务器(比如 Apache),这就有点麻烦了,不如使用create-react-app脚手架创建一个项目。

            本文全部代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">  
            class TimeNow extends React.Component{
                constructor(){
                    super();
                    this.state = {
                        time: ''
                    }                
                }
                componentDidMount = () =>{
                    setInterval(()=>{
                        var time = new Date().toLocaleString();
                        this.setState({
                            time
                        });                    
                    }, 1000);
                }           
                render = () => {
                    const {time} = this.state;
                    return <div>时间:{time}</div>
                }
            }
            class MessageBox extends React.Component{  
                onClick = ()=>{  
                    alert('clicked');  
                }
                render = ()=>{  
                    return ( <div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow /></div> )  
                }  
            }
            ReactDOM.render( <MessageBox/>,  
                document.getElementById('app'),
            )
        </script>
    </body>
    </html>
    展开全文
  • React地址 ReactJS官网地址 Github地址 2). 搭建环境 安装Node.js官网 全局安装bower npm install -g bower 图1.png bower安装react bower install react 图2.png bower安装能够将JSX 语法转为...
        
    1). React地址

    ReactJS官网地址
    Github地址

    2). 搭建环境
    npm install -g bower
    
    3110861-f6cb1ade0938651b.png
    图1.png
    • bower安装react
    bower install react
    
    3110861-e1c613e2ed97e8d5.png
    图2.png
    • bower安装能够将JSX 语法转为JavaScript 语法的工具babel
    bower install babel
    
    3110861-c91fcd92df90ba16.png
    图3.png
    3). 代码编写
    <!--suppress ALL -->
    <html>
    <head>
        <meta charset="utf-8">
        <title>学习React!!</title>
    </head>
    <body>
    <div id="app"></div>
    <script src="libs/bower_components/react/react.development.js"></script>
    <script src="libs/bower_components/react/react-dom.development.js"></script>
    <script src="libs/bower_components/babel/browser.js"></script>
    <script type="text/babel">
        // 创建是秃头
        class MessageBox extends React.Component {
            alertMe() {
                alert('你刚才点了我一下。。。。');
            }
    
            render() {
                return (<h2 onClick={this.alertMe}>你好世界!!!</h2>)
            }
        }
        // 渲染
        ReactDOM.render(<MessageBox/>, document.getElementById('app'), function () {
            console.log('渲染完成啦!!');
        });
    </script>
    </body>
    </html>
    
    4). 效果
    3110861-82d50231917cdb3a.gif
    效果图.gif
    展开全文
  • 现有项目上使用react简单介绍即添即用1.在html中添加DOM容器2.添加script标签3.创建react组件4.搞定了使用JSX1.简单地使用JSX2.项目中使用JSX3.运行JSX预处理器 简单介绍 react是希望被大众逐步接受为初衷所...

    下一节:创建React应用

    简单介绍

    (本文根据react官网翻译,并加入了部分个人想法,如有遗漏请联系作者)

    react是希望被大众逐步接受为初衷所设计的框架,因此你可以在项目中按照需求来使用react,即使知识添加一些零星的交互也是可行的。

    大部分的网站项目都不是一个单一页面的应用,你可以在项目中通过几行代码使用react来扩展你的项目或者制作一些可动态使用的组件。

    即添即用

    在本节中将会展示如何在一个已有html页面中使用react组件,你可以在你的web页面中或者新创建一个html文件来尝试。

    1.在html中添加DOM容器

    首先,打开你想要编辑的html页面,添加一个空<div>标签作为你想要以react来展示的标签,如下所示

    <body>
        <!--已有的HTML-->
        <div id="button_container"></div>
        <!--已有的HTML-->
    </body>
    

    此处使用id=“button_container”来标记该<div>以便之后再js代码中找到该<div>并在其中展示react组件。

    提示:你可以在<body>标签内的任何地方放置DOM容器。你也可以在一个页面中放置多个DOM容器,当然这些容器通常需要为空,因为react在渲染时会把容器内的内容全部替换掉。

    2.添加script标签

    接下来,添加以下三个script标签到<body>标签底部

    <!-- 前两个script用来加载react所需要的资源 -->
    <!-- 注意:当你需要部署项目时,需要将开发环境换成生产环境, 将 "development.js" 替换成 "production.min.js"即可 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <!-- 此标签用来加载编写好的react组件 -->
     <script src="button.js"></script>
    

    3.创建react组件

    创建一个名为button.js的文件在你的html文件目录下。
    复制以下代码

    'use strict';
    
    const e = React.createElement;
    
    class ReactButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { liked: false };
      }
    
      render() {
        if (this.state.liked) {
          return 'React Button';
        }
    
        return e(
          'button',
          { onClick: () => this.setState({ liked: true }) },
          '点我'
        );
      }
    }
    
    const domContainer = document.querySelector('#button_container');
    ReactDOM.render(e(ReactButton), domContainer);
    

    这两行代码的作用是找到我们在第一步中添加的DOM容器并在其中展示我们已经编写好的react组件ReactButton。

    const domContainer = document.querySelector('#button_container');
    ReactDOM.render(e(ReactButton), domContainer);
    

    提示:代码看不懂没有关系,我们将会在之后的章节讲解代码中各部分的概念,现在,只要把它展示在页面上就行了。

    4.搞定了

    你已经在你得项目中添加了第一个react组件了,运行你的项目看看吧。

    提示:部署须知
    处于开发环境下的js代码会严重降低页面运行速度,给用户带来不良的用户体验。
    因此在部署项目之前需要将之前添加的react资源文件替换成以下资源

    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    

    使用JSX

    1.简单地使用JSX

    在上面的例子中,我们使用的是JavaScript代码来通知react展示我们编写好的组件。

    const e = React.createElement;
    return e(
          'button',
          { onClick: () => this.setState({ liked: true }) },
          '点我'
        );
    

    当然,react提供了另外一种选择来代替JavaScript代码,那就是JSX,上例代码可以用JSX替换,如下

    return (
          <button onClick={() => this.setState({ liked: true })}>
            点我
          </button>
        );
    

    以上两例代码是等价的,你可以自由地选择使用JavaScript代码或者JSX来进行代码编写。

    如果使用JSX的话,需要引入babel.js讲JSX转换成浏览器可以识别的JavaScript代码才能正常编译。接下来讲述如何在现有网页中使用JSX。

    要在网页中使用JSX很简单,只需要引入如下资源文件即可

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    

    接下来你只要在包含有type="text/babel"的script标签中使用JSX就行了。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        
        <!-- Don't use this in production: -->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
    
          ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('root')
          );
    
    </script>
      </body>
    </html>
    

    之后只要在html中引入编写好的js文件即可

     <!-- 此标签用来加载编写好的react组件 -->
     <script src="button.js"></script>
    

    这是一个学习react和编写简单的demo的非常好的途径。但是请注意,使用babel会降低浏览器的编译速度,因此不推荐把包含有babel的网页作为产品发布部署。

    当你需要发布部署你的网站时,请记得删除删除带有type="text/babel"的script标签及他的内容,在下一节,我们将讲述如何安装JSX预处理器来自动编译你写好的JSX代码。

    2.在项目中使用JSX

    在项目中使用JSX不需要向打包器或者开发者工具等复杂的工具。实际上,添加JSX预处理器就像添加CSS预处理器一样简单。唯一的要求就是需要在你的电脑上安装Node.js。

    现在在你的项目目录下打开终端,并输入以下命令:

    1.	npm init -y
    2.	npm install babel-cli@6 babel-preset-react-app@3
    

    提示:我们只使用npm来安装JSX预处理器,之后你将不会用到再使用到它。react代码和你的项目代码无需改动,只需要保持原样即可。

    3.运行JSX预处理器

    创建一个src文件夹并把你编写好的js文件放在这个文件夹下。
    在终端运行以下命令

    npx babel --watch src --out-dir . --presets react-app/prod 
    

    你可以看到,src文件夹下你编写好的代码已经被自动处理好了并且创建了一个新的button.js文件,对比以两者你可以看到新出现的js文件是以Javascript代码编写的。
    在这里插入图片描述
    就像简单使用JSX中一样,在html中引入预处理好的js文件即可。
    在这里插入图片描述你不用等待这个命令结束,它设立了一个对JSX代码的监听器,只要你在src目录现编写了JSX代码,监听器就会自动处理你编写的文件。

    以上,就是所有的在现有项目中使用react的操作。

    下一节:创建React应用

    展开全文
  • 网站中添加React

    2020-06-09 21:25:36
    1. 使用React - 添加一个 DOM 容器到 HTML 打开你想要编辑的 HTML 页面。添加一个空的 标签作为标记你想要用 React 显示内容的位置。 <div id="like_button_container"></div> 我们给这个div加上唯一的...

    React介绍

    • React 是一个用于构建用户界面的 JavaScript 库。

    1. 使用React

    - 添加一个 DOM 容器到 HTML

    打开你想要编辑的 HTML 页面。添加一个空的

    标签作为标记你想要用 React 显示内容的位置。

    <div id="like_button_container"></div>
    

    我们给这个div加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它,并在其中显示一个 React 组件。

    提示:

    你可以像这样在 body标签内的任意位置放置一个“容器” div。根据需要,你可以在一个页面上放置多个独立的 DOM 容器。它们通常是空标签 —— React 会替换 DOM 容器内的任何已有内容。

    - 添加script标签

    在 body 结束标签之前,向 HTML 页面中添加三个 script 标签:

      <!-- 加载 React。-->
      <!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js"-->
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    
      <!-- 加载我们的 React 组件。-->
      <script src="like_button.js"></script>
    

    前两个标签加载 React。第三个将加载你的组件代码。

    - 创建一个React组件

    在 HTML 页面文件的同级目录下创建一个名为 like_button.js 的文件。

    提示:

    这段代码定义了一个名为 LikeButton 的 React 组件。

    在 like_button.js 的底部

    const domContainer = document.querySelector('#like_button_container');
    ReactDOM.render(e(LikeButton), domContainer);
    

    这两行代码会找到我们在步骤 1 中添加到 HTML 里的 div,然后在它内部显示我们的 React 组件 “Like” 按钮。

    展开全文
  • react项目时,有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面,如果直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式展现: &lt;div ...
  • 项目中会碰到在react项目中引入html静态页面的需求,以下是解决方法: 主要实现:通过<iframe>方式引入,以下是核心代码部分: import data from './data.html'; // 引入需要引用的html文件 class Data ...
  • 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使用react-router-dom路由 使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom 安装 首先使用...
  • vue中,我们常常标签上使用v-html来,将现成的html代码嵌入到被绑定的标签中,react如何操作呢? 类似于vue,react也有特殊的标签属性,用来代替v-html dangerouslySetInnerHTML属性,该属性被赋值,只接受对象...
  • React和Babel的基本使用

    2019-05-09 10:29:40
    本章将使用React构建一个非常简单的HTML页面,目的在于展示如何运行时使JSX代码正确转换为浏览器可执行的JavaScript以得到我们想要的结果。 使用react.js和react-dom.js react.js文件是创建React元素和组件的...
  • HTML引用React 和 Ant Design分三步走: 第一步:引用React 第二步:引用antd和相关依赖库 第三步:使用antd组件,antd.components   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...
  • 在react中渲染html代码

    2019-06-04 14:53:33
    有时候需要动态渲染后台传过来的html代码文本,但是react的JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染,而不是html代码 例子: &lt;div dangerouslySetInnerHTML={{__html: code}}&gt;&...
  • 我是用create-react-app创建的react项目,然后使用了npm run eject将配置文件拽了出来,现在是默认的public/index.html和src/index.js上写的项目,想请教一下,如何public中的多个html使用index.js,或者其他...
  • 一直都是学的vue ,项目开发也是用的vue,那么多大公司都用的react,想具体了解一下react的优势。初步查看了react的文档,简单的搭了个初始化的demo。 安装全局的create-react-app 脚手架 前提是已经安装好node,...
  • react web页面开发

    2017-12-25 11:26:36
    使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES6 。 执行以下...
  • react写到独立的.js文件中,在html中调用无效,页面没有反应 **index.html** <!DOCTYPE html> <html> <title>Hello React! <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"> ...
1 2 3 4 5 ... 20
收藏数 54,471
精华内容 21,788
关键字:

在html页面使用react