Read it in 6 Mins
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!
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.
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.
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
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.
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:
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.
In our React project we can run some scripts which are useful for the following tasks:
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
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:
Let’s modify this text a bit, and display hello world. Open the file “App.js” from src folder in your editor.
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.
And that’s it. You have just now created your first React application.
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.
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:
Good To Know about your Build folder
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!
28 Jul 2022
25 Jul 2022
25 Jul 2022
25 Jul 2022
22 Jul 2022
22 Jul 2022