How to install react

Установка React напрямую в Windows

В этом руководстве описывается, как напрямую установить React в Windows с помощью цепочки инструментов create-react-app.

Мы рекомендуем следовать этим инструкциям, если вы не знакомы с React. Если вы создаете одностраничное приложение (SPA), которое должно использовать команды или средства Bash, или планируете развертывание на сервере Linux, мы рекомендуем установить create-react-app в подсистеме Windows для Linux (WSL).

Дополнительные сведения о React, выборе между React (веб-приложения), React Native (мобильные приложения) и React Native для Windows (классические приложения) см. в статье Общие сведения о React.

Предварительные требования

Создание приложения React

Чтобы установить всю цепочку инструментов React в WSL, мы рекомендуем использовать create-react-app:

Откройте окно терминала (командная строка Windows или PowerShell).

Установите React с помощью средства create-react-app, которое устанавливает все зависимости для создания и запуска полноценного приложения React.js:

npx — это средство запуска пакетов, используемое npm для выполнения пакетов без глобальной установки. Оно по сути создает временную установку React, чтобы в каждом новом проекте использовалась последняя версия React (а не текущая версия, как при глобальной установке). Использование средства запуска пакетов npx для выполнения пакета также минимизирует вероятность установки нескольких пакетов на компьютере.

Запустите новое приложение React:

Эта команда запустит сервер Node.js и откроет новое окно браузера с приложением. Вы можете использовать клавиши CTRL+С, чтобы прерывать выполнение приложения React в командной строке.

Create React App включает в себя конвейер сборки интерфейсной части с использованием Babel и webpack, но не работает с серверной логикой или базами данных. Если вы хотите создать веб-сайт, поддерживающий отрисовку на сервере, с помощью React и серверной части Node.js, рекомендуем установить Next.js вместо средства create-react-app, которое в большей мере предназначено для одностраничных приложений. Вы также можете установить Gatsby, если хотите создать статический веб-сайт, ориентированный на содержимое.

How to Install ReactJS on Windows?

Features of React:

Installation Reactjs on Windows:

Step 1: Install Node.js installer for windows. Click on this link. Here install the LTS version (the one present on the left). Once downloaded open NodeJS without disturbing other settings, click on the Next button until it’s completely installed.

Install the 14.18.1 LTS

Step 2: Open command prompt to check whether it is completely installed or not type the command –>

Node Version is v14.15.3

If the installation went well it will give you the version you have installed

Step 3: Now in the terminal run the below command:

Installation will take few seconds

It will globally install react app for you. To check everything went well run the command

If everything went well it will give you the installed version of react app

Step 4:Now Create a new folder where you want to make your react app using the below command:

Note: The newfolder in the above command is the name of the folder and can be anything.

Move inside the same folder using the below command:

Step 5: Now inside this folder run the command –>

It will take some time to install the required dependencies

Step 6: Now open the IDE of your choice for eg. Visual studio code and open the folder where you have installed the react app newolder (in the above example) inside the folder you will see your app’s name reactapp (In our example). Use the terminal and move inside your app name folder.Use command cd reactapp (your app name)

Step 7: To start your app run the below command :

Once you run the above command a new tab will open in your browser showing React logo as shown below :

Congratulation you have successfully installed the react-app and are ready to build awesome websites and app

Install React directly on Windows

This guide will walk through installing React directly on Windows using the create-react-app toolchain.

We recommend following these instructions if you are new to React and just interested in learning. If you are creating a single-page app (SPA) that you would like to use Bash commands or tools with and/or plan to deploy to a Linux server, we recommend that you install with create-react-app on Windows Subsystem for Linux (WSL).

For more general information about React, deciding between React (web apps), React Native (mobile apps), and React Native for Windows (desktop apps), see the React overview.

Prerequisites

Create your React app

To install the full React toolchain on WSL, we recommend using create-react-app:

Open a terminal(Windows Command Prompt or PowerShell).

Install React using create-react-app, a tool that installs all of the dependencies to build and run a full React.js application:

npx is the package runner used by npm to execute packages in place of a global install. It basically creates a temporary install of React so that with each new project you are using the most recent version of React (not whatever version was current when you performed the global install above). Using the NPX package runner to execute a package can also help reduce the pollution of installing lots of packages on your machine.

Start your new React app:

This command will start up the Node.js server and launch a new browser window displaying your app. You can use Ctrl + c to stop running the React app in your command line.

Create React App includes a frontend build pipeline using Babel and webpack, but doesn’t handle backend logic or databases. If you are seeking to build a server-rendered website with React that uses a Node.js backend, we recommend installing Next.js, rather than this create-react-app installation, which is intended more for single-page apps. You also may want to consider installing Gatsby if you want to build a static content-oriented website.

When you’re ready to deploy your web app to production, running npm run build will create a build of your app in the «build» folder. You can learn more in the Create React App User Guide.

How to Install React.js with create-react-app

React is one of the most popular JavaScript libraries in the web development field today.

As a Frontend Developer, I have personally worked with React in my projects and probably will continue to work with it in the future. One of the steps that many people struggle with is the installation/configuration process of React.

So let’s start with the basics. In this post, you are going to learn how to install and run a React application the easy way.

Since interest in learning React is also increasing rapidly day by day, I have also decided to create video tutorials about React on my YouTube channel. Here’s a video version of this tutorial:

How to Download & Install Node.js

First of all, you are going to need NPM (or Yarn, alternatively). Let’s use NPM for this example.

If you don’t have it installed on your system, then you need to head to the official Node.js website to download and install Node, which also includes NPM (Node Package Manager).

Node.js’ official website

Select the «Recommended For Most Users» button and download the current version for your operating system.

Your version of NPM should be at least 5.2.0 or newer because create-react-app requires that we have NPX installed. If you have an older version of NPM, run this command to update it:

What is create-react-app?

Since it is complicated and takes a lot of time, we don’t want to configure React manually. create-react-app is a much easier way which does all the configuration and necessary package installations for us automatically and starts a new React app locally, ready for development.

Another advantage of using create-react-app is that you don’t have to deal with Babel or Webpack configurations. All of the necessary configurations will be made by create-react-app for you.

According to the React documentation, create-react-app is one of the officially supported ways to create single-page applications in React. You can find other ways here.

How to Install Create-React-App

In order to install your app, first go to your workspace (desktop or a folder) and run the following command:

The installation process may take a few minutes. After it is done, you should see a folder that appears in your workspace with the name you gave to your app.

Note: If you’re on Mac and receiving permission errors, don’t forget to be a super user first with the sudo command.

How to Run the App You Created with Create-React-App

After the installation is completed, change to the directory where your app was installed:

and finally run npm start to see your app live on localhost:

If you see something like this in your browser, you are ready to work with React. Congratulations! 🙂

Thank you for reading!

Front-end Developer // Follow Me on Youtube: https://bit.ly/3dBiTUT

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

deepbag/How-to-install-React-in-Windows

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Follow on Social Media 👋

In this tutorial, we’ll introduce you to how you ca install react in window from scratch. We’ll make use of the create-react-app CLI tool to quickly generate a React Project.

Step 1: Install Node.js

The first step is to download the Node.js installer for Windows. Let’s use the latest Long Term Support (LTS) version for Windows and choose the 32-bit 64-bit version, using the Windows Installer icon: Download

Once downloaded, we run the Node.js installer complete the installation.

Step 2: Open a Command Prompt in Windows

Install Create-React-App package to simplify the process of creating and installing React into your projects. type in the following command :

When using create-react-app ensure you are in the desired directory/folder location as this command will create the project folder in the current path.

Command for creating project:

The entire process is automated and begins with creating a new React app folder for the project, then installs packages and dependencies. The default packages include react, react-dom, and react-scripts. The installation will take a few minutes.

Run a React Project Application:

To run our new project, we need to use the command prompt to change to the project folder, then start it. The cd your-project-name command will take us to the your-project-name

The npm start command will run the project application:

Next, the default browser will open and load the project:

You now have your environment set for building out projects!

About

In this tutorial, we’ll introduce you to how you ca install react in the window from scratch. We’ll make use of the create-react-app CLI tool to quickly generate a React Project.