#react

10
36

pytałem na diskordzie ale tam idą dyskusje na głębokie tematy, także spróbujemy tutaj.


#javascript #html #react


Jeszcze na łykopie przed ostatnią aktualizacją napisałem sobie prosty userscript do czarnolistowania. Działał na tej zasadzie że po załadowaniu strony brał predefiniowaną tablicę na przyklad tagów


var tagi=['przegryw','kononowicz'];


function schowaj_taga(item,index) {


let tag=$('div.d⁎⁎a p a[href="łykop/' + item +'"]' );


tag.remove() }


oczywiście upraszczam, ale efekt tego był taki że usuwane były całe gałęzie drzewa DOM no i było fajnie, dobry przekaz leciał.


W przypadku hejto jak próbuję zrobić to samo z elementem article to jest spoko póki nie dotknę paginacji. Frontent nie "reloaduje" dokumentu tylko usuwa kontekt zmiędzy obecnych <article> i wstawia nowy. Jeśli FE oczekuje 20 elementów article a ja zdążę usunąć 4 z nich to kolejny request o uzupełnienie treści wywali błąd 500.


Zastanawiam sie jak do tego podejść.

Zawsze możesz zrobić na pałę i ustawić sobie, żeby skrypt się odpalał np. co sekundę, przy pomocy setInterval - nie jest to za bardzo po bożemu, ale powinno działać A to na tyle drobny skrypt, że nie powinno to jakoś wpłynąć na prędkość działania strony.

@kocurio wiem wiem, ale nie cierpię takiej guwnorzeźby. to jeden z moich OCD -jak coś robię to ma to być zrobione dobrze, bo parafrazując mema już wpiszę do eksela i tak zostawię.

Zaloguj się aby komentować

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

b6f9fbc0-9d2e-4dc2-b800-6b472862a7f2

@BoloMaster

  1. 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 />

  2. 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ć.

1e6bfae8-221d-475e-a3de-63bb2e85ea21
e2cbcdbb-3aaf-4981-9a8d-82019c24f330

@Kamil.js Cirkawe rozwiązanie, sprawdze na pewno chociaż mam awersję do styled components z powodu częstych problemów z typowaniem

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 Zobacz na aplikację raindrop.io w ich źródła, oni mają preview strony danej zakładki, która jest osadzona w ramce.

https://postimg.cc/YhjwS65z


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 Pozdro!

@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://tamagui.dev/

https://reactnativeelements.com/docs

https://reactnativepaper.com/

https://mobily.github.io/stacks/

https://wix.github.io/react-native-ui-lib/

https://akveo.github.io/react-native-ui-kitten/

@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.

Zaloguj się aby komentować

React newsletter #1


Dzień dobry reactowe świry! Żyjemy i pracujemy w niestabilnym świecie, frameworki zmieniają się jak szalone i trzeba ciągle śledzić zmiany. Robię sobie regularnie prasówkę, żeby trzymać rękę na pulsie i pomyślałam, że tutaj może się komuś przydać. Będę wrzucać zajawki ciekawych artykułów / filmów z Reacta i tematów okołoreactowych.


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-

Zaloguj się aby komentować

@lubieplackijohn umiesz React? Ja trochę się go uczę ale opornie mi to idzie, mógłbym Cię podpytać o kilka tematów?

@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 ( ͡° ͜ʖ ͡°)

2ea62084-de5a-49b9-a0d8-b9ed9d43386a

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 który hostuje przez Netlify:


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.

@gacek Sama strona Archon Adventures jest tylko (albo aż) objektem na którym dokonuje eksperymentów za pomocą prezentowanego tu projektu CMSa

Zaloguj się aby komentować

Hejto jako taka konkurencja dla facebook napisany w react (technologii stworzonej przez facebook) wygląda zabawnie Jakby to był Vue to rozumiem, a jeśli zarabiacie już na tym i przekroczycie jakiś pułap przychodu, dochodu lub zysku będziecie musieli płacić facebookowi za korzystanie z ich technologii lub "grzecznie" was poproszą o zmianę technologii lub zamknięcie serwisu jeśli poczują, że jesteście dla nich konkurencją

Zaloguj się aby komentować