O modalitate de a separa JSX de JavaScript

Limbaje de Programare JavaScript / Node
, ,
1

În caz că mai sunt utilizatori de React cu JSX pe aici care urăsc ciorba de JavaScript cu XML…

Am publicat pe Github & npm un loader pentru Webpack care permite separarea logicii unei componente de template-ul ei.

Am pus pe Github în README detalii despre cum se instalează, configurează și folosește. În mare, ideea este următoarea:

  • Se creează un fișier MyComponent.jsx ce exportă o clasă care extinde o componentă React, ca de obicei
  • Se creează un fișier MyComponent.tpl.jsx ce conține blocul JSX care ar fi fost în mod normal în metoda render()
  • În fișierul cu clasa se face var view = require('./MyComponent.tpl.jsx') iar apoi, în metoda render() se face return view(this); în loc de vechiul și odiosul return (<spaghetti><code>Tra la la</code></spaghetti>);
1 Like
2

Ai incercat sa renunti la JSX de tot?

example.jsx

<div>
    <h1>Hello!</h1>

    <input value={this.state.who} onChange={this.update} type="text" />
    <button onClick={this.greet}>Say hi!</button>
</div>

example.js

import { B, Input, Button, H1 } from './elements.js'

const view = B(
  H1('Hello'),
  
  Input({ value: this.state.who, onChange: this.update, type: 'text' }),
  Button({ onClick: this.greet }, 'Say hi'),
)

.
.
.
.

elements.js

import { createClass, createElement, PropTypes } from 'react'


const isString = (value) => (typeof value == 'string')
const isNumber = (value) => (typeof value == 'number')
const isElement = (value) => (
  typeof value === 'object' && value !== null && value.$$typeof
)

const Element = (type) => ((el, ...children) => {
  const args = (isElement(el) || isString(el) || isNumber(el))
             ? [type, null, el]
             : [type, el]

  return createElement.apply(null, args.concat(children))
})


export const B = Element('div') // B from Block, what a div is
export const Input = Element('input')
export const Button = Element('button')
export const H1 = Element('button')
3

Îmi pare rău, dar aș face așa ceva doar dac-aș fi amenințat cu moartea. :slight_smile:

Să ne-nțelegem: detest React. Nu filozofia din spatele lui, doar implementarea. Din păcate, și-a luat atât de mult avânt încât cred că, inevitabil, mă voi lovi de el la un moment dat. Singurul lucru care-l face digerabil pentru mine este JSX . Din păcate, modul în care este folosit (și prezentat prin tutoriale) în prezent este la fel de înapoiat (ca să fiu blând) precum PHP-ul pe care-l vedeam la începători cu ceva ani buni în urmă, când deschideai un fișier și vedeai ceva cod PHP, apoi niște HTML, apoi un query MySQL, poate un pic de HTML construit din string-uri și afișat cu echo…
Nu, mulțumesc!

Orice ar spune unii, React are o problemă imensă cu Separation of Concerns. Degeaba se eschivează și bagă encapsulation în față, nu e așa… Una e descrierea a ce face o componentă (clasa din spate) și alta e descrierea modului în care este afișată (JSX-ul sau codul din exemplul tău).

În fine, răspunsul la întrebarea ta este că aș alege oricând JSX/XML/HTML pentru a descrie o interfață decât o serie de apeluri de funcții…

3 Likes
4

Sugestia ta este mai puțin o soluție la… ceva și mai mult un motiv destul de solid să renunț la tot ce are legătură cu frontend :smiley:

Să sperăm doar că următorul hype nu va continua să meargă în direcția asta, cu css sau html injectate în JS…

Și să-i mulțumim lui Jobs că a ajutat la moartea Flash, altfel am fi văzut FLAX sau SWFX (flash în JS!) :smiley:

1 Like
6

Nu incerc sa va schimb opiniile, eu am invatat un lucru:

the more I learn, the less opinionated I become

Douglas Crockford on HTML & Templating (2016):

1 Like