Exploring the Structure of a React Application

Hello students! In the previous topic, we learned how to create a basic React project. In this topic, we’ll explore the structure of a React application.

When you create a React project using the create-react-app command, it generates a directory called my-app with the following files and directories:

• package.json: This file contains your project’s dependencies.
• src/App.js: This file contains the main component of your application.
• src/index.js: This file starts the React development server.

Let’s delve into each of these files and directories in detail.

package.json

The package.json file contains your project’s dependencies.

Dependencies are JavaScript libraries that your application needs to function.

When you create a React project using the create-react-app command, it adds the following dependencies to your package.json file:

{
  "name": "my-app",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

src/App.js

The src/App.js file contains the main component of your application.

The main component is the component that will be rendered on your application’s homepage.

The default code for the main component is as follows:

import React from "react";

const App = () => {
  return (
    <div>
      <h1>My first React application</h1>
    </div>
  );
};

export default App;

This code renders a header with the text “My first React application.”

src/index.js

The src/index.js file starts the React development server.

The default code for the src/index.js file is as follows:

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

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

This code starts the React development server and renders the main component on the homepage.

Conclusion

In this topic, we explored the structure of a React application.

You learned about the following files and directories:

• package.json
• src/App.js
• src/index.js

Now you are ready to start creating your own React applications.

In the next module, we’ll dive deeper into ES6 for React. I’ll see you there!