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.
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:
npxis used to execute the
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