React is a JavaScript library that lets you build user interfaces and web apps. It has been used to build many popular websites like Facebook, Instagram, and Netflix. React takes the power of views in other frameworks but instead of manipulating DOM elements it creates virtual DOM objects with virtual representations of the element contents wrapped as stateful components that can be shared across the app. This means you have a declarative API to organize your code in a clean way without messy imperative logic.
Tools needed to create app with react
The tools that are needed to create an app with react.
In this section, we will discuss about the tools that are needed to create an app with React. In order to do that, we will first list the tools and then discuss about them.
A text editor is a program used for editing text files such as source code written in a programming language or in markup languages like HTML or XML. It typically provides facilities for editing and saving files, searching through files for a given string, and replacing text found within them. Text editors usually come equipped with features that allow the user to perform operations on multiple files at once, such as comparing two documents side by side.
There are some tools that are required to create an app with react. These tools include:
React Native: One of the most popular way to build an app with react
Webpack: JavaScript bundle manager that helps in creating complex web apps with less effort
JSX/JSX transpiler: JSX is a syntax extension for JavaScript, it helps in building reusable components for your product.
Step 1. How to Install Create React App
To install Create React App in your machine so that you can start coding.
The following steps will help you install the create react app:
- Download and Install Node.js
- Download and Install Node Package Manager
- Install Create React App globally on your machine from official website.
- The templates are a big time-saver because they include all of the configurations needed for your app: environment configuration and project scaffolding with webpack, Babel, ESLint, and some other dependencies preconfigured
npx create-react-app applicationName
cd applicationName
npm startStep 2. Reviewing the Project Structure
To review a project file structure in Create React App, we need to view the project files that are in the app.
When you create a new project, it will be created with a default folder structure. If you want to review the file structure in your new app, you’ll need to move your files and folders around.
In order to review how things work in your new app, follow these steps:
1- Open the terminal or command prompt and navigate to the folder where your compiled app is located.
2- Navigate into the /node_modules/react-scripts/build/ directory. This is where all of npm’s output is placed by default.
3- You should see a bunch of directory and file names; these are all of your dependencies that were installed with npm
You will see some of the default folders and files while creating a new project:
my-react-app
├── README .md
├── node_modules
├── package.json
├── .gitignore
├── public
└── src
What are the use of each folders and files mention above:
README .md – A README.md file is a plain text file that is included at the root directory of your project. It contains information on how to build and run your app as well as common issues people might encounter while developing your app.
The purpose of a README.md file is to provide instructions on how to build and run the application, common problems and solutions, as well as any other relevant information that developers would like to share with the world.
node_modules – The purpose of a node modules file for the create react app is to store all the required modules that you might need during development. It’s not just used in creating applications but also in setting up environments for production and testing.
A node modules file can be found in the app directory but it must be named index.js. It should contain a list of all the required dependencies that you are going to use in your application or any other module or package that you might want to import into your codebase for development purposes.
package.json – With the help of package.json file, you can configure your react project for different purposes such as deploying to native platforms.
Package.json is a configuration file for Node packages that contains metadata about the project and lists dependencies needed by any given package. It is an important part of any React application and it also enables support for other applications to be built on top of your application without having to rebuild it from scratch every time you want to make a change in its source code.
Package.json file is the main file which is responsible for the application’s package. It contains information about what packages are needed to run the application and how they are installed.
Package: {
"name": "my-app",
"version": "1.0.0",
"description": "My Application",
"author": "Amit Kumar Batra [email protected]",
"license": "MIT",
"private": true, }
.gitignore – The purpose of .gitignore file is to ignore files or directories that you don’t want git to track or commit changes for.
In the .gitignore file, you can specify files and directories that are ignored by Git and Git will not track their changes. This means that they won’t be committed in your repository. A .gitignore file helps us to keep our project clean and organized. The .gitignore can also be used to prevent the accidental inclusion of some files in the repository such as .DS_Store, which can cause issues when trying to develop on Mac computers.
public – In a create react app, the public folder comes in handy when you need to share files. It allows you to share files with other people of your team as well as users outside your organization.
When it comes to public folders, there are two types – the default root folder and a custom one that is created for each user. The difference between the two is that the default root folder makes changes in your app’s store-bought code, while the custom one doesn’t and can only be seen by its creator.
src – The purpose of src folder in create react app is that it is where you keep all your code for your app. Because every single file that creates your react app will be put in this folder, it makes sense to have a name for this folder.
Step 3. How to Run your React Project
To get your React project running, open up a terminal (in VSCode, view > Terminal) then type in: “npm start”.
npm startWhen we run our project, a new browser tab will automatically open on our computer’s default browser to view our web app.
The development server will start up on local-host :3000. The home page for the application will appear immediately.
Step 4. How to Run Tests with the React Testing Library
The React Testing Library is a replacement for the Jest testing library that was introduced to the React ecosystem in 2018. The library provides a way to create tests using JSX-based API.
The React Testing Library is used by developers to writing unit tests with the testing library. It can also be used for functional, integration and end-to-end tests. It provides a set of APIs for writing React test components, as well as for running these tests on different browsers.
To run a test in the React Testing Library, you need to use the shallowCompare() function. The shallowCompare() function allows you to compare two objects of different types.
A React Test is a way to easily write tests for your React components while maintaining and sharing your code with other developers.
This library provides you with a redux-testing-library wrapper that makes it easy to create unit tests in JSX by testing one or more react components.
npm testStep 5. How to Change the App’s Meta Data
There are two ways to change the Meta Data of an Android app.
The first way is through the manifest. This is the file that contains all the information about your app and its features. You can find this file in your app’s folder. The second way is through Marshmallow’s App Ops settings, which can be found in Settings -> Apps -> App name -> App info -> Search for “App meta data”.
Highlights: API level 23 or above of Marshmallow allows apps to change their own meta data if they have a manifest or App Ops setting for it.
const meta = {
title: 'Meta Title',
description: 'Description Will Come Here',
canonical: 'PATH WILL COME HERE',
meta: {
charset: 'utf-8',
name: {
keywords: 'react,meta,document,html,tags'
}
}Step 6. How to Work with Images and Other Assets
The create-react-app is a web framework to produce code for React applications. Images and other assets are used in many different ways throughout the application.
There are two ways to add images:
1) You can use a plugin such as react-image2 or react-snapshot to generate an asset URL on the fly, which you can use when you need to add an image without needing to import it into your project.
2) You can import your own images in either data/images or public/images and then reference them via inline styles like this:
Step 7. How to Install Dependencies?
React apps are built off of the JavaScript library called React. Each react app has a set of dependencies that need to be installed for your project to run.
These dependencies can be created by any third party library or framework and installed with npm install in the terminal. You can also install them manually from a CDN, but this is not recommended as it involves downloading a lot of code from different servers.
Installing dependencies is a relatively simple process, and should not be difficult for someone who has experience with web development.
The first step would be to install an npm package. This could be done with the following command:
npm install — save react-dom-factories
npm install — save react-router-flux
npm install — save react-router
npm install — save babel
npm install — save eslint
…and so on.
Step 8. How to Import Components?
Importing is a process of adding a React component that is not found in the project’s local state or in its dependencies. It is usually done when you want to share your code with another project and would like to use their components as well.
In order to do this, you need to make sure that your imported component has the same name and package as it does in the importing project; otherwise, React won’t know what you are talking about and will skip it. Otherwise, if your imported component does not have the same name and package as it does in the importing project, then you should specify which version of the imported component you would like React to use.
To import components, we need to do two things. First, we need to make sure that it is registered and accessible in the React app. Secondly, we need to import it in the app.
To register a component:
– Go to your project directory and create a new file “registration.js” and put the following code inside:
To import components:
– Go to your project directory and create a new file “index.js” and add the following lines of code after ReactDOM.render() command:
import COMPONENT_NAME from 'PATH/COMPONENT'Step 9: How to Style our App with CSS?
With the increasing popularity of React, it’s time to learn how to style our create react app with CSS.
There are two ways of styling your create react app with CSS. We can either use the CSS in stylesheet or inline styles. To make it simple, let’s start by explaining inline styles:
Inline styling is when a style sheet is included in the HTML code and is called without any other file name extension. When we include inline styles in our HTML code, then we need to use the following code:
{please write all external CSS code}
Step 10. How to Build the App and Publish It?
App development entails a lot of different steps. After deciding on features and the general direction, you must write out all of your commands to build the application, and command: “npm run build”.
This command will create an optimized production build for our project and will output what files it has generated & how large each file is:
Compiled successfully.
“File sizes after gzip:
46.62 KB build/static/js/2.1500c654.chunk.js
1.59 KB build/static/js/3.8022f77f.chunk.js
1.17 KB build/static/js/runtime-main.86c7b7c2.js
649 B build/static/js/main.ef6580eb.chunk.js
430 B build/static/css/main.5ae9c609.chunk.css”
The output is coming from the build tool Webpack.
Each chunk contains a unique string or hash to make sure any new deployment is not saved by the browser.
If we did not have a cache-busting hash for each of our files, we likely couldn’t see any changes that we made to our app.
Finally, it is possible to run your built React project locally with the help of the npm package serve.
