импортировать классы в реакции

Question

Я работаю над групповым проектом в реакции, и все они были довольно новыми для этого опыта. Мы сталкиваемся с некоторыми проблемами, но там, где мы можем обойтись самостоятельно. Один из моих друзей предложил переполнение стека на случай, если мы действительно застрянем. Так как наш школьный проект работал над ним дома, но у нас обоих ограниченный доступ к inte rnet, поэтому мы не можем использовать ресурсы онлайн столько, сколько нам хотелось бы.

import React from 'react';
import styles from './ViewJobsList.css';
import { Helmet } from 'react-helmet';



class A extends React.Component {...};
class B extends React.Component {...};

export {A,B}; 

Это для нашего приложения. js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import 'bootstrap/dist/css/bootstrap.min.css';
import { A, B } from "./app.js"


ReactDOM.render(<App />, document.getElementById("root"));
serviceWorker.unregister();

это наш индекс. js

последний импорт отображается серым цветом и не отображается читать. Я не уверен, почему мой товарищ по группе сказал, что это должно работать, поскольку это было предложено сделать здесь

здесь наш каталог c ничего не изменилось, поэтому я не уверен, в чем наша проблема

это ошибка введите описание изображения здесь

Answer 1

В этой строке вы импортируете экспорт по умолчанию в приложение. js файл, которого у вас нет.

import App from "./App";

Вот почему вы получаете эту ошибку.

Смотрите это реализация.

приложение. js

import React from 'react';
import styles from './ViewJobsList.css';
import { Helmet } from 'react-helmet';

class A extends React.Component {...};
class B extends React.Component {...};
class App extends React.Component {
   render(){
     return (
       <>
        <A />
        <B />
       </>
     );
   }
}
export {A,B}; //Actually, you use only <App /> component in index.js no need to export 
              //these components but you can export also these subcomponents. 
export default App; //this means you have a default export in this file so you can import
                    //this App component without using curly brackets as you try above.

index. js,

import React from "react";
import ReactDOM from "react-dom";
import App,{A,B} from "./App"; //again no need to import A and B here but you can.
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import 'bootstrap/dist/css/bootstrap.min.css';


ReactDOM.render(<App />, document.getElementById("root"));
serviceWorker.unregister();

Это решает вашу проблему, но я настоятельно рекомендую вам использовать ее отдельно. js файлов для каждого компонента. Вы все еще можете объединить эти компоненты в один файл, используя синтаксис «export ... from ..».

Answer 2

опечатка: import { A, B } from "./App.js";