Wszystko

Wszystkie

Archiwum

lentilek
lentilek
  • 1
@hdh3he3: Jeśli widzisz jakieś ogłoszenie danej firmy, sprawdź czy szukają również seniora, jeśli tak, sprawdź jakie mają wymagania. Je musisz ogarnąć, z tego będą cię pytać. Taki schemat ostatnio zauważyłem, co prawda nie jestem z frontendu, no ale tak pytają.
nophp
nophp
  • 0
Hej, szukam chociaż jakiejś podpowiedzi, bo nie miałem nigdy do czynienia z projektem w #react #reactjs i #symfony a do tego brak kontaktu z programistą, który się tym projektem do tej pory zajmował.
Ogólnie chodzi o przeniesienie projektu z serwera na serwer. Na starym serwerze projekt śmiga bezproblemowo, a na nowym wyświetla się okno ładowania, ładuje w nieskończoność i wali błędem w konsoli:

The script has an unsupported MIME type ('text/html').
registerServiceWorker.js:80
zwei
zwei
  • 0
@nophp: serwer musi serwować pliki z odpowiednim nagłówkiem Content-Type, w przypadku js application/javascript. To jest kwestia konfiguracji serwera wyłącznie
nophp
nophp
  • 0
@zwei: Dzięki za podpowiedź, ale ta aplikacja żyje z tym błędem i innymi. Dzisiaj udało się to postawić na naszym serwerze i brak obsługi błędów, brak chyba jakichkolwiek testów i prawdopodobnie mam się z tym jeszcze bujać, aby to rozwijać. (╯°□°）╯︵ ┻━┻
scorpio18k
scorpio18k
  • 0
Mam taki komponent:
https://pastebin.com/5T0KR9NG

Chciałem przenieść to co jest między <nav>...</nav> i <main>...</main> do nowych komponentów bo planuję to rozbudować.

Mógłbym wyciąć to co jest w nav i wkleić do komponentu z nagłówkiem:
ArticlesNav ({ articles, articlesRefs, articleToLiRefs })

Problem w tym że przekazywałbym refy przez propsy a nie przez forwardRef.
Jest jakiś sposób, żeby przekazać wiele refów na raz?

#react #reactjs #javascript
scorpio18k
scorpio18k
  • 0
@GeDox:

Zrobiłem tak:
"articlesRefs, articleToLiRefs" to są Mapy z refami i innymi danymi.
wsadziłem je w:

const refsToForward = useRef([articlesRefs, articleToLiRefs]);

<div>
<ArticlesNav articles={articles} ref={refsToForward} />
i wewnątrz nowego komponentu sobie to rozpakowuję:

const ArticlesNav forwardRef( ({ articles}, ref ) =>
const [articlesRefs, articleToLiRefs] = ref.current;
i używam jak wcześniej.
Nie wiem czy to jest dobrze. Zawsze przez ref przekazywałem tylko pojedyncze refy.
slepauliczka
slepauliczka
  • 1
Jakim cudem focus dziala roznie mimo ze kod jest praktycznie identyczny? Przyklad kodu i sandboxy pod linkiem: https://stackoverflow.com/questions/77281261/onfocus-behavior-in-react-with-tabindexed-is-broken

W przykladzie z czystym JS focus dziala intuicyjnie, najpierw jest przeniesiony na pierwszego diva i przeskakuje po kolei po elementach natomiast w drugim przypadku zapetla sie na pierwszym divie.

#javascript #reactjs #react #webdev #naukaprogramowania #programowanie
masaj
masaj
  • 0
Jakiś czas temu zdarzyło mi się napisać stronę w ReactJS…zwykła strona z informacjami, zmiana jezyka oraz formularzem wysyłającym maila. Nie miałem czasu i zajęło mi kilka msc powrót do tego żeby w końcu to skończyć…dzisiaj to odpaliłem z pomocą npm…KUREA MIRKI, WY TAM NA TYM FE TAK ŻYJECIE? SERIO? WYSTARCZY KILKA MIESOECY ŻEBY WSZYSTKO #!$%@?ŁO SIĘ NA PLECY? DRAMAT JPRD, DRAMAT. I teraz grzebie w tym syfie i chuuuuuuuuj mnie strzela. Eh
ujdzie
ujdzie
  • 2
@cppguy: tylko, że on się wqrwia na chakrę, że nie ogarniają ssr. Z tego co widzę w cholerę stricte reactowych rozwiązań ma ten problem.

W ogóle rzeźbienie SSG w Next zamiast w Astro to mocno dyskusyjny pomysł.
k.....g
k.....g
  • 0
@srgs: zobacz sobie ale nie używaj tylko zrób po swojemu... to jest dobre jak chcesz zrobić POC-a czegoś co i tak później napiszesz normalnie. Miałem okazję rozwijać aplikacje które ktoś rozpoczął w jhipsterze nie do końca go czając. Nie było opcji robić upgrade jhipstera(polityka w projekcie) a z drugiej strony sam jhister bardzo utrudniał on dalszy rozwój systemu.
de_yum
de_yum
  • 0
Czy jest ktoś z was w stanie napisać najłatwiejszego popupa jakiego się da, z wykorzystaniem klasowych komponentów i BEZ UŻYCIA zewnętrznych bibliotek? Wszystkie przykłady co znalazłem to albo czysty js albo jakieś zewnętrzne biblioteki/komponenty funkcyjne ( ͡° ʖ̯ ͡°)


#react #reactjs #javascript
Davidozz
Davidozz
  • 2
@de_yum:

Dzięki za pomoc, ale cholera, dokładnie tak mam (co mnie swoją drogą pociesza), więc wychodzi na to że nie ma "ładniejszego" sposobu.


No nie wiem co mogłoby być prostsze od tego. Też często na początku miałem myśli, że może istnieje jakiś super sposób na moje problemy, a często okazywało się, że ludzie robią po chłopsku.

Myslę żeby zrobić komponent overlay ze stylem który będzie miał rozmiary w css 100%, background
scorpio18k
scorpio18k
  • 0
Możesz po prostu pobrac i ustawic wartosc w onClicku.


@zackson: Rozumiem, że chodzi o to, żeby zrobić zwykłą funkcję z fetchem.
Tylko miałem zwykłego fetcha wcześniej, ale zrobiłem custom hooka, bo w przypadku 401 unauthorized robię dispatch logout za pomocą reduxa. A tego nie zrobię w normalnej funkcji tylko w hooku.
xaro
xaro
  • 1
można, jak najbardziej
sam children pattern to także prop, który jest defaultowy w komponencie funkcyjnym

ogólnie komponent to nic innego jak funkcja, która zwraca JSX, warto w ten sposób myśleć
zwei
zwei
  • 1
@scorpio18k: możesz przekazywać albo "zbudowany" komponent albo możesz też samą funkcję budującą komponent, jeśli użyjesz propsa zaczynającego się wielką literą:

`

wtedy czasem też się przekazuje osobno propsy tego komponentu:

`

Wtedy w Foo możesz zrobić

return ;
scorpio18k
scorpio18k
  • 0
https://www.w3schools.com/react/react_customhooks.asp

Tam jest Example: useFetch.js: i index.js:

Czy tam przypadkiem nie ma podwójnego źródła prawdy ?
1. wewnątrz useFetch: const [data, setData] = useState(null);
2. wewnątrz index.js: const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

Mamy "data", które występuje w dwóch miejscach.

Czy nie jest to sprzeczne z:
"There should be a single “source of truth” for any data that changes in a React application"
źródło: https://reactjs.org/docs/lifting-state-up.html

#react #reactjs
scorpio18k
scorpio18k
  • 0
useEffect(()=>{
if(registered) dispatch(resetRegistered());
}, [registered]);

eslint wyrzucił " React Hook useEffect has a missing dependency: 'dispatch' "

dispatch wygląda tak:
const dispatch = useDispatch();

to chciałem zrobić:
const dispatch = useCallback(()=>useDispatch());
ale wywala: " React Hook "useDispatch" cannot be called inside a callback. "

Można to jakoś naprawić czy po prostu dodać // eslint-disable-line react-hooks/exhaustive-deps ?

#react #redux #reactjs #javascript
ziolowow
ziolowow
  • 1
@scorpio18k:

eslint wyrzucił " React Hook useEffect has a missing dependency: 'dispatch' "


Po prostu zastosuj się do tego.

ale wywala: " React Hook "useDispatch" cannot be called inside a callback. "


Sugeruję zapoznać się z dokumentacją reacta - bardzo przyjemna
scorpio18k
scorpio18k
  • 0
https://codesandbox.io/s/fragrant-cloud-gptmsv?file=/src/App.js

1. data przechowuje tablicę liczb.
setData używam do pobrania danych za pomocą fetch, ale już tego nie pisałem i dałem [1,2,3,4].
2. tworzę obiekt "data2" gdzie kluczami są liczby z tablicy "data" a wartościami "false"
3. jak kliknę to zmieniam checkbox nr.2 na true.

Wydaje mi się, że niepotrzebnie używam dwa razy useState.
Jak myślicie, da się to zrobić lepiej?

Myślałem np. żeby pozbyć się drugiego [data2, setData2] i zrobić "const
scorpio18k
scorpio18k
  • 0
na pewno dwa odrębne state'y są całkowicie niepotrzebne


@plasq: Dzięki. W sumie to jak przeniosę konwersję tablicy na obiekt do funkcji pobierającej dane (fetch) to już wtedy mogę zrobić jak pod linkiem
scorpio18k
scorpio18k
  • 0
https://pastebin.com/UbbYhDim
Próbuję zrobić useFetch takiego jak tu:
https://www.w3schools.com/react/react_customhooks.asp

Problem w tym, że wpada w nieskończoną pętlę.
W przykładzie w3schools jest useEffect ustawione na url.
Podejrzewam, że bez tego też by mieli nieskończoną pętlę.

Pytanie - Czy da się to zrobić tak jak u nich ale z async await jak u mnie?
Tzn. którą część kodu powinienem wziąć w useEffect[url], żeby nie odświeżało się w nieskończoność.

#react #reactjs
scorpio18k
scorpio18k
  • 0
Jakim cudem w req.cookies znajdują się ciasteczka z tokenem access?

Kod:
https://github.com/linkedweb/auth-site/blob/main/frontend/routes/auth/verify.js

Generalnie kod wywoływany jest tak:

1. checkAuth() w App.js
https://github.com/linkedweb/auth-site/blob/main/frontend/client/src/App.js

2. checkAuth jest tutaj:
https://github.com/linkedweb/auth-site/blob/main/frontend/client/src/features/user.js

Ponieważ jest:
fetch('/api/users/verify
to odpala się express.js:

3. https://github.com/linkedweb/auth-site/blob/main/frontend/routes/auth/verify.js
I tu pytanie - Skąd te ciasteczka wewnątrz req.cookies ?

Zrobiłem kopię i spróbowałem odpalić tak:
https://pastebin.com/xMQ25NBN
Generalnie ładnie uderza z reacta do expressa ale nie ma wewnątrz ciasteczka z tokenem access.
Dlaczego?

const {access}=req.cookies; zwraca
scorpio18k
scorpio18k
  • 0
@schriker: @PortowySzczur:
cookieParser jest raczej ok bo by w ogóle nie działało. Tak mi się wydaje.

To co udało mi się ustalić to:
https://pastebin.com/MErESiFF

problem leży w tym, że jak zamienię w tych dwóch miejscach z '/api/elo' na 'foo/elo'
to nie zadziała ponieważ trzeba dodać w setupProxy.js: app.use('/foo', ...
A jak dodam /foo do setupProxy to wtedy fetch z DashboardPage działa bo wyświetla wewnątrz express js console loga tylko, że
zwei
zwei
  • 1
@scorpio18k: to nie jest nic związanego z reactem tylko tak działa cmd.exe. Kiedy odpalasz skrypt .bat, który coś tam dalej wywołuje, to jak przerwiesz działanie tego wywołanego programu to pojawia się to pytanie. Odpowiedź pozytywna oznacza, że chcesz przetwarzać dalej ten .bat mimo że zatrzymałeś aplikację przez niego wywołaną.

czyli bardziej obrazowo

skrypt.bat
     node.exe <- ctrl+C zamyka node'a, "Terminate batch job (y/n)"?
     inny.exe <- jeżeli y, to odpal inny.exe, jeżeli n,
scorpio18k
scorpio18k
  • 0
useEffect(()=>{
getStudent();
},[])

ESlint wyrzuca: React Hook useEffect has missing dependencies: 'getStudent'

Chodzi o to, żeby przy ładowaniu się komponentu pobrać raz dane, dlatego jest pusta tablica na końcu.
Funkcję getStudent używam jeszcze kilka razy i nie wydaje mi się, żeby przekopiowanie wnętrza funkcji było najlepszym pomysłem.
Jak rozwiązać ten błąd?

#react #reactjs
Rst00
Rst00
  • 1
@scorpio18k:

po pierwsze owrapuj deklarację funkcji getStudent w useCallback, po drugie w useEffectcie dodaj dependency getStudent. Alternatywnie możesz zignorować ten błąd dodając komentarz wyłączający eslinta dla tej linijki
Rst00
Rst00
Rst00
via Wykop Mobilny (Android)
  • 1
@scorpio18k: tak, useCallback zapewni to że referencja się nie zmieni i będzie to nadal ta sama funkcja pod maską i jak dasz jako dependency to wywoła się i tak tylko raz ale nie będzie błędu eslinta.

No jakby był argument to nie bo byś wtedy w useCallbacku musiał dać x jako dependency ale to akurat dobrze bo przecież najpewniej chciałbyś pobrać dane odnośnie innego studenta jakby x się zmienił
scorpio18k
scorpio18k
  • 0
@postrachNocnegoSzczura: To też ale nie w tym problem.

Udało mi się rozwiązać to za pomocą:
{fetchedValue && }

Z tego co ogarnąłem, to Example ładował się z wartością undefined zanim się pobrały dane z bazy danych i tak zostawało. Dzięki { fetchedValue && ... } ładuje komponent dopiero gdy coś tam jest.
Rst00
Rst00
  • 0
@scorpio18k: wszystko zależy co chcesz osiągnąć. To co zrobiłeś to nazywa się conditional rendering czyli jak fetchedValue będzie "truly"' to wyrenderuje się . Równie dobrze mogłeś zostawić jak miałeś i w środku Example sprawdzać czy value nie istnieje i wyświetlać np. loader itd.

Powiązane tagi