Structura proiect pentru React

Limbaje de Programare JavaScript / Node
1

Buna,

As dori sa fac o componenta in React, de exemplu Navigation, insa nu stiu cum sa structurez proiectul. Nu am mai lucrat cu React. As vrea sa folosesc gulp (cu pachetele specifice pentru react, sass, etc)

Cei de la Meteor folosesc: components => navigation => navigation.js, navigation.scss, navigation.html, package.json.
Este in regula sa tin in acelasi folder toate fisierele? Pe viitor as dori sa existe posibilitatea ca acea componenta specifica sa poate fi exportata.

|   +---components
|   |        |
|   |        +---navigation
|   |                 navigation.html
|   |                 navigation.js  
|   |                 navigation.scss
|   |                 package.json

Multumesc.

2

Un pic off topic: de ce ai ales React?

Cat depre structura se pare ca esti pe drumul cel “bun”:

AFAIK there’s no Right way™ to do it.

2 Likes
3

Multumesc @dakull pentru raspuns.
Asa s-a stabilit de catre managerul de proiect (React VS Angular, React avand mai multe avantaje, gen Virtual DOM). Se vrea sa se construiasca o componenta asa incat la un moment dat sa fie permisa extinderea ei de catre altcineva, sa o customizeze in functie de ce are nevoie.

1 Like
4

As mai avea o intrebare: care este modul optim, preferat pentru a crea o componenta?

class Navigation extends React.Component {
   render() {
      return (
         <div>
            <h1>Navigation</h1>
         </div>
      );
   }
}

SAU

var Navigation = React.createClass({
    render: function(){
        return (
            <div class="navigation">
                <h1>Navigation</h1>
            </div>
        )
    }
});

ReactDOM.render(<Navigation />, document.getElementById('container'));

Pe siteul oficial se merge pe varianta 2 insa altii pe varianta 1:
http://www.tutorialspoint.com/reactjs/reactjs_components.htm

5

Ce folosesti pt. build? Folosesti Babel / ES6?

Pt. structura citeste: Smart vs Dumb components

Dumb component (just a function):

// components/navigation/index.js

export default ({ label, items }) => {
  items = items.sort(byDate)

  return (
    <div class="navigation">
      <h1>{ label }</h1>
      { items.map((item, i) => {
        return <a href="{ item.url }" key={ i }>item.label</a>
      }) }
    </div>
  )
}

Smart component:

// components/navigation/index.js

export default React.createClass({
  render () {
    const { label, items } = this.props

    return (
      <div class="navigation">
        <h1>{ label }</h1>
        { items.map((item, i) => {
          return <a href="{ item.url }" key={ i }>item.label</a>
        }) }
      </div>
    )
  }
})

Structura de folders:

package.json - tine-l in root, unde se afla si components

components/navigation:

  • index.js
  • style.css (sau .scss)

Mai sus am folosit key={ i }, aici explica despre key in React.js

2 Likes
6

Multumesc frumos pentru raspunsuri.
Da, am optat pentru Babel. Voi citi cele 2 articole. Sper ca pe masura ce lucrez, sa se mai clarifice anumite lucruri.

7

Mai sus am folosit key={ i }

https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.plukma1uo

8

Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don’t plan to deprecate React.createClass.

1 Like
9

Ce sistem dumb (ciudat) de a mixa obiecte/clase si cod HTML, parca suntem in Smarty acum 10 ani.

2 Likes
10

React.createElement este scris cu <tag>-uri. Esti offtopic.

11

Asta ziceam si eu, da-i sanse si fa un proiect micut in react, s-ar putea sa-ti placa ideea.

2 Likes
12

@errorsmith Daca este recomandat sa se lucreze cu ES6 classes atunci asa voi lucra si eu.
React.createClass VS React.component: https://toddmotto.com/react-create-class-versus-component/

@dmfarcas Suna bine, incurajator.
Un exemplu bun de mini aplicatie (de la setare environment, structurare proiect) este acesta:

1 Like
13

| ±–components
| | |
| | ±–navigation
| | navigation.html
| | navigation.js
| | navigation.scss
| | package.json
Structura este ok…in cazul in care navigation.js reprezintă aplicația ta React compilată deja.

14

Ambele răspunsuri sunt corecte:
ES5 este prima varianta
ES6 este a doua varianta…
Secretul este sa nu le combini in același fișier…u