Setup React Workspace - rimander123/react-js-training-course GitHub Wiki

Playgrounds

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need.

Online Playgrounds

If you’re interested in playing around with React, you can use an online code playground.

Local Playground

If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos.

Local Development Setup

Prerequisites

Install Create React App from CLI

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

With NodeJS/NPM installed on your machine, you can just run the following command:
npm install -g create-react-app

It is recommended to install create-react-app globally so that it can be used at any location and for creating multiple React projects.

Create a New React App

Now that we have create-react-app installed, we can create a new app by simply running the following command:
npx create-react-app my-app

The above will create a new directory, my-react-tutorial-app, and will contain the boilerplate for our application.
The project layout should look like this:

β”œβ”€β”€ README.md
β”œβ”€β”€ node_modules
β”œβ”€β”€ package.json
β”œβ”€β”€ .gitignore
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ index.html
β”‚   └── manifest.json
└── src
    β”œβ”€β”€ App.css
    β”œβ”€β”€ App.js
    β”œβ”€β”€ App.test.js
    β”œβ”€β”€ index.css
    β”œβ”€β”€ index.js
    β”œβ”€β”€ logo.svg
    └── serviceWorker.js

Above, we see the basic required files for our app. Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, we will talk about them in other section.

Start Developer Server

We can start a development server for your project by simply running the following command on your project path:
npm start This will start the development server and open http://localhost:3000 so you can test your project code.

Additional NPM Commands

Next: ReactJS Terms and Key Components