Bruker du ReactJS?

[peterpan]

Sitter å leser en del om ReactJS og prøver å lære meg dette.
Så det jeg lurer på er bruker du ReactJS og hva er i så fall din mening?

Noe kult du har laget som du kan vise til?

 

[adeneo]

Bruker React noe, og er stort sett positivt overrasket.

Personlig er jeg sterk motstander av rammeverk som lar deg skrive fullstendig ugyldig HTML, som så rettes opp med store mengder javascript, slik som Angular, som er djevelens verk, og ikke gjør noe nytte for seg etter min mening.

React gjør det samme som Angular, men har den fordelen at ting også kan kjøre på serversiden, noe som gjør at man kan kompilere komponentene i Node.js og dytte de ut som gyldig HTML, og så la React på klientsiden knytte event handlere og oppdatere underveis.

Min mening er altså at React er helt topp i Node, og helt bånn dersom alt kjøres på klientsiden.
Måten ting fungerer på er også langt mer intuitiv enn Angular og andre slike rammeverk, det er enkelt å sette opp ting, oppdatere, legge til event handlere, og med Babel kan man skrive alt i ES2015.

Jeg er ikke voldsomt begeistret for å skrive XML rett i javascript, men man venner seg til det.

Jeg har forøvrig ikke brukt React i noe som helst nyttig enda, og mener at dersom man kan skrive HTML og Javascript på egen hånd, så er rammeverk som React totalt ubrukelige og gjør ting bare mer komplisert, men fiffig å leke med, er det.

 

[peterpan]

Takk for svar @adeneo
Føler også at det å skrive alt direkte i javascript er ganske greit, men jeg ser etter noe for å effektivisere dette litt og da tror jeg at React kan være midt i blinken.

 

[adeneo]

Det er i det minste min mening, at React er det beste alternativet akkurat nå, langt bedre enn Angular, Ember og de andre.

Som nevnt, særlig fordi man kan kompilere komponentene på serversiden, og dytte ut gyldig kode fra serveren, uten at all jobben må gjøres i nettleseren.

 

[kongen]

Som nevnt, særlig fordi man kan kompilere komponentene på serversiden, og dytte ut gyldig kode fra serveren, uten at all jobben må gjøres i nettleseren.

Er reactJS noe ala v8js?

http://php.net/manual/en/book.v8js.php

Er reactJS noe som kan brukes til å dette:

https://www.webforumet.no/forum/threads/måle-høyde-på-div.24755/#post-211353

 

[adeneo]

Nei, V8 er Googles javascript motor, det er den som kjører javascript på alle nettsidene du besøker, dersom du bruker Chrome,

Ettersom motoren er åpen kildekode, er det også den som benyttes i node.js, men det er altså selve motoren som tolker og kjører javascript.

Det du lenker til, er pussig nok en integrering av V8 i PHP, man har altså portet hele javascript motoren til PHP, noe som teknisk sett ikke er noe stress ettersom V8 er skrevet i C++, men det virker litt pussig.

React er et rammeverk som er skrevet i JavaScript, akkurat sånn som jQuery og/eller Angular også er skrevet i javascript.

React skal liksom gjøre det enklere å lage interaktive nettsider, hvor HTML kan hostes opp i hele modeller, direkte som komponenter og klasser, med diverse handlinger osv. som kan gjenbrukes eller lages i løkker og den slags.

Man kan for eksempel gjøre noe sånt

var Knapp = React.createClass({
    getInitialState: function() {
        return {trykket: false};
    },
    handleClick: function(event) {
        this.setState({trykket: !this.state.trykket});
    },
    render: function() {
        var text = this.state.trykket ? 'liker' : 'liker ikke';
    
        return (
            <p onClick={this.handleClick}>Du {text} dette.Klikk her nå!</p>
        );
    }
});

ReactDOM.render( <Knapp/ > , document.getElementById('example'));

Legg merke til hvordan HTML (egentlig XML) er skrevet rett i JavaScipt, dette kalles JSX og er egentlig ganske fiffige greier, og hvordan man så enkelt lager en "toggle" funksjon som automatisk bytter om tekst osv, du kan teste eksemplet her

https://jsfiddle.net/mwhmaLgz/

Ettersom Babel også benyttes, en transpiler som oversetter ES2015, den nye javascript standarden som er i ferd med å innføres i alle nettlesere (og andre steder), så kan vi forsøke å skrive litt ES2015 og se at det også virker.
Dette blir kanskje helt Gresk for noen, men er på vei inn i en nettleser nær deg ...

"use strict"

let a, b;

function test(arg1 = 'test', arg2) {
    b = arg1; a = arg2;
}

let x   = ['Hello', 'World'].map(x => x.toUpperCase());
const y = 'Webforumet';

test(...x);

[a, b] = [b, a];

var o = { [a]: y, b: b };

let arr = Object.keys(o).map(k => k === 'b' ? o[k] : k);

ReactDOM.render(<div>{arr.join(' ')}</div>, document.getElementById('example'));

Her har jeg tatt med litt av hvert, slik som destructuring, dynamiske nøkler, setting av parametere i funksjoner, spread, arrow funksjoner osv.
Sett bort i fra den nederste linjen, som altså er React, er resten helt standard JavaScript (ES2015)

Det meste av dette er allerede støttet i nyeste versjon av V8, som først vil være benyttet i Chrome 49, som er rett rundt hjørnet, men fordi vi bruker Babel kan vi benytte ES2015 syntaks i nettlesere som ikke støtter det enda ..... eksempel

https://jsfiddle.net/mwhmaLgz/3/

 

[kongen]

Jeg får denne til å toggle

https://jsfiddle.net/mwhmaLgz/

men denne vil ikke toggle

https://jsfiddle.net/mwhmaLgz/3/

Er det fordi nettleseren ikke støtter ES2015? Er ikke Firefox 45 glad i Babel?

 

[adeneo]

Den siste der har ikke noe "toggle", det var bare et kjapt eksempel for å benytte en hel del ES2015, som ikke egentlig er støttet i nettlesere enda, men som virker på grunn av Babel.