Back to blogs

How to add React to an existing website?

Read it in 6 Mins

Last updated on
17th Mar, 2021
Published
15th Dec, 2020
Views
9,886
How to add React to an existing website?

React, originally created by Facebook, is a popular user interface JavaScript framework which is used for creating front-end applications. It is one of the most popular frameworks used by developers to create fast scalable applications using a declarative approach that ties up JavaScript with an HTML-like syntax known as JSX. 

Building up or setting up React applications requires many dependencies, such as using a compiler or setting up the node and versioning etc.In order to get rid of the above complications and set up SPAs (Single Page applications) in simple steps, a CLI tool named create-react-app was made.  

In this article we will learn how to set up your React app in no time, with an easier approach and without getting into any complications. And what’s more, here, we will not need to configure or install any tools like webpack or Babel.   

Create-React-APP will take care of such things with its preconfigured schema, so that you can only focus on the code and business logic.  

So let’s get started! 

Prerequisites 

Command Line First

In order to use the React CLI (create-react-app), it is good to grasp the command line first. It is used in many ways such as starting the application with create-react-app or using development scripts or building projects.

Installing Node 

We will be using the Node package manager (npm) to start or create an application, so we will need to have Node installed on our computer.  
To check if you have Node installed in your computer, run the below command in your terminal:

node -v

If you have Node installed already in your system, this command will return a version number, like v12.18.2, and if it’s not installed already, kindly follow the mentioned steps in Setting Up Node Locally before moving on the next step. 

What comes up with create-react-app? 

So many developers use create-react-app as an easy starting kit for creating their React app. But surprisingly, many of them do not know about what comes in the starter kit, or how we can utilize it, or why it is even there! 

Let’s take a deep dive and see what’s under the hood! 

  •  It provides us with a recommended starting folder structure. 

 my-app/  //Dummy App Name 
  README.md 
  node_modules/ 
  package.json 
  public/ 
    index.html 
    favicon.ico 
  src/ 
    App.css 
    App.js 
    App.test.js 
    index.css 
    index.js 
    Logo.svg
  • Scripts to run our React application   

These scripts are  normally used to start, run or test the React application. 

(We will learn about these scripts later in our article) 

  • Extensibility 

Ability to extend with Sass, TypeScript, Charts, and more other libraries. 

  • A solid build setup with webpack and Babel 
  • Scripts to bundle for production 
  • ...and much more! 

Steps To Run the Application:  

Now that we have some context about the Create React App and its usage, let’s not waste more time and get started by installing it. 

There are only 3 steps to create and run the application: 

  1. npm init react-app my-new-app 
  2. npm start 
  3. npm run build 

Let’s discuss each one of them in detail. 

Step-1: Installing and Creating a create-react-app  

Though it is quite possible to manually create a new React app also, the Facebook community had already created a Node package for create-react-app to generate a boilerplate version of a React application to make our life easier. 

There are many ways to install create-react-app. We can use any of them as per our ease. 

# using npm (npm 6+) 
# using npx (npm 5.2+) or, 
# using yarn (yarn 0.25+)

Installing create-react-app 

What are you waiting for…? Let’s open up the terminal and run the below command: 

// Using npm 
npm init react-app my-new-app   // my-new-app is the app name 

We can choose any name in the place of “my-new-app”, with only lowercase letters. 

Note:  If you’ve already installed create-react-app globally via npm install -g create-react-app, it is recommended that you uninstall the package first. Run the below command to uninstall the same. 

npm uninstall -g create-react-app  

Once the above step is completed, you will get some quick generic tips on how to use this application: 

# npm start 
# npm run build  
# npm test 
# npm run eject 

Let's now explore what all we can do with our new application.

Step 2: Running the Application Using React Scripts 

In our React project we can run some scripts which are useful for the following tasks: 

  • Running our application for development  
  • Building our application for production  
  • Testing our application if we've created any tests in our project 

Scripts are located inside the package.json, which you can see inside the project folder. 

//package.json file showing scripts block 
"scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test", 
    "eject": "react-scripts eject" 
  },

All the above scripts can be run by using the following commands.

// To start our app for development 
npm start 
npm run start 
yarn start 
  
// To build our app for production 
npm run production 
yarn production 
  
// To test our application 
npm run test 
  
// To Eject our application 
npm run eject

Starting the React App 

We can use the “start” command to start our application for development. Use the below command to run the application. 

npm run start 

This command will start a local server and will open our application for the development in the browser, as shown below:  

Starting the React App

Say Hello World 

Let’s modify this text a bit, and display hello world. Open the file “App.js” from src folder in your editor. 

Starting the React App

Delete the div named App-header! And instead add a new element like Hello world in App.js and save the file.  

It should look like this.

Starting the React App

And that’s it. You have just now created your first React application. 

No Build Setup    

In order to transpile our ES6 code to something that all browsers can read, a webpack or compiler is required.  

Fortunately, Create React App is all configured with webpack and Babel so you don't have to manually set up anything. 

  • Bundling for Production 

Now let’s host our application for users. In order to do so, we need to bundle up all of our code into a few JavaScript files that the browser can load and users can see the running application. There is again a convenient script given by Create-react-App. 

Let's run the following command and see how build files get created. 

// (Bundling this app for production for external servers) 
npm run build 

Once build is finished, there we have a new directory called build/ inside our project.  

 Inside the build folder, there is a file named index,html, and we can use the same file to host on the server. 

To be Noted: In order to build the project, these files must exist with the same filenames: 

  • public/index.html is the page template; 
  • src/index.js is the JavaScript entry point. 

Good To Know about your Build folder  

  • Inside the build directory, you will find all the compiled and minified code which is put into the smallest usable state.  
  • It doesn’t matter if it is readable or not, since this is not a public-facing piece of code. 
  • Inside the build/static directory are all the JavaScript and CSS files.  
  • In each file inside of build/static there is a unique hash of the file contents. 

Conclusion

Create React App is an awesome toolkit  for React developers. I hope you now understand the power of Create React App better.  

As you have seen, there are lots of goodies that come with this toolkit. We can easily configure our own webpack and Babel setups as per our requirement. And if we want more support in terms of UI or to fulfill some business requirements we can easily add support for things like Sass or TypeScript. 

What are you waiting for? Fire that terminal up, install create-react-app, and start building your awesome ideas with this solid base! 

Happy Learning! 

Profile

KnowledgeHut

Author
KnowledgeHut is an outcome-focused global ed-tech company. We help organizations and professionals unlock excellence through skills development. We offer training solutions under the people and process, data science, full-stack development, cybersecurity, future technologies and digital transformation verticals.

Trending Blog

6