初学Reactjs

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

初学Reactjs 遇到了这个问题  该如何解决?  花点时间 记录一下

页面:

<html>
<head>
  <script src="/bundle.js"></script>
</head>
<body>
</body>
</html>

js:

/** @jsx React.DOM */
‘use strict‘;

var React = require(‘react‘);

var App = React.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});

React.renderComponent(<App />, document.body);

必然会出的错、

原因是在页面加载时js同步下载 然后直接执行 后面的部分还没有加载完毕(body标签)

导致js执行时找不到body标签节点

普及一下:href vs src

href 是异步下载

src   是同步下载

所以绝大多数网页都是   把script标签放在下面   link标签放在头部

来源:http://stackoverflow.com/questions/26566317/invariant-violation-registercomponent-target-container-is-not-a-dom-elem

时间: 2024-10-11 00:53:50

初学Reactjs的相关文章

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

D1.1.利用npm(webpack)构建基本reactJS项目

前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# webpack 介绍:http://webpack.github.io/docs/what-is-webpack.html npm install -g webpack webpack-dev-server #在项目文件夹路径下,初始化npm项目 npm init #安装webpack和webpa

一看就懂的ReactJs入门教程(精华版)

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

STM32初学Keil4编译时出现 Error:Failed to execute &#39;BIN40/Armcc&#39;

一种是在系统开始--运行里输入cmd,查看armcc状态.详情见推文: http://blog.csdn.net/hicui/article/details/7350805(笔记记录,请勿见怪) 都没有问题的话,那么可以尝试: 在keil里的菜单栏依次选择Project->Manage->Components,Environment andBooks(CEB)(或者直接点击工具栏的图标), 然后在CEB里选择Folders/Extensions标签页,在RealView Folder里选择ke

mongodb 初学 目录

mongodb 初学 索引 啦啦啦 MongoDB 教程 NoSQL 简介 MongoDB 简介 Windows 平台安装 MongoDB Linux平台安装MongoDB mongodb 在 Ubuntu系统上的安装及卸载 Mongodb启动命令mongod参数说明 Mac OSX 平台安装 MongoDB MongoDB 概念解析 MongoDB - 连接 MongoDB 创建数据库 MongoDB 删除数据库 MongoDB 插入文档 MongoDB 更新文档 MongoDB 删除文档 M

初学ArcGIS API for JavaScript

初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的特别详细,在这里以笔记的形式来帮助自己加以理解和记忆. esri.css样式主要用于ESRI提供的小部件与组件,比如地图.信息框等.此外,还可以引用Dojo提供的样式表,Dojo提供了4组样式,分别是claro\tundra\soria以及nihilo,每种是一组定义用户界面的字体.颜色与大小等设置.在Arc

ReactNative入门(1)初识ReactJs

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

初学 Python(十一)——切片

初学 Python(十一)--切片 初学 Python,主要整理一些学习到的知识点,这次是切片. #-*- coding:utf-8 -*- ''''' 切片 ''' L = ['name','age','sex','address','company'] #取前2个 print L[0:2] print L[:2] #取倒数第一个 print L[-1] #取后两个 print L[-2:] #取倒数第二个 print L[-2:-1] print len(L) #隔一个数取一次,从第一个数开

初级前端自学react-native,必备知识点(ES6+ReactJS+flexbox)

我们在学会搭建react-native环境之后,打开项目根目录,看到很多个文件,但是最起眼的应该就是那俩js兄弟文件了 我们一看那名字就知道,我们接下来的任务就是要弄它们: 我们用编辑器打开项目根目录下的index.android.js文件,可以看到有这么个东西: 那么我们先测试一下,在手机上跑起来.不知道大家还记不记得步骤: 第一步:在项目根目录下打开两个git bash.第一个输入:react-native start        这一步是在启用服务器 第二步:在第一步成功之后,连接手机,