Blog_Banner_Asset
    Homebreadcumb forward arrow iconBlogbreadcumb forward arrow iconSoftware Developmentbreadcumb forward arrow iconHow to Install React on MacOS? A Step by Step Guide

How to Install React on MacOS? A Step by Step Guide

Last updated:
25th Apr, 2023
Views
Read Time
8 Mins
share image icon
In this article
Chevron in toc
View All
How to Install React on MacOS? A Step by Step Guide

Introduction to React

React is a free JavaScript library used to develop user interfaces for web applications. You must be wondering what is a JavaScript library. JavaScript libraries consist of pre-existing codes written in JavaScript. These codes can be utilised for carrying out commonly occurring tasks in JS. 

The React setup is easy, and it also helps web developers avoid the tedious and often redundant process of writing codes from scratch. It is in charge of streamlining the development of intricate and interactive applications by enabling web developers to create reusable UI components. 

Web developers often use this framework to develop desktop, mobile, and web apps- which is why, today, we bring you an easy installation guide for getting started with React on your MacOS.

After installing React and starting your journey to build dynamic interfaces, you can further enhance your skills by signing up for the Full Stack Software Development Bootcamp by upGrad and mastering the art that is development!

Ads of upGrad blog

Check out our IT free courses to get an edge over the competition.

Why choose React for web development?

While web developers frequently use React as it is easy to use, various other aspects are at play. Here is a quick list of the several benefits of the React setup:

  • The architecture of React being component-based is one of the reasons. This implies that web developers can break the UIs into smaller, reusable code units. This feature of React makes maintenance seamless and manageable, especially when working on high-stakes and large projects. 
  • The latest upgrades have made the React setup suitable for building not only web applications but also mobile applications for IOS and Android. 
  • Developer tools have now made it easier to edit React code. These tools enable programmers to examine the React component hierarchies in the virtual DOM and make changes per their needs. 
  • The conventional JavaScript frameworks are not easy when it comes to dealing with Search Engine Optimisation (SEO). This is why applications often do not rank well on search engines. React.js applications, on the other hand, can be more easily navigated and indexed by various search engines by enabling server-side rendering of applications. 
  • Testing codes has been made easy with the advent of React.js. Web developers install React.js to debug codes as and when needed. 
  • React is fairly easy to learn. Ample online resources help web developers learn it within just a few weeks. This makes it a popular choice among web developers. 

To be adept in web development and software development, enrol in the Executive Post Graduate Programme in Software Development by upGrad today! 

Check Out upGrad’s Software Development Courses to upskill yourself.

Prerequisites for installing React on MacOS

Installing React on MacOS is simple but comes with a few prerequisites. Here is a checklist you must keep handy before installing React on MacOS:

  • System storage of at least 10GB. 
  • RAM of 4GB. 
  • The latest operating system installed- 10.10 and above. 
  • Speedy internet connection. 

Installing Node.js and NPM

Before delving deeper into the installation of Node.js and NPM, let us break down what they actually are. Node.js is a cross-platform and open-source JavaScript library that can run web apps outside the client’s browser. 

NPM, on the other hand, is the package manager for Node.js and enables open-source web developers to borrow and lend app development packages. 

You need to fulfil a few requirements to download Node.js and NPM on your Mac operating system. You must know the nitty-gritty of the terminal application on your Mac. The next thing you will have to do is, install Homebrew on your device to install Node, avoiding security issues. 

Now, let’s get started!

  • The first step is to start the terminal app and writebrew update’. By doing this, your Homebrew application will be updated with the latest editions of Node. 
  • The next step is to write ‘install node’. After this, Homebrew will download files and get them installed in your system. 
  • Check if both Node and NPM have been successfully downloaded into your system by running the following command:

-Type node -v on the terminal to check if the latest version of Node has been downloaded to your system. 

-Type npm -v to check if the latest version of NPM has been downloaded to your system. 

Understanding the Create-react-app tool

The Create-react is a catalyst when it comes to seamlessly starting React applications on your system. The Create-react app (CRA) automates the process of configuration of files and installation and configuration of build tools. This saves developers a lot of time and effort that they can utilise by focusing on writing codes and building their applications. Here are some of the features of the CRA:

  • A pre-configured development environment with tools like Webpack and Babel
  • A default project structure and organisation
  • A development server with hot reloading for easy development
  • Support for modern JavaScript features like ES6 modules and async/await
  • Automatic code splitting and chunking for faster page loads
  • Built-in support for CSS and Sass

Installing React using Create-react-app

Configuring React manually is a tedious and complicated task. With the help of the Create-react app, you can develop a new React application locally. It automatically handles all the package installations and configuration for us, further simplifying the process. 

A few requirements must be fulfilled before installing React using the Create-react app. You must have a Node version of 8.10 and above and an NPM version of 5.6 and above. Check out how you can install React js using the Create-react app npm:

  • The first step is to install Node.js on your system. You can download the installer for macOS from the Node.js website
  • After successfully installing Node.js, open your terminal and run the following command to install the create-react-app:

npm install -g create-react-app

This command will install create-react-app on your system, and by using this, you will be able to create new React projects on your system.

Setting up a new React project on MacOS

The next step is to set up a new React project on MacOS. Here’s how you should go about it:

  • Once create-react-app is installed, create a new React project by typing out the following command:

create-react-app my-app

You may replace ‘my-app’ with the name of your project. For example, myreactproject1

Running a React app on MacOS

The final step is to run the app on your device. Here’s how you will do it:

  • After successfully creating the project, navigate into the project directory by writing down the code given below:

Cd my-app

  • The next and final step is to start the development server by running the following command:

Nmp start

This will start the development server and open your project on your browser. 

In-Demand Software Development Skills

Exploring the React file structure

Focus on structuring your React file a certain way for the best outcomes. A simple React folder can be structured in the following manner:

Src directory: The application’s source code is contained in the Src directory. The components 

Components directory: Within the src directory, there is the component directory. The component directory stores all the reusable parts that make up the application. 

Pages directory: The pages directory has different application pages, each with its own directory. 

Index.js file: The component for each page is exported in the index.js file for that page. To create their UI, pages can import components from the components directory.

Utils directory: The programme’s utility files, such as api.js and helpers.js, are located in the utils directory. 

Assets directory: The assets directory stores pictures, font files, and everything that does not relate to coding. 

App.js: The programme’s root component, App.js, is the application’s entry point.

Index.js: The React application is mounted to the DOM in index.js.

Ads of upGrad blog

This is one possible React file structure. However, it can be structured in multiple ways based on each project’s unique needs. 

Tips for getting started with React on MacOS

There are a few things that you must keep in mind before getting started with React on MacOS. Here are a few tips:

  • You must have a strong internet connection before installing React on your device.
  • Have a sound knowledge of the command line interface (CLI) on your Mac. React needs you to use CLI commands. 
  • Have a code editor installed. There are various code editors like Visual Studio Code, Sublime Text etc. Choose a code editor that suits you and install it on your device. 
  • Research well on the various versions of React. 
  • Finally, patiently wait for the installation process to complete and follow the instructions well. 

Explore our Popular Software Engineering Courses

Conclusion

Mac is a great option for web developers to create React-based applications. With our in-depth guide, you’ll be able to install and initiate creating optimised web applications within no time! 

If you have a background in computer science and want to upskill yourself due to the changing needs of the current job market, you must opt for the Master of Science in Computer Science by upGrad. This programme is best suited for individuals who want to bag lucrative opportunities as software or backend engineers, enabling them to access leading tech roles in the long run!

Profile

Pavan Vadapalli

Blog Author
Director of Engineering @ upGrad. Motivated to leverage technology to solve problems. Seasoned leader for startups and fast moving orgs. Working on solving problems of scale and long term technology strategy.

Frequently Asked Questions (FAQs)

1Can we use React to build mobile apps on Mac?

Yes, the React native setup can be used to build mobile apps on Mac. However, for a React native environment setup, you might have to install additional software to get started.

2Is using a package manager like Homebrew to install React on Mac mandatory?

While installing package managers like Homebrew to install React js on Mac is not mandatory, it makes the installation process very efficient and seamless. Package managers can also help you handle other software packages on your system.

3How can I debug React on my Mac?

You can use developer tools like ChromeDevTools on your web browser to debug React on your Mac operating system.

Explore Free Courses

Suggested Blogs

What is Composition in Java With Examples
64988
Java is a versatile language that supports object-oriented programming and code reusability with building relationships between two classes. There are
Read More

by Arjun Mathur

19 Feb 2024

Software Engineer / Developer Salary in India in 2024 [For Freshers & Experienced]
907139
Summary: In this article, you will learn about Software Engineer Salary in India based on Location, Skills, Experience, country and more. Today softw
Read More

by Rohan Vats

Top 40 Most Common CSS Interview Questions and Answers [For Freshers & Experienced]
15207
Every industry has started the use of websites and applications to catch up with the pace of the rapidly transforming world. CSS is one of the most cr
Read More

by Rohan Vats

19 Feb 2024

Top 10 Highest Paying Programming Languages In India [2024]
94950
Programmers and Developers are among the highest-paid professionals in the world. They earn six-figure annual salary packages in countries like the US
Read More

by Rohan Vats

19 Feb 2024

Top 12 Highest Paying Online Software Courses in India [2024]
34167
The demand for innovative software products and solutions is at an all-time high, and rest assured, it will only peak higher in the coming years. One
Read More

by Rohan Vats

19 Feb 2024

23 Exciting Software Development Project Ideas & Topics for Beginners [updated 2024]
917677
Summary: In this article, you will learn the 23 Exciting Software Development Project Ideas & Topics for 2023. Take a glimpse below. Android tas
Read More

by Rohan Vats

19 Feb 2024

Must Read 50 OOPs Interview Questions & Answers For Freshers & Experienced [2024]
122300
Attending a programming interview and wondering what are all the OOP interview questions and discussions you will go through? Before attending an inte
Read More

by Rohan Vats

18 Feb 2024

25 Exciting Best Django Project Ideas & Topics For Beginners [2023]
136108
What is a Django Project? Django projects with source code are a collection of configurations and files that help with the development of website app
Read More

by Kechit Goyal

18 Feb 2024

44 Must Know Agile Methodology Interview Questions & Answers: Ultimate Guide 2024
162835
Attending an agile interview and wondering what are all the questions and discussions you will go through? Before attending an agile testing interview
Read More

by Arjun Mathur

18 Feb 2024

Schedule 1:1 free counsellingTalk to Career Expert
icon
footer sticky close icon