ReactJS - Konfiguracja środowiska

W tym rozdziale pokażemy, jak skonfigurować środowisko do pomyślnego tworzenia oprogramowania React. Zauważ, że wymaga to wielu kroków, ale pomoże to później przyspieszyć proces tworzenia. Będziemy potrzebowaćNodeJS, więc jeśli nie masz go zainstalowanego, sprawdź łącze z poniższej tabeli.

Sr.No.	Oprogramowanie i opis
1	NodeJS and NPM NodeJS to platforma potrzebna do rozwoju ReactJS. Sprawdź naszą konfigurację środowiska NodeJS .

Po pomyślnym zainstalowaniu NodeJS możemy rozpocząć na nim instalację Reacta za pomocą npm. Możesz zainstalować ReactJS na dwa sposoby

Korzystanie z pakietu webpack i babel.
Używając create-react-app Komenda.

Instalowanie ReactJS za pomocą webpacka i babel

Webpackjest pakietem modułów (zarządza i ładuje niezależne moduły). Pobiera zależne moduły i kompiluje je do pojedynczego (pliku) pakietu. Możesz użyć tego pakietu podczas tworzenia aplikacji za pomocą wiersza poleceń lub konfigurując go za pomocą pliku webpack.config.

Babel to kompilator i transpiler JavaScript. Służy do konwersji jednego kodu źródłowego na inny. Używając tego będziesz mógł używać nowych funkcji ES6 w swoim kodzie, gdzie babel konwertuje go na zwykły stary ES5, który można uruchomić na wszystkich przeglądarkach.

Krok 1 - Utwórz folder główny

Utwórz folder o nazwie reactApp na pulpicie, aby zainstalować wszystkie wymagane pliki, używając polecenia mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Do stworzenia dowolnego modułu wymagane jest wygenerowanie pliku package.jsonplik. Dlatego po utworzeniu folderu musimy utworzyć plikpackage.jsonplik. Aby to zrobić, musisz uruchomićnpm init polecenie z wiersza polecenia.

C:\Users\username\Desktop\reactApp>npm init

Polecenie to pyta o informacje o module, takie jak nazwa pakietu, opis, autor itp. Możesz je pominąć za pomocą opcji –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Krok 2 - zainstaluj React i reaguj dom

Ponieważ naszym głównym zadaniem jest instalacja ReactJS, zainstalowanie go i jego pakietów dom za pomocą install react i react-dompolecenia npm odpowiednio. Możesz dodać pakiety, które instalujemy, dopackage.json plik przy użyciu rozszerzenia --save opcja.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Lub możesz zainstalować je wszystkie w jednym poleceniu jako -

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Krok 3 - Zainstaluj pakiet internetowy

Ponieważ używamy webpacka do generowania pakietu instalacyjnego webpacka, webpack-dev-server i webpack-cli.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Lub możesz zainstalować je wszystkie w jednym poleceniu jako -

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Krok 4 - Zainstaluj babel

Zainstaluj babel i jego wtyczki babel-core, babel-loader, babel-preset-env, babel-preset-act i, html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Lub możesz zainstalować je wszystkie w jednym poleceniu jako -

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

Krok 5 - Utwórz pliki

Aby zakończyć instalację, musimy utworzyć określone pliki, a mianowicie index.html, App.js, main.js, webpack.config.js i,.babelrc. Możesz utworzyć te pliki ręcznie lub za pomocącommand prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Krok 6 - Ustaw kompilator, serwer i programy ładujące

otwarty webpack-config.jsplik i dodaj następujący kod. Ustawiamy punkt wejścia pakietu webpack na main.js. Ścieżka wyjściowa to miejsce, w którym zostanie udostępniona aplikacja w pakiecie. Ustawiamy również serwer deweloperski na8001Port. Możesz wybrać dowolny port.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Otworzyć package.json i usuń "test" "echo \"Error: no test specified\" && exit 1" wewnątrz "scripts"obiekt. Usuwamy tę linię, ponieważ nie będziemy przeprowadzać żadnych testów w tym samouczku. Dodajmystart i build zamiast poleceń.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Krok 7 - index.html

To jest zwykły HTML. Siedzimydiv id = "app" jako element główny naszej aplikacji i dodając index_bundle.js script, który jest naszym dołączonym plikiem aplikacji.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Krok 8 - App.jsx i main.js

To jest pierwszy komponent React. W kolejnym rozdziale wyjaśnimy szczegółowo komponenty Reacta. Ten komponent będzie renderowanyHello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Musimy zaimportować ten komponent i wyrenderować go w naszym katalogu głównym App element, dzięki czemu możemy go zobaczyć w przeglądarce.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Note - Zawsze, gdy chcesz czegoś użyć, musisz importto najpierw. Jeśli chcesz, aby komponent był używany w innych częściach aplikacji, musisz to zrobićexport po utworzeniu i zaimportuj do pliku, w którym chcesz go użyć.

Utwórz plik o nazwie .babelrc i skopiuj do niego następującą zawartość.

{
   "presets":["env", "react"]
}

Krok 9 - Uruchamianie serwera

Konfiguracja jest zakończona i możemy uruchomić serwer, uruchamiając następujące polecenie.

C:\Users\username\Desktop\reactApp>npm start

Pokaże port, który musimy otworzyć w przeglądarce. W naszym przypadku tak jesthttp://localhost:8001/. Po jego otwarciu zobaczymy następujące dane wyjściowe.

Krok 10 - Generowanie paczki

Na koniec, aby wygenerować pakiet, musisz uruchomić polecenie kompilacji w wierszu polecenia jako -

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Spowoduje to wygenerowanie pakietu w bieżącym folderze, jak pokazano poniżej.

Za pomocą polecenia create-react-app

Zamiast używać webpacka i babel, możesz zainstalować ReactJS w prostszy sposób create-react-app.

Krok 1 - zainstaluj aplikację create-react-app

Przeglądaj pulpit i zainstaluj aplikację Create React za pomocą wiersza poleceń, jak pokazano poniżej -

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Spowoduje to utworzenie folderu o nazwie my-app na pulpicie i zainstalowanie w nim wszystkich wymaganych plików.

Krok 2 - Usuń wszystkie pliki źródłowe

Przejrzyj folder src w wygenerowanym folderze my-app i usuń wszystkie zawarte w nim pliki, jak pokazano poniżej -

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Krok 3 - Dodaj pliki

Dodaj pliki z nazwami index.css i index.js w folderze src jako -

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

W pliku index.js dodaj następujący kod

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Krok 4 - Uruchom projekt

Na koniec uruchom projekt za pomocą polecenia start.

npm start