Belajar Reagera JS Bagian 1 : Manuellt Ställa Upp Miljön Reagerar dengan Babel & Webpack

Börja Skriva Kod

1. Skapa ett Nytt Projekt

Öppna terminalen och skapa sedan en ny mapp. Du kan ge mappen ett namn som du vill, här försöker jag skapa en mapp med namnet inställning-att reagera. Efter mapp skapas, gå in i mappen. Kommandot mer eller mindre ut som följande (jag använder en Linux-maskin).

mkdir setup-reagera && cd-installation-reagera

Nästa gör initiering av paket.json, använd följande kommando:

npm init

Vanligtvis visas prompt för att fylla i information om projektet. Du kan ange att fortsätta tills den är färdig.

2. Installation och Kkonfiguration Webpack

Nästa installera Webpack genom terminalen genom att skriva följande kommando och vänta tills slut :

npm install webpack webpack-dev-server-spara-dev

Vi har installerat två paket nämligen webpack i sig och webpack-dev-server – som vi kommer att använda för att köra statisk server i vårt lokala maskinen. Efter Webpack är installerad , måste vi ställa in Webpack att arbeta enligt vad vi behöver.

för Att ställa in beteendet i Webpack, vänligen skapa en fil med namnet webpack.config.js och öppna sedan filen genom redaktörens älskling du, skriv sedan in följande kommando i det:

const path = require('path');
modul.exporten = {
inlägg: "./src/index.js",
effekt: {
path: path.lösa("dist"),
filnamn: "bundle.js"
}
- modul: {
lastare: [
{
- testet: /\.js$/,
loader: "babel-loader",
utesluter: /node_modules/
}
{
- testet: /\.jsx$/,
loader: "babel-loader",
utesluter: /node_modules/
}
]
}
}

i grund och botten, konfiguration av Webpack de mest enkla är generellt formade Objekt och består av 3 delar, nämligen inlägg, utdata, och modul.

  1. inlägg är den viktigaste filen och den första som kommer att genomföras i vår ansökan. I ovanstående kod, den viktigaste filen i vårt program är index.js och det ligger i den mapp src vilket är relativt med filen webpack.config.js så jag använder tecken . (en).
  2. utdata : ställa resultaten av den bunt av hans när de behandlas av Webpack. Här vill jag ställa resultatet senare heter bundle.js och det ligger i mappen dist.
  3. modul : modulen fungerar som en extra processen under processen av kombinationserbjudanden är igång. Här är jag med paketet babel-loader. Om webpack var mänskliga, kanske ljudet av kommandot del modulen på ovanstående kod mer eller mindre ut som följande :

O Webpack, hitta alla filer som slutar med js och jsx men du behöver inte söka upp filen i mappen node_modules. Jag har hittat, jag vill plugin babel-loader använder det för en nanganin dessa filer. Det är det.

Nåväl, nästa vi diskutera Babylon.

3. Installation och Konfiguration av Babylon

Innan du konfigurerar babylon, först installera babel genom att skriva följande kommando i terminalen :

npm install babel-loader babel-core babel-preset-env babylon-preset-reagera-spara-dev

Installnya det är snarare ackord 😂om du är intresserad, mina vänner skulle sluta med att webbplatsen av Babel för att veta mer om dess funktionalitet eller bara vill veta mer paket som är tillgängliga från Babylon.

Samma som Webpack, efter Babel installerat nästa steg är att konfigurera Babylon sig, samt ett sätt är att skapa en fil med namnet .babelrc

I filen .babelrc – ange konfiguration enligt följande :

{
"presets": [
"miljö"
"reagerar"
]
}

tillfället Babel kör (i detta fall babylon är körning i samband med webpack), Babel kommer att söka efter en fil som heter .babelrc – kommer då att läsa den konfiguration som vi satt. I vår konfiguration, vi använder plugin env och reagera, som syftar så att vi kan använda syntaxen i Javascript (ES6) och JSX i vår kod.

4. Installation av Reagera

Webpack redan, Babylon redan, nu är det tur att Reagera. Snälla öppna en terminal och skriv följande kommando :

npm install --spara react react-dom

5. Konfigurationen är Klar

Konfiguration Webpack och Babylon har fått nog. Nästa skapa en mapp med namnet dist och sedan i mappen med att vi försöker skapa en fil index.html. Innehållet i koden mer eller mindre ser ut så här :

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Reagera App Setup</title>
</head>
<kropp>
<div id="root"></div>
<script src="https://cdn.techpress.se/bundle.js"></script>
</kropp>
< html>

Om vi är uppmärksamma på filen ovan, vi bara skapar en enkel html-fil som kräver en fil som heter bundle.js och en div – som har id som heter root.

Reagera Med, vi kan göra ansökan helt och hållet görs med hjälp av Javascript. Alla logiken, användargränssnitt, routing kommer att hantera Javascript, den teknik som är känd som en Enda Sida Ansökan.

Alla Javascript-koden kan vara injicera till en av de html-element. I det här fallet, jag vill att alla Javascript-koden i injicera i div-element som har id root.

6. Kodning Reagera

Efter våra händer smutsiga, slutligen, kan vi kodning Reagera hans 😄

till Att börja med är du välkommen att skapa en mapp med namnet källa och skapa sedan en fil som heter index.js i det. För att visa meningen heliga “Hej Världen”, kod som är följande :

importera Reagerar från "reagerar";
importera ReactDOM från "reagera-dom";
klass App sträcker sig Reagera.Komponent {
rendering() {
tillbaka <h1>Hello World</h1>;
}
}
ReactDOM.render(<App /> dokumentet.getElementById("root"));

mer eller Mindre, fil struktur som vi är nu om , så här :

fil Struktur

7. Kör webpack-dev-server

för att vara praktiska, öppna filen paket.json lägg sedan till följande kommando :

"skript": {
"start": "webpack-dev-server-innehåll-bas". /dist' --hot sant-port 3000"
}

Ändamål som skriptet ovan är att skapa kommandot alias. Så vi skriver bara ner kommando npm start via terminalen, sedan kommandot webpack-dev-server ..blabla – som kommer att utföras.

Tja, kommandot webpack-dev-server ovanstående ställer jag den till servern statisnya fram genom mapp dist (index.html det finns i mappen dist), aktivera de funktioner som ett hot om (så att webpack starta om sig själv automatiskt när det är ändringar i koden), och den port är inställd att använda port 3000.

Filen paket.json jag vara som följande :

{
"namn": "setup-reagera",
"version": "1.0.0"
"description": "",
"största": "index.js"
"skript": {
"start": "webpack-dev-server-innehåll-bas". /dist' --hot sant-port 3000"
},
"author": "",
"licens": "ISC"
"beroenden": {
"reagerar": "^16.2.0"
"reagera-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2"
"babel-preset-env": "^1.6.1"
"babel-preset-reagera": "^6.24.1"
"webpack: "^3.10.0"
"webpack-dev-server": "^2.9.7"
}
}

Eftersom vi redan satt i paket.json, kan vi köra en statisk server henne genom att skriva följande kommando i terminalen :

npm start

öppna Sedan en webbläsare och skriv http://localhost:3000 adressfält. Så resultatet är följande :


räkna>

du Försöker ändra skriva Hello World i filen index.js , kommer webbläsaren reflex och automatisk uppdatering. Detta beror på att vi tidigare uppsättning webpack-dev-server för att aktivera funktionen varmt ladda om.

We will be happy to hear your thoughts

Leave a reply