标签: create-react-app

我正在研究ReactJS项目,我正在使用create-react-app,突然间我遇到了以下错误,我不知道为什么.在得到错误之前我记得我使用过"yarn add react-rte",然后我意识到我不需要它所以我跑了"yarn remove react-rte".之后我的项目无法工作,每次启动项目时都会出现以下错误:Error in ./src/index.js Module build failed: ReferenceError: Unknown plugin "import" specified in "base" at 0, attempted to resolve relative to "projectFolder/src" at Array.map (native) @ multi main

的package.json

{
"name": "client",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer": "6.7.2",
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-jest": "18.0.0",
    "babel-loader": "6.2.10",
    "babel-preset-react-app": "^2.1.0",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "cross-spawn": "4.0.2",
    "css-loader": "0.26.1",
    "detect-port": "1.0.1",
    "dotenv": "2.0.0",
    "eslint": "3.8.1",
    "eslint-config-react-app": "^0.5.1",
    "eslint-loader": "1.6.0",
    "eslint-plugin-flowtype": "2.21.0",
    "eslint-plugin-import": "2.0.1",
    "eslint-plugin-jsx-a11y": "2.2.3", …

当我在编译时使用 create react app 时，我收到以下错误。 Grid.js 文件

import React, { Component } from 'react';

class Grid extends Component {
    render(){
        return <p>Hello, World</p>;
    }
}

export default Grid;

我看不出这里有什么问题？任何帮助表示赞赏

import React, { Component } from 'react';
import Grid from './Grid.js';

class App extends Component 
{
  render()
  {
    return(
      <div> 
        <Grid />
      </div>
    );
  }
}

export default App;

这是我使用组件的地方

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

使用 …

我正在尝试在React Redux上学习本教程(https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3)但是当我得到一个空对象时我打印出这个.props.似乎mapStateToProps实际上并没有设置this.props,因为反应redux的连接没有被调用,但我不知道为什么

这就是状态应该是什么(就像在教程中一样),我所做的就是将组件的名称ItemList更改为Home

这是我得到的(没有映射到状态):

动作/ items.js

export function itemsHasErrored(bool) {
    return {
        type: 'ITEMS_HAS_ERRORED',
        hasErrored: bool
    };
}

export function itemsIsLoading(bool) {
    return {
        type: 'ITEMS_IS_LOADING',
        isLoading: bool
    };
}

export function itemsFetchDataSuccess(items) {
    return {
        type: 'ITEMS_FETCH_DATA_SUCCESS',
        items
    };
}

export function itemsFetchData(url) {
    return (dispatch) => {
        dispatch(itemsIsLoading(true));

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                dispatch(itemsIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((items) => dispatch(itemsFetchDataSuccess(items)))
            .catch(() => dispatch(itemsHasErrored(true)));
    };
}

组件/ Home.js

export …

我正在创建一个 create-react-app。

我正在使用现有的 API（它是用 MVC C# web api 编写的）。

我希望 React 应用程序使用的 API 位于：https : //api.myserver.com.au

我正在从http://localhost运行 React 的开发版本

当我上线时，我将始终从与 API 不同的位置托管我的 React 应用程序。即我将在https://my.cool.app 上托管它，而 API 仍将在https://api.myserver.com.au

我的 package.json 如下：

{
  "name": "hbi.contractor",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/api/*": {
      "target": "https://api.myserver.com.au"
    }
  },
  "dependencies": {
    "axios": "^0.17.1",
    "jquery": "^3.2.1",
    "materialize-css": "^0.100.2",
    "nodemon": "^1.14.11",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-form": "^2.16.1",
    "react-live-clock": "^2.0.2",
    "react-load-script": "0.0.6",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "redux-thunk": …

只是另一个反应问题.我想在全局存储一些URL信息,并按环境(开发,生产等)划分.

在网上搜索,通常的方法是反应自然支持的.env文件.

我创建了一个.env和一个.env.development,所以第一个是生产,第二个是开发文件.

在文件中,我把我的配置如下:

# .env.development
REACT_APP_TEST=newyork

我尝试用以下方法打印值:

console.log(process.env);
console.log(process.env.REACT_APP_TEST);   

我得到的是:

Object
  NODE_ENV:"development"
  PUBLIC_URL:""

第二个是未定义的.

问题出在哪儿？

我为一个项目使用了 create react app 和电子。它在开发环境中运行良好。

开发环境镜像

但是，当我构建项目并尝试使用电子运行它时，我得到了一个空白屏幕。我没有看到任何错误。我相信这与路由有关，因为电子使用文件系统。

我的路由文件的图像

我如何构建应用程序并使用反应路由而不是文件系统？

优步表示，它带有预先配置的优化样板和基于插件的架构。基于插件的架构是否意味着它类似于 gulp？

我正在为我的React应用程序使用create-react-app，目前正在尝试找出翻译。

现在，我在每个语言环境中都有一个大的JSON文件，每个语言环境文件都包含所有组件的翻译-这并不理想，我希望每个组件都有单独的翻译文件。

因此，语言环境的结构将如下所示：ComponentA-语言环境-en.json-sk.json

ComponentB-语言环境-en.json-sk.json

实现此目标的最佳方法是什么？我应该使用哪些模块来实现这一目标？

我不想将这些语言环境文件包含到构建中，因为我们将支持10种语言，因此捆绑包的大小将太大。

我正在尝试将emotion.js与create-react-app和TypeScript结合使用.继文档我添加@emotion/core,使用import {jsx, css} from '@emotion/core';和添加/** @jsx jsx */我的文件的顶部.

但是当我运行应用程序时,会抛出以下错误:

ReferenceError: jsx is not defined

这是我的示例组件:

/** @jsx jsx */

import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";

export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

该行,错误被抛出是函数的定义: export const Header: React.FunctionComponent<{}> = () => (

任何帮助如何使其工作(除了弹出create-react-app脚本)将非常感激.

我已经使用create react app typescript创建了一个项目。我有一些d.ts文件，其中定义了接口类型和枚举。当我运行启动脚本时。它无法加载d.ts文件。

以下是我的tsconfig文件。

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "es2017"
    ],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "pretty": true,
    "preserveConstEnums": true,
    "typeRoots": [
      "./node_modules/@types",
      "src/*"
    ]
  },
  "include": [
    "src/*"
  ]
}

typeRoot指向src / *，其中我有d.ts文件，但没有d.ts加载。我得到以下错误：

键入错误：找不到名称“ IAlarmsDetails”。TS2304

interface IAlarmProps {
        alarm: IAlarmsDetails;
}       

这是Alarm.d.ts之一中IAlarmsDetails的声明。

declare type IAlarmsList = IAlarmsDetails[];

请让我知道我在这里想念的东西。我不想使用弹出选项并编写自己的构建配置。