How to create a simple app using React
React is a JavaScript library that is used to create interactive and dynamic user interfaces. It divides the code into components, reducing redundancy and enhancing efficiency to maximize user experience. We can create a simple React app using multiple commands on the terminal. It is important to have a node version
Creating the React app
We can create the React app using the following methods depending on the user's system:
Using npm
We will use npm whenever we want to install all the required packages to our local system. To create a project with npm, we will use the following command.
npm create-react-app <App_Name>
Using npx
We will use npx whenever we want to use all the required packages globally without any installation on our local system. To create a project with npx, we will use the following command.
npx create-react-app <App_Name>
Using yarn
We will use yarn whenever we want to install all the packages on our system. The purpose is similar to npm but it is faster and more efficient as it installs all packages in a parallel manner. To create a project with yarn, we will use the following command.
yarn create-react-app <App_Name>
Navigating to the app directory
After we create the React app, we will run this command to switch from our current directory to the newly created React project.
cd <App_Name>
Starting the project
After navigating to the application directory, it's time to execute our application. We have two methods for that purpose:
Using npm
If we create our React project using npm or npx, we will run it using the following command.
npm start
Using yarn
If we create our React project using yarn, we will run it using the following command.
yarn start
Coding example
After the execution of all the commands mentioned above, our React app is created. Following is an example of a React app that displays "Hello World".
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Conclusion
React is an extremely helpful library to create user-friendly and interactive interfaces. With just a few simple commands, we can create a React app and explore its creative tools and functionalities. This will help us create an engaging front-end of our projects with ease.
Free Resources
