I have created a simple React application to explain the flow of the React applications and some of the important lifecycle hooks of React. This application consists of a form which takes the input from the users and displays the entered values when a button is clicked. After some calculations, the final value is displayed in the output. On every click of the button, the result is appended to the previous result. You can download the working demo of the application from here,
Working Demo
Want to get started with React? Yeah, you are in the right place to start.
Do you have NodeJS installed on your system? Not yet? Download Node.js from this link.
Open the command prompt and run the following command. For creating a React app with the use of TypeScript, run the following command.
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Go to the folder where you want to create your React application. Create a React project by running the below command either in cmd or you can run the command in the terminal of VS Code.
Running this command installs React, React-dom, and React-scripts.
npx create-react-app usermanagement --typescript
Here, --typescript is used to indicate that you want to create the application in TypeScript. By default the application in created in JavaScript.
To run the React application, use the command,
npm start
Running this command will open your application on port 3000 by default with the link http://localhost:3000/. React gives you an application with default page as shown below.
The entry point of our React application is index.tsx. It has a renderDOM method which renders the given component. Here, we have the root component as <App /> which displays the content of the App.tsx component.
For getting started, we need to make changes in the app component. Here, in this tutorial, we have used a form which takes the input from the users, such as name, salary, and marital status. On submitting the form, the details entered will be shown. On every click of the button, the details entered will be appended and will display a user-friendly message along with the details.
One more thing to notice is that we calculated the gross salary of the user based on the salary entered, where the gross salary of a user is the total of the allowance (which is 40%) and the rent allowance (which is 20%).
For getting started, you can start editing the app component and see your changes in the browser on saving those changes. Some problems may also occur during the creation of the project. such as running this command throws an error which doesn't allow us to create the project.
npx create-react-app UserManagement --typescript
The error may look like,
Could not create a project called "UserManagement" because of npm naming restrictions,
* name can no longer contain capital letters,
NPM packages are [not allowed](https://github.com/npm/validate-npm-package-name/blob/master/index.js#L67) upper case characters in their name, [seemingly](https://github.com/npm/npm/issues/3914#issuecomment-24878907) because UNIX filesystems are case-sensitive, which creates "a recipe for confusion and nonportable software".
Note
Uncomment the console logs to better understand the flow of the application. It gives you more idea of the process of how the components are rendered and how React lifecycle hooks are used.