React Handledning => Komma igång med React

Anmärkningar

React är ett deklarativt, komponentbaserat JavaScript-bibliotek som används för att skapa användargränssnitt.

För att uppnå MVC-ramverk som funktionaliteter i React, använder utvecklarna det tillsammans med en Flux- smak, t.ex. Redux .

versioner

Version	Utgivningsdatum
0.3.0	2013/05/29
0.4.0	2013/07/17
0.5.0	2013/10/16
0.8.0	2013/12/19
0.9.0	2014/02/20
0.10.0	2014/03/21
0.11.0	2014/07/17
0.12.0	2014/10/28
0.13.0	2015/03/10
0.14.0	2015/10/07
15.0.0	2016/04/07
15.1.0	2016/05/20
15.2.0	2016/07/01
15.2.1	2016/07/08
15.3.0	2016/07/29
15.3.1	2016/08/19
15.3.2	2016/09/19
15.4.0	2016/11/16
15.4.1	2016/11/23
15.4.2	2017/01/06
15.5.0	2017/04/07
15.6.0	2017/06/13

Installation eller installation

ReactJS är ett JavaScript-bibliotek som finns i en enda react-<version>.js som kan inkluderas på vilken HTML-sida som helst. Folk installerar ofta React DOM-bibliotekets react-dom-<version>.js tillsammans med huvudreaktfilen:

Grundläggande inkludering

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

För att få JavaScript-filerna, gå till installationssidan för den officiella React-dokumentationen.

React stöder också JSX-syntax . JSX är en tillägg skapad av Facebook som lägger till XML-syntax till JavaScript. För att kunna använda JSX måste du inkludera Babel-biblioteket och ändra <script type="text/javascript"> till <script type="text/babel"> för att översätta JSX till Javascript-kod.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

Installera via npm

Du kan också installera React med npm genom att göra följande:

npm install --save react react-dom

För att använda React i ditt JavaScript-projekt kan du göra följande:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Installation via garn

Facebook släppte sin egen paketchef som heter Yarn , som också kan användas för att installera React. När du har installerat Garn behöver du bara köra det här kommandot:

yarn add react react-dom

Du kan sedan använda React i ditt projekt på exakt samma sätt som om du hade installerat React via npm.

Hej världskomponent

En React-komponent kan definieras som en ES6-klass som utökar basen React.Component klassen. I sin minimala form måste en komponent definiera en render som anger hur komponenten ska återges till DOM. render returnerar React-noder, som kan definieras med JSX-syntax som HTML-liknande taggar. Följande exempel visar hur man definierar en minimal komponent:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

En komponent kan också ta emot props . Dessa är egenskaper som har övergått av dess överordnade för att ange några värden som komponenten inte kan känna av sig själv; en egenskap kan också innehålla en funktion som kan anropas av komponenten efter att vissa händelser inträffar - till exempel kan en knapp få en funktion för sin onClick egenskap och ringa den när den klickas. När du skriver en komponent kan dess props nås via props objektet på själva komponenten:

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

Exemplet ovan visar hur komponenten kan göra en godtycklig sträng överförd till name prop av dess överordnade. Observera att en komponent inte kan modifiera rekvisita som den får.

En komponent kan återges inom vilken annan komponent som helst, eller direkt till DOM om det är den översta komponenten, med ReactDOM.render och förse den med både komponenten och DOM-noden där du vill att React-trädet ska återges:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

Nu vet du hur man gör en grundkomponent och accepterar props . Låt oss ta detta ett steg längre och införa state .

För demos skull, låt oss göra vår Hello World-app, visa bara förnamnet om ett fullt namn ges.

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

Obs: Varje komponent kan ha sitt eget tillstånd eller acceptera sitt föräldrars tillstånd som en rekvisita.

Codepen-länk till exempel.

Hej världen

Utan JSX

Här är ett grundläggande exempel som använder Reacts huvud-API för att skapa ett React-element och React DOM API för att återge React-elementet i webbläsaren.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Med JSX

Istället för att skapa ett React-element från strängar kan man använda JSX (en Javascript-förlängning som skapats av Facebook för att lägga till XML-syntax till JavaScript), som gör det möjligt att skriva

var rElement = React.createElement('h1', null, 'Hello, world!');

som motsvarande (och lättare att läsa för någon som är bekant med HTML)

var rElement = <h1>Hello, world!</h1>;

Koden som innehåller JSX måste bifogas i en <script type="text/babel"> tagg. Allt inom den här taggen omvandlas till vanligt Javascript med hjälp av Babel-biblioteket (som måste inkluderas utöver React-biblioteken).

Så till slut blir exemplet ovan:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Vad är ReactJS?

ReactJS är en öppen källkod, komponent baserad främre änden bibliotek ansvarig endast för vyn skiktet av ansökan. Det underhålls av Facebook.

ReactJS använder virtuell DOM-baserad mekanism för att fylla i data (vyer) i HTML DOM. Den virtuella DOM fungerar snabbt med att det bara ändrar enskilda DOM-element istället för att ladda om komplett DOM varje gång

En React-applikation består av flera komponenter som var och en ansvarar för att mata ut en liten återanvändbar HTML-bit. Komponenter kan kapslas in i andra komponenter så att komplexa applikationer kan byggas av enkla byggstenar. En komponent kan också upprätthålla internt tillstånd - till exempel kan en TabList-komponent lagra en variabel som motsvarar den för närvarande öppna fliken.

React tillåter oss att skriva komponenter med ett domänspecifikt språk som heter JSX. JSX tillåter oss att skriva våra komponenter med HTML, samtidigt som vi blandar in JavaScript-händelser. React kommer internt att konvertera detta till en virtuell DOM och kommer i slutändan att mata ut vår HTML för oss.

React " reagerar " för att ange ändringar i dina komponenter snabbt och automatiskt för att återlämna komponenterna i HTML DOM genom att använda den virtuella DOM. Den virtuella DOM är en representation i minnet av en verklig DOM. Genom att göra det mesta av behandlingen inuti den virtuella DOM snarare än direkt i webbläsarens DOM, kan React agera snabbt och bara lägga till, uppdatera och ta bort komponenter som har ändrats sedan den senaste renderingscykeln inträffade.

Hej värld med statslösa funktioner

Statslösa komponenter får sin filosofi från funktionell programmering. Som innebär att: En funktion returnerar hela tiden samma sak exakt på vad som ges till den.

Till exempel:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

Som du kan se av exemplet ovan att statelessSum är alltid kommer att returnera samma värden givna a och b. Men statefulSum-funktionen kommer inte att returnera samma värden med tanke på inga parametrar. Denna typ av funktionens beteende kallas också som en biverkning . Sedan påverkar komponenten något bortom.

Så det rekommenderas att använda statslösa komponenter oftare, eftersom de är biverkningsfria och alltid skapar samma beteende. Det är vad du vill vara ute efter i dina appar eftersom fluktuerande tillstånd är det värsta fallet för ett underhållbart program.

Den mest grundläggande typen av reagerande komponent är en utan tillstånd. Reagera komponenter som är rena funktioner för deras rekvisita och inte kräver någon intern statushantering kan skrivas som enkla JavaScript-funktioner. Dessa sägs vara Stateless Functional Components eftersom de endast är en funktion av props utan att ha något state att hålla reda på.

Här är ett enkelt exempel för att illustrera begreppet en Stateless Functional Component :

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

Observera att allt som den här komponenten gör är att göra ett h1 element som innehåller name prop. Denna komponent håller inte koll på något tillstånd. Här är också ett ES6-exempel:

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

Eftersom dessa komponenter inte kräver en stödinstans för att hantera tillståndet har React mer utrymme för optimeringar. Implementeringen är ren, men hittills har inga sådana optimeringar för statslösa komponenter implementerats .

Skapa React-app

create-react-app är en React app-panneplattgenerator skapad av Facebook. Det ger en utvecklingsmiljö konfigurerad för enkel användning med minimal inställning, inklusive:

ES6 och JSX transpilering
Dev-server med omladdning av het modul
Kod fodring
CSS-automatisk prefixing
Bygg skript med JS, CSS och bildpaket och sourcemaps
Ram för jesttestning

Installation

Installera först skapa-reagera-appen globalt med node-pakethanteraren (npm).

npm install -g create-react-app

Kör sedan generatorn i din valda katalog.

create-react-app my-app

Navigera till den nyskapade katalogen och kör startskriptet.

cd my-app/
npm start

Konfiguration

create-react-app är avsiktligt inte konfigurerbar som standard. Om icke-standardanvändning krävs, till exempel för att använda ett kompilerat CSS-språk som Sass, kan eject-kommandot användas.

npm run eject

Detta tillåter redigering av alla konfigurationsfiler. OBS! Detta är en irreversibel process.

alternativ

Alternativa reaktionspanneplattor inkluderar:

Build React-app

Kör följande kommando för att bygga din app för produktion klar

npm run build

Absoluta grunder för att skapa återanvändbara komponenter

Komponenter och rekvisita

Eftersom React endast rör sig om en applikations åsikt, kommer huvuddelen av utvecklingen i React att vara skapandet av komponenter. En komponent representerar en del av visningen av din applikation. "Props" är helt enkelt de attribut som används på en JSX-nod (t.ex. <SomeComponent someProp="some prop's value" /> ) och är det primära sättet för vår applikation att interagera med våra komponenter. I utdraget ovan, inuti SomeComponent, skulle vi ha åtkomst till this.props , vars värde skulle vara objektet {someProp: "some prop's value"} .

Det kan vara användbart att tänka på React-komponenter som enkla funktioner - de tar input i form av "rekvisita" och producerar output som markering. Många enkla komponenter tar detta ett steg längre och gör sig själva till "Pure Functions", vilket betyder att de inte ger bieffekter och är idempotenta (med en uppsättning ingångar kommer komponenten alltid att producera samma utgång). Detta mål kan formellt upprätthållas genom att faktiskt skapa komponenter som funktioner, snarare än "klasser". Det finns tre sätt att skapa en React-komponent:

Funktionella ("statslösa") komponenter

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass ()

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

ES2015 klasser

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Dessa komponenter används på exakt samma sätt:

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

Ovanstående exempel ger alla identisk markering.

Funktionella komponenter kan inte ha "tillstånd" i sig. Så om din komponent måste ha ett tillstånd, gå sedan till klassbaserade komponenter. Se Skapa komponenter för mer information.

Som en sista anmärkning är reaktionsrekvisita oföränderliga när de har skickats in, vilket betyder att de inte kan modifieras inifrån en komponent. Om föräldern till en komponent ändrar värdet på en rekvisita, reagerar hanteringen av att ersätta de gamla rekvisita med den nya, kommer komponenten att återlämna sig själv med de nya värdena.

Se Tänkande i reaktiva och återanvändbara komponenter för djupare dyk i förhållandet mellan rekvisita och komponenter.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

React Handledning
Komma igång med React

Sök…