To create a React app, the first step is to set up the development environment. As discussed in the React Environment Setup article, there are two ways to do this: either by using React CDNs or by setting up the React environment directly on our local machine. In this case, we prefer setting up the environment locally for better control and flexibility. To understand why we have chosen this option and to learn how to set up the development environment, please refer to the React Environment Setup guide.
Now, open your terminal, navigate to the folder where you want to create your React app and execute the following command.
This command will create a new folder called "react-greeting-app" with all the necessary files and configurations to get started with your project. Your file structure will appear as shown below.
Before getting deep into these files and folders, let's start the development server. In the terminal, execute the following command. Alternatively, if you're using the Visual Studio Code editor, you can open your application folder and run the same command in the terminal.
This command will start the development server, and your React app will automatically open in your browser at "localhost:3000". If it doesn't open automatically, you can manually visit this address in your browser.
If you wish to modify the output content, you will need to make changes to the App.js file. To do that, open the App.js file located in the src folder. It will contain the following code.
Now, replace the content within the <div className="App"> with an <h1> element, as shown below.
After making these changes, save the react application and verify it by accessing localhost:3000 in your browser. You should see the following result.
Here's a concise overview of the important files and folders generated by the npx create-react-app react-greeting-app command:
1. node_modules: This folder contains various packages and dependencies required for your React application. It includes multiple folders and files, representing the installed libraries.
2. public/index.html: This HTML file acts as the entry point for your React app. It provides the basic structure of an HTML document and a <div> element with an id where your React app will be rendered. This is the only html file which serves the whole application. The rest of the html code is managed by the React Virtual DOM.
Index.html
3. src/App.js: This JavaScript file represents the main component of your React app. It contains the code that defines the structure and behavior of your application. By default, it renders a simple greeting message.
App.js
The function returns JSX. JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. The App.js file is a component that returns the JSX containing a div and h1 elements.
4. src/index.js: This JavaScript file serves as the entry point of your React app. Its primary responsibility is to render the root component, which is App.js, and inject it into the HTML file.
index.js
Instead of rendering the App.js file, you can also write your own JavaScript function in the index.js file and render it by replacing the <App /> component with your own function, as shown in the following example.
5. package.json: This file contains metadata and configuration for your project, including dependencies, scripts, and more.
package.json
This is how we can create and make changes to the React app based on our requirements. In the upcoming chapters, we will learn about other react topics such as JSX, components, fragments, etc. in-detail with examples.