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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！