Once in a while, you must have wondered what the tool is, behind engaging user interfaces on your phones and laptop. Frequently, the answer to your query would be ‘React’. It is indeed an amazing framework that has altered how user interfaces are built now.
This article will guide you through the steps for creating your React app but before that let’s briefly talk about the tool.
React: a small introduction
Having stated ‘library’ you might be a little confused if you are not accustomed to the software engineering sector. Technically, a ‘library’ and a ‘framework’ are two separate concepts. One of the primary differences is that a framework dictates upon a larger area of your application; whereas a library has a fundamental and narrower application, such as a specific application feature.
There are three primary characteristics of reacting which are:
- React uses declarative elements.
- React codes are reusable for different technologies and browsers.
- It is formed by individual components managing its forms.
If you are a developer, you can easily create mobile phone applications using react code such as React Native, particularly for mobile application frameworks.
Now learn how to build a React app
Now that you have some foundational idea of what react is, let us see the essentials of React steps to build a simple application.
Essentials of React.Js
Before proceeding with react you must remember to have npm (Node Package Manager) and node.js installed on your system. For checking whether both of them are installed or not, you can run the commands below on your terminal:
- node –version
- npm –version
Step 1: creating the react app in your terminal by setting up the boilerplate
Open up the terminal and move the directory where you wish the react app to be installed. In your terminal, run the command stated below. This will automatically create a new directory within the present folder.
**npm create-react-app my-app**
A React app can be easily built manually or by applying a node package (create-react-app), that would create a boilerplate version of the React application.
The react application name “my-app” can be replaced with a name you want it all to make sure to not put capital letters.
The transitive dependencies are installed and an initial project structure is automatically created, by the command that has been currently generated in the directory. You can thereafter remove the recently created directory by executing in the terminal, the command stated below:
Step 2: Initiate the React app
The next step is to go to your newly made directory. The development web server can be started when you execute in the terminal, the command stated below:
- npm start, or
- yarn start
After you have executed the command in the terminal, it would run the react app in the development mode. After this step, it would automatically direct you to an HTML page.
Go to the ‘my-app’ app directory and look into the folder name ‘src’ which shows on the HTML page. You will find a file named ‘App.js’. After the application has been initialized the App.js file defaults to the HTML code which gets furnished on the homepage.
Routinely, App.js performs as the highest standard of components in the React application structure. Your application’s configuration is stored in the same folder in the file named ‘index.js’, which also implements dependencies such as React-Redux and React-Router.
Step 3: Performing test runs
When a React application is created, a few unit test cases are by default defined in the src/App.test.js file. The run tests can be performed by executing the commands ‘npm test’ or ‘yarn test’ in your terminal.
Step 4: If the application is for production
If you have built your react application for the deduction you can do the same by inputting the commands stated below in the terminal:
- npm run build, or,
- yarn build
When you execute the command stated above, it will build the application for production into the build folder. Hereafter, your application will be ready for deployment.