how to import component in index.js in react.js

Question

I have created component folder in src folder and tried to write simple greeting program for that I have created 3 files:

1. GreetUser.jsx
2. index.jsx
3. index.html

while compiling it is showing that could not find required index.js file.

I have written 3 files in Component folder and have imported GreetingUser module in the index.jsx file and while compiling it is showing that could not find required index.js file.

1.GreetingUser.jsx

import React , {component}  from 'react';
class GreetUser extends component
{
    render()
    {
        return <h1>Greetings from suraj!!!!</h1>;
    }
}
export default GreetUser;

2.index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';

import GreetUser from './Component/GreetUser.jsx';


ReactDOM.render(<GreetUser/>,document.getElementById('aaa'));


serviceWorker.unregister();

Could not find a required file. Name: index.js

Answer 1

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. index file must with .js extension and not jsx is not react component. index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.

You can modify webpack configuration if you need it. You can look at additional answers: Renaming index.js to index.jsx in react app and Why does create-react-app creates both App.js and index.js?