React Getting Started

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.

1. Direct Integration with HTML: This involves adding React, React DOM, and Babel CDNs directly to your HTML file.
2. Setting up a Development Environment: Another option is to set up your react development environment using NPM and Node.js.

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.

Integrate React Directly in HTML

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.

• React (react.production.min.js): This script tag loads the React library. React is a JavaScript library that provides the necessary functionality to build user interfaces. By including this script, we make React available in our HTML file, allowing us to write React code.
• React DOM (react-dom.production.min.js): This script tag loads the ReactDOM library. React DOM is a specific part of React that helps render React components on the web page. It provides methods to interact with the actual HTML DOM and update it based on the changes in React's virtual DOM. Including this script enables us to use React DOM to render React components in our HTML.
• Babel (babel.min.js): This script tag loads Babel, a JavaScript compiler. Babel allows us to write JSX and modern JavaScript (ES6+) code in old browsers. JSX is a syntax extension for JavaScript that allows you to write HTML code in JavaScript files. Babel translates the code into a format understandable by all browsers. By including this script, we ensure that our React code, including JSX, is properly transformed and executed by the browser.

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.

Setting up a 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: npx is a package runner tool that comes bundled with npm (Node Package Manager). It allows you to execute packages without installing them globally on your machine. Here, npx is used to execute the create-react-app package.
• create-react-app: ‘create-react-app’ is a command-line tool and package provided by the React team. It serves as a boilerplate generator, setting up a new React application with all the essential dependencies and configuration files. This simplifies the process of creating a React project by offering a pre-configured setup.
• greeting-app: ‘greeting-app’ is the name of the project or the directory where the React application will be created. You can choose any name you prefer for your project.

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.