React 踩坑之旅 --2016-6-15更新
最近接触react,在学习的过程中也把踩过的坑发出来,希望能帮助新人再入坑。
1.webpack使用babel-loader后编译报错
报错
ERROR in ./entry.js Module build failed: SyntaxError: /Users/yixin/Desktop/react/entry.js: Unexpected token (2:8)
说是 "npm install babel-loader --save-dev以外还需要
npm install babel-preset-es2015 babel-preset-react --save-dev。
然后在loaders中添加:
var babelPresets = {presets: ['react', 'es2015']}; loaders: [ { test: /\.js|jsx$/, loaders: ['babel', 'babel-loader?'+JSON.stringify(babelPresets)] }]
则可以正常运行。
2.Target container is not a DOM element
找不到dom节点: Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.
原因是js在头部引入,由于src是同步下载,然后立即执行,而此时你的渲染树还未构建完毕,因此找不到dom节点。解决方法是在页面底部进行调用。
3.Super expression must either be null or a function, not undefined
我是按照之前买的用JavaScript开发移动应用的例子来编写的,然后报了这个错。我的头部声明是这样的
var React = require('react-native');var { Text, View} = React;
经过查询后是由于'React'和'Component'从'react native'分离到了'react'模块。所以这里我们只引入'react native'的模块是不够的,改成这样:
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';
成功运行。另外推荐RN的ES5和ES6的语法对照表,作为初学者还是很有必要了解的
React/React Native 的ES5 ES6写法对照表
后面还会持续更新。。。
关键字:react.js, webpack, babel6
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!