How To Setup React Environment With NodeJS on your Computer.

Beginner friendly guide to setting up your own react environment from scratch.

Getting started

Introduction

The purpose of this guide is to teach you how to setup a barebones React environment. React is a JavaScript framework for building user interfaces, or the front end, created and maintained by Facebook. React is one of the most popular JavaScript frameworks, and React’s main advantage is that it’s scalable, simple, and fast.

Is This Guide for You?

This guide is created for people who want to setup a barebones react environment from scratch. By having a detailed step by step instructions with visual explanations, you will learn how to setup the environment and build a simple react app.

By the end of this guide, you will

create a react ready environment
customize your own react environment
code a simple react app

Software Versions

This guide is suitable for Windows 10, Linux, macOS user. In order to follow the documentation, you will need to have nodeJS install in your computer, if you don’t have it installed, Get it here.

Prerequisites

Laptop or PC with Windows 10, Linux, or macOS
Bash terminal or bash emulator installed
Latest version of VSCode installed
Latest version of NodeJS installed
Basic knowledge of HTML, CSS, and JavaScript.
Basic understanding of ES6 features.
Basic understanding of how to use the terminal.
Basic understanding of how to use npm.

Typographical Convention

These instruction use the following typographic conventions:

Convention Explanation	Examples
Commands & Actions: We italicize commands or actions you must execute	Copy, paste, Save As, Quit, Return, Press, Click
Menu & Button Sequence: Menu and button will get enclosed by square brackets. The `>` will indicate the button click flow of the buttons or menu.	[File] > [New File]
Windows: General window and Dialog window will get enclosed by double quotation mark	“Terminal”
Single line of Code: Code that runs within the terminal will get highlighted	`npm i nodemon --save-dev`
Software: Software that needs to be downloaded in local machine will get enclosed by rounded brackets	(nodemon)
File Name: File name that needs to be modified in your local machine will get bolded.	App.js, package.json

Note & Warning message

This guide uses notes and warning message to convey additional information about an instructional step.

Note: Notes provide additional information about a step. The message will be enclosed in a 2px width solid line box, and the note icon is an "i" inside a hollow circle.

Warning: Warnings provide information about instructions that can cause an error or permanent data loss. The message will be enclosed in a 2px wide dashed box, and the warning icon is an "!" inside a red triangle and red circle.