Hej, może ktoś mi to wyjaśni bo już przejrzałem parę materiałów i mam totalny mętlik.Chciałbym aby po kliknięciu buttona wyskoczył modal, w obrębie 1 komponentu wszystko działa. Gdy chcę odpalić go w innym komponencie, to nic się nie dzieje.
#programowanie #react
@BoloMaster
Twój komponent RemovePostModal nie przyjmuje żadnych propsów ani nie używa kontekstu, więc nie ma jak nim sterować z zewnątrz. Jedyne co możesz z nim zrobić to wyświetlić go jakimś miejscu za pomocą <RemovePostModal />
W SinglePost.js w linii 35, odwołujesz się do props.handleShow, jak mniemam chciałeś w ten sposób wyświetlić okno, ale przez props odwołujesz się do propsów komponentu SinglePost dlatego to nie ma prawa zadziałać (chyba że to jakiś inne handleShow
Można to zrobić tak: Stan widoczności modala przenosisz do SinglePost. RemovePostModal dostaje propsa visible i w zależności od niego albo się wyświetla albo nie. Dodatkowo i tak musisz do modala przesłać albo id posta do usunięcia albo callback, który danego posta usunie. Poczytaj to: https://beta.reactjs.org/learn
Zaloguj się aby komentować
TailwindCSS
Jakie macie lub znacie sposoby na lepszą organizację klas zamiast bezpośrednio w DOM w className?
W jednym z projektów wyciągnąłem klasy do czegoś takiego:
const cls = {
container: "...",
text: "..."
}
I później w DOM'ie można było użyć className={cls.container} z tym że traciłem wtedy wszystkie ficzery związane z podpowiadaniem kodu i sortowaniem klas.
#tailwindcss #frontend #react #angular #vue #programowanie
@Melonusk https://github.com/ben-rogerson/twin.macro pozwala na połączenie Tailwinda ze styled-components, emotion i innymi bibliotekami.
Dzięki temu używając Tailwinda możesz tworzyć ostylowane komponenty i po prostu je importować z innego pliku zamiast zaśmiecać DOM długimi className'ami. Jeśli chcesz nadal możesz używać Tailwinda w DOM, tylko zamiast w className umieszczasz go w atrybucie "tw", więc przy istniejącym projekcie trochę trzeba zrobić w ramach migracji.
Dopiero wczoraj odkryłem tę bibliotekę, bo tak jak ty chciałem uporządkować trochę DOM bez porzucania Tailwinda, więc jeszcze nie wiem czy jest coś lepszego i jakie potencjalne problemy mogą wyjść przy używaniu tego. W readme są przykładowe projekty w różnych technologiach, więc można szybko sprawdzić i się pobawić.
@Kamil.js Cirkawe rozwiązanie, sprawdze na pewno chociaż mam awersję do styled components z powodu częstych problemów z typowaniem
@Kamil.js Stosowałem i efekt będzie taki sam jak stosowanie @apply, czyli odpada.
Zaloguj się aby komentować
Ej Tomki pytanie z #programowanie
Buduje sobie obecnie wizualnego webscrapera w React, tj użytkownik ma interfejs gdzie w ramce może sobie wybierać selektory strony do skrapowania i pytanie jaki jest najlepszy sposób na osadzenie jakiejś strony w ramce przy tym mając dostęp do contentWindow żeby dodawać własne eventy?
Obecnie przez puppeetera zaciągam całego htmla i renderuje go w iframe ale to często generuje błędy w postaci skryptów używanych na zaciągniętym htmlu
#react #pytanie
@pewnie-kaczka a jesteś pewien, że to się da w ogóle zrobić? https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Omijam corsy właśnie pobierając całego htmla jakiejś strony przez puppeeter xd, czyli z backendu leci cała dana strona w html
@pewnie-kaczka Zobacz na aplikację raindrop.io w ich źródła, oni mają preview strony danej zakładki, która jest osadzona w ramce.
Wydaje mi się, że przy ich rozwiązaniu będziesz miał dostęp do obiektu DOM, bo jak widzisz na screenie dodawany jest tool do oznaczania/podkreślania treści.
Zaloguj się aby komentować
no hejka #programowanie #react #kotlin #reactnative
chce się nauczyć pisac apki mobilne i wciąż się nie moge zdecydować na konkretna technologie :C
obecnie jestem react developerem, więc react native to tak praktycznie z marszu moglbym pisac, no ale to nadal react, nadal ten sam framework, jakies to chyba malo rozwijajace? idk
z drugiej strony chyba jedyne sensowne rozwiazanie to kotlin, gdzie ucze sie nowego jezyka, nowe koncepty, piszesz apki natywne i w koncu to nie ten sam JS i niby wszystko spoko, ale zanim zaczne pisac apki to troche minie, a i w pracy ostatecznie duzo bardziej zyskalbym na react native, no bo czesto szukaja z obydwoma, wiec i boost do zarobkow moglby byc lepszy, gdzie kotlin nie do konca da mi boost do zarobkow, za to da mi ewentualnie bezpieczenstwo, bo zawsze to dwa jezyki i duzo wiekszy wybor pracy w przyszlosci
eh no nie wiem, trudna decyzja -> macie jakies przemyslenia na temat tych dwoch technologii?
@najkk skoro znasz JSa to wejście w RN będzie łatwiejsze, dużo szybciej zobaczysz efekty pracy + liźniesz trochę konfiguracji natywnych apek + potencjalnie będzie to jakiś bonus do CV. No i późniejsze wejście w Swifta/Kotlina będzie nieco łatwiejsze.
No chyba, że korci cię, żeby sprobować totalnie czegoś innego, wtedy to inna kwestia
@najkk nie polece żadnej w zasadzie bo nigdy nie korzystałem z gotowców (projekty nad którymi pracowałem miały tak złożony UI, że nauka i customizacja gotowców byłaby bardziej czasochłonna, jedynie komponenty do "układania" elementów na ekranie mają wartość), ale łap kilka linków:
https://reactnativeelements.com/docs
https://mobily.github.io/stacks/
@tortoise a widzisz, to myslalem ze raczej bez takiego czegos to sie nie podchodzi do developmentu, tak jak w react zawsze bierzesz jakas biblioteke, czy to material ui czy tailwind
Zaloguj się aby komentować
Zaloguj się aby komentować
React newsletter #2
Kolejna porcja świeżych artykułów z tematów frontendowych / Reactowych.
What is CORS? - Kto z nas nigdy nie został przyblokowany przez CORS? Treściwe wyjaśnienie z czego to się bierze i garść przydatnych porad jak sobie radzić z pobieraniem zewnętrznych danych na środowisku lokalnym.
Why We're Breaking Up with CSS-in-JS - Case study doświadczeń dużej firmy z podejściem tworzenia styli w komponentach reactowych, ciekawe statystyki performance'u i dyskusja pod postem. (Ogółem jako fanka SASSa cieszę się, że następuje trend odchodzenia od CSS-in-JS
The Web’s Next Transition - historyczny przegląd zmieniającej się architektury aplikacji webowych i prognozy na przyszłość.
BONUS: Smashing Meets Design Systems 15 listopada odbędzie się konferencja na temat Design Systemów prowadzona przez ekipę Smashing Magazine. Bilety na wersję online są darmowe.
@Kris - Twoja ulubiona społeczność
Zaloguj się aby komentować
React newsletter #1
Dzień dobry reactowe świry!
React Labs: What We've Been Working On - aktualnie rozwijane funkcjonalności biblioteki, z oficjalnego bloga Reacta.
The future of rendering in React - lista patternów w renderowaniu z wadami i zaletami danego podejścia.
Turn around your Git mistakes in 17 ways - parę gitowych komend ułatwiających życie.
Coś dla Ciebie @Kris
@Bezkres W ogóle to ciekawa społeczność! Proszę o więcej takich postów!
@Bezkres Super, więcej takich wpisów! Na pewno będę obserwował
Zaloguj się aby komentować
Możliwość pracy w pełni zdalnie. Szukamy Midów, jak i Seniorów. Wymagania i płaca jest oczywiście dostosowana do poziomu.
Widełki:
Senior 16 000 - 26 000 brutto UoP
Mid 8 000 - 16 000 brutto UoP
Osoba do nas dołączająca ma przydzielonego tzw. "buddiego", który pomaga się wdrażać, któremu można zadawać pytania, pomaga z zadaniami i kodem.
Co oferujemy?
Po pierwsze MOŻLIWOŚCI ROZWOJU:
Zespół składający się z doświadczonych ludzi, którzy zawsze służą pomocą i dobrą radą, codzienne wyzwania, dostęp do szkoleń, uczestnictwo w konferencjach czy stare dobre CodeReview.
Po drugie TECHNOLOGIE:
Płyniemy z głównym nurtem frontendowym: React, TypeScript, Redux, Styled Components ...
Po trzecie SATYSFAKCJA:
Przekonanie, że to co robię ma sens, daje mi ogromną satysfakcję - dzięki efektom naszej pracy 43 miliony unikalnych użytkowników miesięcznie ma możliwość zorganizować sobie wakacje marzeń.
Więcej opinii ludzi, którzy tu pracują https://www.facebook.com/LMGPoland
Link do ogłoszenia - https://jobs.smartrecruiters.com/lmgroup/743999802187867-senior-frontend-developer-also-available-for-full-remote-
Zatrudniasz też ludzi z Ukrainy?
Zaloguj się aby komentować
Polecam darmowy tutek do reacta. Stosunkowo krótki i przystępnie tłumaczony!
@lubieplackijohn umiesz React? Ja trochę się go uczę ale opornie mi to idzie, mógłbym Cię podpytać o kilka tematów?
@kris No właśnie ja też tak topornie bardzo. Dopiero pierwsze kroki stawiam. No dobra, może nie pierwsze, ale od dawna nic nie programowałem
@lubieplackijohn jak zobaczylem ze podstawowa aplikacja bez niczego wazy tam ponad 250mb (dluzej mi sie nie chcialo czekac) to od razu w pizdu zostawilem tego rracta i przeszedlem na svelte
Zaloguj się aby komentować
Mamy tutaj specjalistów od aplikacji na urządzenia mobilne? Flutter, React Native, inny Android?
Tak pytam, zupełnie niezobowiązująco, nic a nic, zupełnie wcale. Czyta ciekawość ot co. A w zasadzie to kolega pyta ( ͡° ͜ʖ ͡°)
@lubieplackijohn ja jestem jedynie specjalistą od pisania helloworlda w pythonie i javie
@lubieplackijohn ja jestem specjalistą od zaraz
@PanDemia
Zaloguj się aby komentować
────
Więcej tutaj: https://summonthejson.com/blogs/tips/rxjs-takeuntil-explained
Obserwuj jak chcesz więcej!
Zaloguj się aby komentować
A tak działa operator RxJS: distinctUntilChanged
Więcej tutaj: https://summonthejson.com/blogs/tips/rxjs-distinctuntilchanged-explained
Obserwuj jak chcesz więcej!
Zaloguj się aby komentować
Zaloguj się aby komentować
Hejka Hejto społeczności ^_^
Chciałem Wam przedstawić projekt, nad którym pracuję od ok. 2 m-cy. Nie ma on jeszcze nazwy, jednakże jest to aplikacja, której głównym celem, jest możliwość stworzenia strony internetowej, czyli CMS.
Zamysł projektu był taki, aby nie było potrzeby budowania dedykowanego backendu - to był priorytet. Wykorzystałem następujące technologie:
React - frontend
MongoDB Realm - backend bazy danych
Aplikacja składa się z dwóch części. Jedna, która przetwarza zawarte w bazie danych informacje i wyświetla stronę dla użytkownika końcowego. Druga to strona administracyjna aplikacji, gdzie można tworzyć/edytować właściwą stronę oraz zarządzać zasobami strony.
Jako przykład działania, mogę podać stronę, która przedstawia zawieszony (jak na razie) projekt gry na komputery 8-bitowe Atari
https://archonadventures.netlify.app/
Na chwilę obecną, pracuję nad administracją, więc strona praktycznie się nie zmienia i jest dość prosta. Działy "Screens" oraz "Download" są w przygotowaniu, gdyż nie ma zaimplementowanych elementów Layoutu do obsługi galerii i treści które można by wiązać z downloadem
Jestem także w trakcie przygotowania filmu prezentacyjnego, który ukazałby stronę administracyjną aplikacji w obecnym jej stanie. Jeśli go ukończę, przedstawię go.
Cały projekt umieszczony jest na GitHub'ie:
https://github.com/GSoftwareDevelopment/archon-adventures-page
Staram się na bieżąco uaktualniać postęp.
Z chęcią opowiem więcej, jeśli ktoś jest zainteresowany.
@PeBe najs, gratka dla wielbicieli Atari
@gacek Sama strona Archon Adventures jest tylko (albo aż) objektem na którym dokonuje eksperymentów
@gacek a co do Atari... To zupełnie odmienna historii, która być może tutaj kiedyś przytoczę.
Zaloguj się aby komentować
Hejto jako taka konkurencja dla facebook napisany w react (technologii stworzonej przez facebook) wygląda zabawnie
@Admiral Również poproszę o więcej szant
@pukpuk @marek-janowski następny wpis #szantanadzis będzie 10 czyli jubileuszowy. Będzie to więc coś potężnego
@marek-janowski Przecież react jest na licencji MIT. Mieli takie pomysły jak piszesz, ale szybko się wycofali.
Zaloguj się aby komentować
