Confused of App.JS or Index.JS?

Im new to ReactJS, but I’m confused which App.JS or Index.JS to use for typing a programming.

Explain the difference between App.JS or Index.JS?

I used ReactJS - JSX (tutorialspoint.com) website to learn with ReactJS.

I put code in index.js and I got error, See below:

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

ReactDOM.render(
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}

}
document.getElementById('root')
);

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Hi @ChrisGW !

Welcome to the forum!

When I create react apps, I don’t really touch the index.js file at all.
That is just a place to render the app.
I will write my code in the app.js or write code in separate components and then nest them inside the app.js

I took your code, and reworked it in this example link.
I didn’t touch the index.js file at all.

In the app component I added your code.
I also created another component and nested that inside the app component.

I would also suggest that you go through freeCodeCamp’s youtube course on react.

I think that will give you a better foundation then the tutorialspoint article.

Hope that helps!

3 Likes

Hi @ChrisGW
Both “App” and “Index” are just file naming conventions people follow, but in no way their content and purpose is set in stone. Its generally accepted “index” to represent the file a browser would open initially, and it usually represents the basic html. Many tools and programs open files named “index” by default, even if you dont specify such name. Regarding React, index.js is where you would usually mount/render your main react component onto your “root” element(which you mark in your html). “App” is what people tend to call the file which contains the main logic of your file, or in React case, the main component, the one that represents your entire application/web-site. “App.js” would usually refer to just that, your main component.
Looking at your code and based on my previous experience with React, seing you import “App”, im surprised you dont render it in your ReactDOM.render method. Usually we use that render method to render our main component, i.e. it should be “App” in this case. I dont know however, what are the requirements in the said challenge

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.