小编Ish*_*tel的帖子

什么是npm run eject命令吗？我确实理解其他命令的作用,如启动,构建,测试.但不知道弹出.

我刚刚使用此命令创建了一个新的React应用程序:

create-react-app mysite.com

安装后,当我尝试使用npm start和打开它时yarn start,我收到以下错误.

throw new Error('custom keyword definition is invalid: '  + this.errorsText(validateDefinition.errors));
      ^

Error: custom keyword definition is invalid: data.errors should be boolean
    at Ajv.addKeyword (/Users/myAccount/Documents/Dev/Projects/ReactJS/mysite.com/node_modules/ajv/lib/keyword.js:65:13)

我该如何解决这个问题？

我试图了解通过该阵营阵营库,但不明白什么context以及updater是,这是在向组件传递.

以下是库中的代码.

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

这些东西的目的是什么？

我创建了一个新的 React 应用程序create-react-app，然后styled-component使用npm. 但是当我在组件中使用它时，出现以下错误。

编译失败。./src/Components/Lightbox/styledLightbox.js

未找到模块：

无法解析“/Users/ishan/Documents/react-app/src/Components/Lightbox”中的“styled-component”

以下是组件：

import React, { Component } from 'react';
import { LightboxWrapper } from './styledLightbox';

class Lightbox extends Component {

    renderEntry() {
        if (this.props.lightbox.type === "photo") {
         return  <img alt="name" src={this.props.lightbox.entry} />;
        } 
        if (this.props.lightbox.type === "video") {
        return <video src={this.props.lightbox.entry} onLoadedMetadata={(e) => {console.log("Video duration is: "+e.currentTarget.duration) } } autoPlay muted onEnded={() => console.log("Video ended")} width='100%' height='100%' ></video> 
        }
        if(this.props.lightbox.type === "text"){
        return <div> <p className="lightbox text"> {this.props.lightbox.entry} …

我正在学习一个教程，它说

ES 模块使用实时绑定。这意味着支持循环依赖的特性。

但是我不是很清楚这个概念。这是什么意思？

我刚刚开始研究这个新的React应用程序。

它<Suspense />在组件中使用元素，但我将其删除。然后应用程序因上述错误而崩溃。

是否有任何简单的解决方法，却不了解太多<Suspense />？

我已经使用安装了所有必需的库，npm install并且也完成了，npm install --save react-router-dom@4.0.0但仍然收到此错误。

我的Package.json

  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^15.6.2",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "react-router-dom": "^4.0.0",
    "redux": "^3.0.4"
  }

更新了react，redux，react-redux之后，所有的我都没有警告，但是在运行后却出现了以下错误 npm start

> node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException …

我是在 React 中创建 GET 请求的新手。当有人在输入字段中输入 url 时，我试图从 Instagram 内容中获取 media_id。有趣的是，我确实在 Inspector 中收到了以下 GET 请求的响应，但我不确定如何正确执行它。

以下是我的组件代码。

import React, { Component } from 'react';


export default class UrlInput extends Component {

  constructor(props){
    super(props);

    this.state = {
      term: '',
      mediaid: ''
    };
    this.onInputChange = this.onInputChange.bind(this);
  }
  componentDidMount(){
    const url = 'https://api.instagram.com/oembed/?url=http://instagram.com/p/Y7GF-5vftL/';
    fetch(url).then(response => {
        if(response.ok){
          return response.json();
        }
        throw new Error('Request failed!');
      },
      networkError => console.log(networkError.message)).then(jsonResponse => {
        return jsonResponse;
        console.log(jsonResponse);
      });
    }

  render(){
    return (
      <div className='search-bar'>
          <input
            value= {this.state.term}
            onChange={ event …

我在从 API 获取一些数据时遇到上述错误。action creator以下是我尝试GET数据的代码：

import { FETCH_USER } from './types';
import axios from 'axios';


export const fetchUser = () => async dispatch => {

        console.log('fetchUser');

        const res= await axios.get('/api/current_user');

        dispatch({ type: FETCH_USER, payload: res });

}; 

另外，当我在代码编辑器中调试时，控制台给出以下错误：

SyntaxError: Unexpected token import

我正在学习构建系统如何在 JavaScript 中工作。如果babel-loader是翻译器翻译React成JavaScript，为什么它是插件的一部分webpack？

不是transpiling和bundling是一个单独的过程吗？

是否有资源可以解释所有这些框架如何组合在一起并使构建系统详细工作？我似乎只能在官方文档中找到高级概述。