Klasy jako komponenty React.js

A jak masz ustawione u siebie reguły eslinta dla react z redux? Ostatnio zainteresowałem się Airbnb tylko mam zawiłostk, ponieważ tam preferowane są klasy tylko w przypadku komponentów „stanowych”. W redux natomiast nie operujemy na state tylko na propsach i tutaj ciekawi mnie jakie praktyki stosują inni „reactowcy”. Ja założylem sobie, że bezstanowe robię na funkcjach, ale już pobierające dane ze store robię na klasach, co daje mi przyjemniejszą składnię np. dla propTypes, defaultTypes (jako static). A co Ty myślisz?
Pozdrawiam, a tak na marginesie to masz fajny styl pisania, myślę, że wiele osób zaczynających dopiero React łatwo zrozumie co i jak z Twoich wpisów, powodzenia!

W czasie wykonywania zadania domowego zastanawiałem się jaka jest różnica pomiędzy użyciem takich składni:

import React, {Component} from 'react';
class Klasa extends Component {
...
}

a

import React from 'react';
class Klasa extends React.Component {
...
}

a według mnie nie ma(?), to w związku z tym jest jakaś reguła?
Pozdrawiam.

Staram się być konsekwentny i podążać za kursem dokładnie lekcja za lekcją. Piszę kod w jednym pliku index.html. I do momentu definiowania komponentów jako funkcji było OK. Ale przy zamienianiu ich w klasy pojawiły się błędy przy próbie wyświetlenia pliku w przeglądarce. Sekcja head wygląda tak:

  ...
  
  
  
  .....

gdy zamieniłem na:

  ...
   
   
   
   ...

zadziałało.
Poza tym gdy chcę zapisać (podzielić) komponenty do osobnych plików .js i wczytać je do html poprzez script tak nie działa.
Ponieważ jest to kurs dla początkujących proszę o wskazówki lub wskazać miejsce gdzie będę mógł pogłębić swoją podstawową wiedzę.
Pozdrawiam

Pytanie odnośnie samej konwencji tworzenia metod. W którymś eslincie spotkałem się z regułą, która nakazuje pisać metody dopiero wtedy kiedy korzystają z `this`, aby odróżniać metodę od funkcji która może zostać wyniesiona za klasę. Czy jest to zwykła konwencja i trzymanie spójności w projekcie czy kryje się za tym jakaś głębsza logika?
Pozdrawiam 😀

Czekamy czekamy 😉

[…] Pisałem o tym już w jednym z komentarzy: Taki zapis jest możliwy i działa tylko z Babelem i tylko przy włączonym […]

Dlaczego nie działa?


class AppHeader extends React.Component {
render() {
return (

Hej, w jaki sposob kazac programowi wyswietlic komponent klasy w przegladarce i w jednej komendzie wyswietlic cala konstrukcje (App) z poprzednich lekcji?

Mam pytanie, może głupie ale utknąłem na tym poziomie.
Robie sobie dajmy na to klasę ContactItem.jsx oraz ContactList.jsx:

import * as React from ‚react’;
import { Component } from ‚react’;

class ContactItem extends React.Component{

render(){
const {login, name, department} = this.props;
const imgUrl = `;

return(

{name}

{department}

);
}

}
==============================

import * as React from ‚react’;
import { Component } from ‚react’;

class ContactList extends React.Component{

render(){
return(

);
}
}

===========================

W tym momencie nie bardzo wiem jak w klasie ContactList odwołać sie do klasy ContactItem oraz jak potem przekazać te klasy do index.html, żeby uruchomic je w skrypcie.

Dzięki i pozdrawiam !!

Próba zamiany na klasy kończy się u mnie takim błędem: Warning:
React.createElement: type is invalid — expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Co to może być?

Cześć,
Słuchajcie, ja jestem naprawdę bardzo początkujący toteż pytanie pewnie jest banalne ale jednak jest.
W przykładzie zamiany funkcji na klasę, funkcja, która miała argumenty

function ContactItem({ login, name, department })

dostaje instrukcję

const { login, name, department } = this.props
I to jest zasadniczo zrozumiałe.
Pytanie, co z pozostałymi funkcjami, które nie są deklarowane z tymi argumentami ale z nich korzystają?

Wybaczcie, jeżeli to jest oczywiste ale zajmuję się ITdopiero od początku tego roku

cześć. nie wiem, czy jeszcze odpowiadasz na komentarze, ale wrzucę swoją wersję:


class ContactItem extends React.Component {
render() {
const { login, name, department } = this.props;
const imgUrl = `http://api.adorable.io/avatars/55/${login}.png`;
return (

}
}


oraz


class Avatar extends React.Component {
render() {
const { login } = this.props;
const isEmail = new EmailValidator().validateEmail(login);
const newLogin = isEmail ? md5(login) : login;
const imgUrl = `http://api.adorable.io/avatars/55/${login}.png`;

}
}


Szczególnie mnie interesuje opinia o Komponencie . Czy taki rozwiązanie w przypadku JS jest dobre?

Bardzo dobrze i z pomysłem tłumaczysz wszystko. Nadajesz się na instruktora

Przerobiłem wszystkie funkcje na klasy, odpaliłem w przeglądarce i jest błąd 😀

Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined.

To ja tylko dodam taką ciekawostkę która może spędzać sen z powiek początkującym developerom.

Jeśli piszesz wszystko w jednym pliku (np index.html) to definicje klas MUSZĄ być PRZED

ReactDOM.render(…

W innym wypadku otrzymasz błędy o niemożności importowania/exportowania.

„const { login, name, departament} = this.props”
– warto wspomnieć, że to destrukturyzacja danych 🙂
Czy tworzone są 3 zmienne (po prawej stronie) i przypisywane im są wartości z this.props