To build and execute the react applications, the first step is to set up the React development environment. Let me guide you through the process of getting started with React integration into your project.
Basically, there are 2 ways to integrate React.
These approaches provide different ways to start using React. The first option, adding React CDNs directly to HTML, is useful for getting familiar with React without installing anything on our system. However, it’s not recommended for production use. The second option is always advisable for production environments.
By using react CDNs (React, React DOM, Babel), we can directly integrate React directly HTML. First, create the Index.html file and write the following code.
In the above example, we added three react CDNs (React, React DOM, Babel) to the header section of the Index.html file.
The root <div> element will act as an entry point for our app, and the text/babel
script type indicates that we are writing JSX code. We use the ReactDOM.render()
method to render the Greeting component into the DOM.
When you execute the above example, you will get the result as shown below.
In the above example, we used CDNs to add different functionalities like React, ReactDOM, and Babel. However, it’s important to note that adding JavaScript libraries directly into a static HTML page and rendering the React and Babel on the fly is not an efficient way. Therefore, it is always advisable to set up a dedicated React development environment.
Now, let’s delve into the robust development environment provided by the React Community - create-react-app
. This tool provides an option to create a react development environment quickly using NPM.
To run the create-react-app
command with npm, you must ensure that Node.js is installed on your computer. You can check if Node.js is installed by opening your terminal and running "node -v
" and "npm -v
" commands. If Node.js is not installed on your machine, please follow the Node.js Environment Setup guide to install the Node.js.
Node Package Manager (NPM) is included with the Node.js installation and will be installed automatically on your machine. After installing Node.js, verify the NPM installation by executing the npm -v
command in the terminal.
Once Node.js is set up, open your terminal, navigate to the folder where you want to create your React app and execute the following command in the terminal.
Let's break down the workings of the command npx create-react-app greeting-app
and explain each term:
npx
is used to execute the create-react-app
package.In simple terms, executing the "npx create-react-app greeting-app
" command allows us to quickly create a new React application with all the necessary files and dependencies preconfigured. It eliminates the need for manual setup, providing a convenient starting point for our React project.
When you execute the npx create-react-app greeting-app
command, it will automatically install all the required packages as shown below.
After the installation is complete, you will see the following message.
Now, you can navigate to the newly created directory (greeting-app) and execute the following command in the terminal to start the project.
This 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.
This is how you can set up your React development environment to build React applications. In the next chapter, we will learn in detail about the files and folders that are generated by the create-react-app
command.