create-react-app Komponente in einem anderen Ordner als Projektfehler

Question

Ich habe eine neue App mit create-react-app React erstellt und ein paar Apps können die gleichen Komponenten wiederverwenden.
Also habe ich diese

- App1 
- App2 
- App3 
- Utils 
    - Components 

eine Struktur wie erstellen Wenn ich versuche, aus einer App Utils/Komponenten zu laden, es gab mir zuerst den You may need an appropriate loader to handle this file type. -Fehler. Ich habe die Dateitypen .js-.jsx geändert und jetzt mir die folgenden Fehler es

Uncaught DOMException: Failed to execute 'createElement' on 'Document': 
The tag name provided ('/static/media/TeamSidebar.2e3fe8e5.jsx') is not 
a valid name. 

package.json geben:

{ 
    "dependencies": { 
     "bootstrap": "^4.0.0-beta", 
     "react": "^16.0.0", 
     "react-dom": "^16.0.0", 
     "react-moment": "^0.6.5", 
     "react-scripts": "1.0.14", 
     "reactstrap": "^5.0.0-alpha.3", 
     "utils": "file:../utils" 
}, 

App.js

import React, {Component} from 'react'; 
import {Components} from 'utils'; 

class App extends Component { 
    render() { 
     const {TeamSidebar} = Components; 

     return (
      <TeamSidebar teams={teamsList}/> 
     ); 
    } 
} 

Answer 1

Create-React Das Projekt der App sollte standardmäßig wie folgt aussehen:

my-app/ 
    README.md 
    node_modules/ 
    package.json 
    public/ 
    index.html 
    favicon.ico 
    src/ 
    App.css 
    App.js 
    App.test.js 
    index.css 
    index.js 
    logo.svg 

src Ordner enthält alle spezifischen Komponenten, aus denen Ihre Anwendung besteht. In Ihrem Fall haben Sie alle Dateien/Ordner in src Ordner wie folgt zu platzieren:

Versuchen Sie, wie diese importieren:

src/ 
    -App1 
    -App2 
    -App3 
    -Utils 
    -Components ex:(User.js) 
    ... 
    ... 

wenn Sie importieren wollen alle Dateien aus Utils können Sie es auf diese Weise tun:

import NameYourFile '../Utils/WhatEverFile'; 

Hoffe es hilft!