Introduction
ReactJS, a widely adopted JavaScript library, is extensively utilized for constructing user interfaces. Initially created by Facebook and made publicly available in 2013, it has primarily been employed in developing frontend applications. These applications possess several advantageous qualities compared to Angular, such as being lightweight, easily developed, and modular. The code structure revolves around reusable components that handle specific code segments. Notably, React utilizes the concept of Virtual DOM (Document Object Model) to swiftly update screen data. By employing Virtual DOM as memory/buffer storage, React can promptly reflect changes on the screen without reloading the actual modifications from the original DOM. The notable features and capabilities of React have significantly contributed to its widespread popularity.
Key Features of React
- Virtual DOM: Enhances application performance by utilizing a virtual representation of the document object model.
- Component-Based Architecture: Components serve as fundamental code units that are rendered on the user interface, promoting code reusability.
- JSX Syntax: Resembles XML/HTML syntax, facilitating intuitive and declarative rendering of components.
- One-Way Data Binding: Implements a unidirectional data flow, ensuring modularity and efficient updates for faster results.
Getting Started with Creating a React Project
To begin, ensure that you have all the necessary Node dependencies installed on your system. Follow the step-by-step process outlined below to create a React app:
- Open the command prompt (cmd) in your system.
- Navigate to the desired folder where you wish to install the react app
- Execute the following command in command prompt:- npm install –g create-react-app. This command will install all the dependencies required for creating the app
- Next, execute this command:- create-react-app frontend. This command will create a new React App named ‘frontend’. Remember to use camelCase or lowercase for the app name.
- The above command created the React App ‘frontend’ and installs all the necessary Node modules for the app.
- The folder structure for the React app ‘frontend’ is now populated as per the creation process.
- The node_modules contains numerous files that satisfy various dependencies.
- The package.json serves as a project manifest, storing information about all modules and the dependencies. It is not a React file but a Node file.
- When running the application, the content present in index.html (from public folder) is rendered on the screen.
- The index.js (from src folder) is responsible for starting the application.
- In the same command prompt, navigate to the app by using the command cd frontend.
- Use the command ‘npm start’ to run the application.
- If you notice the message “Note that the development build is not optimized” from the image in point 7, it indicates that the data is loaded onto the screen using the “development” virtual DOM, enabling quick reflection of changes.
- Copy and paste the Local url in the web browser:- http://localhost:3000
- Your React app is now loading on the UI screen.
Happy Coding !!