Gumroad wrzucił cały frontendowy kod źródłowy na GitHuba – kopalnia złota dla poważnych frontendowców w Reactcie.
Porządna architektura, czyste wzorce, konkret z prawdziwego świata.
Tak budują profesjonaliści.

Pełna analiza tutaj:
https://tomaszs2.medium.com/gumroad-just-open-sourced-its-code-a-masterclass-in-building-pro-react-apps-e59e1eae65ea

#reactjs #javascript #webdevelopment #frontend #opensource

#programowanie #nextjs #react #reactjs #mongodb #postgresql #webdev

siema moze mi ktoś powiedzieć kiedy nie opłaca sie używać nextjs w webapp i warto postawić np na MERN??
jakie sa przewagi klasycznego merna ?? jakie problemy moga mnie spotkać z nextem w produkcji?

Uczę się od pewnego czasu reacta i mam pewne pytanie. Jak to przekombinowane cholerstwo uruchomić na zwykłym serwerze http?

W sensie to jest javascript, więc wydaje mi się że nie powinien wymagać niczego po stronie serwera.

#nodejs #react #reactjs

If your colleague dev is happy today, it's because React 19 beta was just released!
https://tomaszs2.medium.com/developers-confused-over-react-19-beta-release-e63e31558a9f
#reactjs #webdev #javascript

Postanowiłem że czas nauczyć się jakiegoś frontu. Aktualnie znam jakieś tam podstawy JavaScript i to tak raczej średnio ( ͡º ͜ʖ͡º) Zawodowo siedzę w php.

Czego warto się uczyć?

#javascript #vue #vuejs #react #reactjs #programowanie

Mirki bede pierwszy raz od dawna szukal roboty jako react mid, jakieś rady? Ktoś może ostatnio chodził na rozmowy i podrzuciłby czego można się spodziewać?

Robie te zadanka z leetcode i w sumie nie wiem co jeszcze powtórzyć

#programowanie #frontend #react #reactjs

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 Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://x.pl/') with script ('https://x.pl/service-worker.js'): The script has an unsupported MIME type ('text/html').`

W większości rozwiązań problemu trzeba coś zmieniać w kodzie, ale czemu jak na starym serwerze działa to bez problemu i już nie wspominając, że z tego co do tej pory wyczytałem i dowiedziałem się na temat React-a - przeszukałem wszystkie foldery i projekt nie ma plików z źródłem kodu js, są tylko przepuszczone przez obfuscator.

Czy coś trzeba dla tego typu aplikacji uruchomić na serwerze, zainstalować?

#programowanie #programista15k

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

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

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 W----------O SIĘ NA PLECY? DRAMAT JPRD, DRAMAT. I teraz grzebie w tym syfie i chuuuuuuuuj mnie strzela. Eh a miałem to tylko sprawdzić i deployowac. #frontend #reactjs #programista15k

#reactjs #programowanie #frontend #webdev #programista15k
Uzywa ktos tych ostatnich nowosci z NextJS? Co sądzicie o koncepcji server components? Jak ostatnio sprawdzalem to ludzie pisali zeby poczekac np. z przerzuceniem folderu pages na /api bo jest to jeszcze testowane, ale to bylo z pół roku temu.

Heja,

Macie jakiegoś fajnego githuba / kurs z aplikacją obejmującą front + back? Coś w stylu react + java + spring + hibernate i pisane i zapięte w jakimś AWSie (nie obchodzi mnie tematyka)? W miarę takich zasad jak to powinno być zrobione? Miałem kiedyś githuba do czegoś takiego ale nie mogę znaleźć. Może macie coś ciekawego?

#java #programowanie #spring #reactjs #aws

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

Mam taki custom hook do zmiany danych:
https://pastebin.com/z1Xswry3

Tutaj jest przykład użycia:
https://pastebin.com/aLpYFSxb

Jak zrobić, żeby np. zmienić imię?
Nie mogę użyć useChangeItem wewnątrz onClick a to by było najprostsze rozwiązanie.

Mogę np. zmienić obiekt student z Jan na Karol wewnątrz onClick, ale jak wymusić nowy render useChangeItem żeby wykonał fetcha i zwrócił nowe dane?

#react #reactjs

https://codesandbox.io/s/crimson-hill-fyvdtx

To jest legitne? Tzn. można normalnie wrzucać całe duże i skomplikowane komponenty przez propsy?
Przesyłałem zmienne, funkcje, obiekty ale jeszcze nigdy propsy i nie wiem czy to jest ok.

#react #reactjs

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

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

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 data2" ale wtedy komponent mógłby się nie odświeżyć gdyby data2 był zwykłą zmienną. Tak mi się przynajmniej wydaje.

#react #reactjs

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

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 u mnie "undefined"

#react #reactjs #redux #javascript

terminate batch job (y/n)
Co to oznacza właściwie?
Pojawia się przy zatrzymywaniu reacta za pomocą ctrl+c w terminalu

#react #reactjs

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

Mam coś takiego:
https://pastebin.com/sJdrxHXx

Problem w tym, że Jak ten komponent umieściłem w ten sposób:


to value wewnątrz Example ustawia się na undefined i tak zostaje.
Jak to zrobić prawidłowo?

Co ciekawe, jak coś zmienię wewnątrz Example i zapiszę to pojawi się prawidłowa wartość, ale po odświeżeniu strony znika.

#react #reactjs

[test, setTest] = useState("X")

Czy przy użyciu setTest((arg)=>{ ......... })
do arg trafia domyślnie to co aktualnie znajduje się wewnątrz "test" czyli w tym wypadku "X" ?

#react #reactjs

Co może być nie tak?
Kod:
https://pastebin.com/nnLycLh9
Skąd w dacie (w przykładach z konsoli poniżej) bierze się 2027 albo 2029 skoro wyraźnie podaje 2022 ?

Przykładowy wynik z konsoli 1:
choosedMonth
7
choosedYear
2022
new Date(choosedYear, choosedMonth+1, 0)
Tue Nov 30 2027 00:00:00 GMT+0100 (czas środkowoeuropejski standardowy)

Przykładowy wynik z konsoli 2:
choosedMonth
9
choosedYear
2022
new Date(choosedYear, choosedMonth+1, 0)
Tue Jul 31 2029 00:00:00 GMT+0200 (czas środkowoeuropejski letni)

#javascript #react #reactjs