Pierwszy komponent w React.js

[type-of-web-komentarze[bot]]

Pierwszy komponent w React.js

W tym wpisie pokażę prosty komponent React.js, opiszę jego budowę i podstawowe elementy. Napiszemy też (razem) pierwszą pełnoprawną aplikację w React, którą będziesz mogła/mógł uruchomić u siebie na dysku. Będzie to baza do dalszych części kursu React.js.

https://typeofweb.com/pierwszy-komponent-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	MJ		2017-12-12 21:49

Świetna robota. Czekamy na więcej :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-12-13 16:19

A kolejny wpis widziałaś/eś? https://typeofweb.com/2017/12/12/props-czyli-atrybuty-react-js/

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kasia K		2018-01-02 23:22

Bardzo jasno wszystko wytłumaczone, dzięki...czytam dalej :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-08 02:57

Dzięki :D

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michsł		2018-01-07 13:31

Cześć, bardzo fajny poradnik :) Mam pytanie, chciałbym pisać skrypt w oddzielnym pliku, przed napisałem <script type="text/babel" src="script.js", skopiowałem cały kod pomiędzy znacznikami script do nowego pliku ale nic mi się nie pokazuje. Czy trzeba coś jeszcze dodać do tego oddzielnego pliku?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-08 02:58

Trudno mi odpowiedzieć na to pytanie. Czy konsola pokazuje jakiś błąd?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michsł		2018-01-08 10:21

Przepraszam, że tak dziwnie ta wiadomość wygląda :D. Tutaj wrzucam screeny z konsoli i kodu.
http://imgie.pl/image/vw4rp
http://imgie.pl/image/vwJIS
Pozdrawiam

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-08 16:44

Aaa no i wszystko jasne :) Musisz mieć jakiś serwer HTTP, nie możesz po prostu otwierać pliku index.html, bo przeglądarka blokuje próbę załadowania pliku przez protokół file:/// przez Babela.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	lukasz		2018-02-08 16:38

czy na pewno ES2017? wydaje mi sie ze jednak ES2015 lub ES6

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-08 17:08

Chyba nie do końca rozumiem Twój komentarz. Przede wszystkim ES6 i ES2015 to to samo… ES2016, ES2017 i ES2018 to kolejne wersje ECMAScript. Babel wspiera wszystkie, łącznie z (już teraz) ES2018.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Remigiusz Rajca		2018-03-20 14:48

ReactDOM.render(
,
,
document.getElementById('app')
);

nie renderuje żadnego komponentu.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-20 16:27

Funkcja ReactDOM.render przyjmuje dwa argumenty — pierwszy to JSX do wyrenderowania, a drugi to element w którym ma się wyrenderować. Ty przekazałeś 3 argumenty.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Remigiusz Rajca		2018-03-20 17:16

czyli jeśli chcę wyświetlić dwa komponenty to muszę wypisać dwie funkcje ReactDOM.render, jedna pod drugą z właściwymi komponentami?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-20 17:23

Dwa komponenty gdzie?
W różnych miejscach? To tak.
W tym samym miejscu? To nie ;) Wtedy wystarczy je zamknąć w

albo, jeszcze lepiej, w <React.Fragment>.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Groszkiewicz		2019-01-04 11:27

Wystarczy, że przekażesz tablice jako pierwszy argument z propsem key [,
]

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

To już lepiej użyć React.Fragment, niż tablicy i dbać o to, aby key były zawsze unikalne :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Sara Emilia		2019-01-04 11:27

Hej, ja z kolei dodaje kilka funkcji w jednym skrypcie i nie dziala, dlaczego?

<script type="text/babel"> ReactDOM.render(

Witaj, świecie!

, document.getElementById('app') ); ReactDOM.render(

Hi, go!

document.getElementById('uuu') ); ReactDOM.render( Witaj piekny swiecie, zycie jest zbyt krotkie zeby umierac dzis! document.getElementById('okk') ); </script>

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

A czy masz w HTML-u elementy z id uuu i okk ?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil Mirosz		2019-01-04 11:27

Przed zrobieniem zadania poczytałem komentarze co okazało się bardzo pomocne, użyłem React.Fragment oraz stworzyłem funkcję render() :) aby wyświetlić kod na stronie :)

https://uploads.disquscdn.com/images/c1892d4294365d837c1d9e586a35ae411b5a783ba72708daf6864a3bfaee5fb8.png

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jan Kowalski		2019-01-04 11:27

Dwa komponenty obok siebie - chwila walki z konsolą przeglądarki (w zasadzie wystarczy przeczytać uwagi konsoli chroma co do kodu) i działa ;-)

    function MojKomponent(){
        return (
            <div style={{float: "left"}}>
                <h1>Hello World!</h1>
            </div>
        )
    }
    ReactDOM.render(
      (
          <div>
            <MojKomponent/>
            <MojKomponent/>
          </div>
      ),
      document.getElementById('app')
    );

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	loopold		2019-01-04 11:27

Na chwilę obecną bez guglowania nie wpadłem jak wyświetlić komponenty obok siebie. Ale przyjdzie czas będzie rada.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	daga		2019-02-23 10:17

Czy nie powinno być wzmianki, że komponenty mają być z wielkiej litery? W firefox mi nie wyświetliło komponentu i w konsoli pojawił mi się komunikat: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. Po zmianie nazwy komponentu na pisaną wielką literą literą wyświetla ok.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-25 19:30

Powinno być!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Krzyszof		2020-02-09 20:26

Mam pytanie, czemu rootowy element w html ma atrybut id a nie tak zalecany wszędzie class? Tak już jest czy tak powinno być z jakiegoś powodu?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-02-10 06:16

Nie ma nic złego w id, ale możesz użyć klasy lub dowolnego innego sposobu iddentyfikacji elementu.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Anna		2020-09-14 14:19

Fajny kurs :)
Jeśli ten wątek jeszcze żyje... To mam pytanie:
Zauważyłam, że można zdefiniować komponenty zarówno jako klasy, jak i jako funkcje. Ty wybrałeś tutaj funkcje. Dlaczego?

function KolejnyKomponent() {
return(

Jestem Anna i kocham życie!

); }

function MojKomponent(){
return(

Witaj, świecie!

); }

ReactDOM.render(
,
document.getElementById('app')
);

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Emilia		2021-07-13 11:00

Nie wiem w jakim programie napisac kod. W sublime?? visuial studio code?? W tym samym co pisze sie kod HTML i CSS.

 
 

Komentarz zaimportowany z WordPressa