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!