Architektura aplikacji w ReactJs.

Czesc pisze sobie aplikacje przy pomocy Reacta i piszac nie chce sie powtarzac w kodzie, bo dzieki Reactowi przeciez jest to bardzo latwo osiagalne, dzieki danym renderujemy komponent i tworzy sie on tak jakie dane mu wprowadzimy, dlatego powinna tu obowiazywac jakas pewna architektura, lub kilka. Chcialem zrobic cos w oparciu o taki styl.

W naszym child componencie renderujemy nasz kontroller, nadajemy mu propsy, w ten sposob controller component wprowadza odpowiednie akcje, robi funckje, czy cokolwiek innego i jest komunikacja miedzy tymi (w tym przykladzie) 3 komponentami, tutaj nie widac, ale sa to wprowadzone komponenty w kontroller, dzieki czemu widza siebie i moga wspoltworzyc akcje.

Na przykladzie, kontroller ma jakies akcje, z do ktorych niezbedny bedzie input lub button, po skonczonej akcji moze wysylac callbacka do chociazby inputa
(np, kontroller nadal inputowi nowy styl, a teraz w callbacku otrzyma go inputowi), a na sam koniec kontroller gromadzi np. dane z inputow i wysyla nam do child componentu, gdzie zainicjowany byl controller, no a pozniej to juz mozna te dane po calej apce rozsylac.

Czyli krocej mowiac, propsy nadane controllerowi robia akcje a w rezultacie te dane moga byc rozsylane po dalszych komponentach.
Dopiero poznaje Reacta i powiem szczerze, ze widze ogromny potencjal w tym, az sam jestem zdziwiony. Wiem ze budowanie aplikacji zalezy ode mnie. Ale czy taki schemat ma sens, taki jest moj docelowy problem. Zrobilem taki sposob, no i uwazam ze jest spoko.

Wydaje się ogólnie okej, chociaż przydałby się jakiś konkretny przykład użycia (szczegolnie ze troche niejasno o tym piszesz).

(np, kontroller nadal inputowi nowy styl, a teraz w callbacku otrzyma go inputowi),

pytanie tylko czy to nie za duza komplikacja. React jest na tyle elastyczny, że można wprowadzać różne koncepcje w komponentach (w końcu kontrolery jako tako nie istnieją w React, ale nikt nie zabroni ci zrobić czegoś co posłuży za kontroler), ale pytanie jaki będzie efekt. (a potencjalnym efektem negatywnym może być zbytnia komplikacja kodu. Oraz trudności w debugowaniu takiego przepływu danych).

Z drugiej strony jak widzisz potencjał w takim wzorcu to co szkodzi spróbować? (najlepiej na próbę w jakimś hello worldzie/piaskownicy). Wzorce i dobre/zle praktyki w React wciaz sie jeszcze ksztaltuja i nikt nie wie jeszcze do konca co sie sprawdza, co nie.

Czyli krocej mowiac, propsy nadane controllerowi robia akcje

akcje w sensie fluxowym?

Faktycznie patrzac na mojego posta, nie jest to zrozumiale dla osoby ktora nie zna mojej koncepcji, byla pozna godzina i troche alko takze maly belkot zrobilem. :D

React jest na tyle elastyczny, że można wprowadzać różne koncepcje w komponentach

• jest ZA elastyczny. Pisalem mala aplikacje, ale chcialem sie pobawic pomyslami i szczerze mowiac co chwile jak wracalem do starszych komponentow, mowilem sobie ( nosz, k**wa, przeciez mozna to zrobic bardziej elastycznie, przyjemniej, nie powtarzac pewnych rzeczy, tylko napisac pewne komponenty, tak aby byly reuzywalne i reaktywne. )

Ok, pokaze moze mniej wiecej o co mi chodzi.

 
 // jestesmy w naszym child komponencie
 <Component A/>
  <FormBody checkInputs={true} id="form1" inputs={5}/> // jest to nasz pierwszy kontroller, wprowadzamy mu dane za pomoca props
<Component B/>

 
 // jestesmy w naszym kontrollerze <FormBody /> 

export default class FormBody extends React.Component {
  constructor(props) { // tutaj sa nasze propsy
    super(props);
    this.state={checkInputs:props.checkInputs}
  }
  componentDidMount(){
    console.log('FormBody is ready')
  }
  render() {
    var inputs = [];
    var id = this.props.id+"input";
    var name = this.props.id+"input";

    for (var i = 0; i < this.props.inputsLength; i++) {
      inputs.push(<Input test={this.transferValues} checkInputs={this.state.checkInputs} key={i} id={id+i} name={name+i} />);
    }
    var stateMent = this.state.checkInputs ?  <FormButton actionMan={this.checkInputs} text="Click me"/> :  <FormButton actionMan={this.handle} text="Click me"/>  //actionMan jest propsem z FormButton, akcja przy onClicku
    return (
      {inputs}
      {stateMent}
    );
  }
}

Cos takiego mniej wiecej przyklad niedokonczony, ale mysle ze widac mniej wiecej o co mi chodzi. Tutaj mozemy sterowac naszymi inputami chociazby, sprawdzic je wyslac akcje do inputow, albo na koncu do child komponentu, np. jak dane beda juz poprawnie wpisane no to wyslemy je do child komponentu.

akcje w sensie fluxowym?
O tym jeszcze nie pomyslalem, ale bede musial o tym pomyslec.