lem lem - 16 days ago 8
React JSX Question

import App from './App';

I am trying react based on create-react-app. I'm new to react.

index.js

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

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


./App in
import App from './App';
is not clear to me when and where is this created, is this done by babel?

file strucutre

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


App.js

import React, { Component } from 'react';

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

export default App;

Answer

tl;dr

No, it is not done by Babel, instead it is done by create-react-app package.

All the files and folders in that folder are created automatically when you run,

create-react-app your-new-app-name

import App from './App'

The above line is used for importing the class you have written in the file App.js under the same directory.

Next, the difference between,

import App from './App'

and

import App from 'App'

Use the first if you want to import any user defined files and second for importing packages. As Shubham Khatri mentioned, for importing files, it is technically same if you did or did not use .js extension.


The longer version

create-react-app is a starter kit for people who are new to React or for who are lazy enough to build an app from scratch. What create-react-app does is, it will give you a minimal running React app with a solid folder structure. As given in their documentation, you can install that globally by giving,

npm install -g create-react-app

After this whenever you want to create a new app, what you want to do is,

create-react-app  your-new-app-name

This will automatically generate a folder with all the files you mentioned.


Within the folder when you open the file public/index.html, you can see a line

<div id="root"> </div>

And on the src/index.js, you can find,

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

If you are familiar with javascript, you may know that document.getElementById('root') is used to match any tag in HTML with ID as root. So the above snippet means that, they are rendering the <App> component of react to div with ID root. This is how React communicates with HTML page.


Rather that writing all the component codes in a single file, it is a good standard to write each components in different files. Here, App.js is a component that basically renders the text myComponent. For using this component in other files, you have to do two things.

  1. Export the component from the file where it is defined. (export default App;)
  2. Import the component to the file where it is used. (import App from './App')

General syntax for import is,

import className, { functionName } from 'packageName'

or

import className, { functionName } from './path-to-file/fileName'

Note: It is that ./ which tells the compiler whether to look on to node_modules folder or the path you mentioned. Use that strictly when you need to import user defined files.


Hope this helps!