LINKI
- Poznaj React.js
- React od Podstaw – React od Podstaw (macos) Tadeusz Aleksandruk
- React Tutorial For Beginners by Dev Ed – tutorial
- Learn React JS – Full Course for Beginners – Tutorial 2019 – bardzo dobry przewodnik od podstaw (macos)
- https://create-react-app.dev/docs/getting-started – środowisko i template do kursu
- https://create-react-app.dev/docs/getting-started – środowisko i template do kursu
- reactjs.org
- reactjs.org po polsku
Instalowanie react-a w Visual Studio Code
wg: React Tutorial For Beginners by Dev Ed
Otwieramy Visual Studio Code
Zakładka: Terminal -> New Terminal
W otwartym oknie Terminala przechodzimy do miejsca w którym chcemy utworzyć nowy folder z aplikacją. Ja stworzyłem w tym celu folder React. Korzystamy z komend: cd [nazwa foldera] , cd .. , pwd itp.
Teraz wpisujemy polecenie:npx create-react-app projectreact
Po instalacji otrzymujemy taki komunikat:Success! Created projectreact at ... /React/projectreact
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd projectreact
npm start
Zgodnie z sugestią wpisujemy polecenie:cd projectreact
i jesteśmy w folderze projektu.
Pojawiło się sporo nowych folderów, najważniejszym jest
> node_modules
w którym znajdują się wszystkie moduły konieczne do uruchomienia zapisanych skeczy, póki co nie interesuje nas jego zawartość
w pliku
{} package.json
znajdują się między innymi skrypty z których będziemy korzystać. Są to:
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
Póki co zostawiamy zawartość folderów i wracamy do okna Terminala. Wpisujemy komendę:npm start
Po chwili otrzymujemy informację:
Compiled successfully!
You can now view projectreact in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.3:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
W przeglądarce (u mnie Chrom) otwiera się okno z kręcącym się logo React-a i napisem:
Edit src/App.js and save to reload.
Learn React
Widzimy zatem naszą pierwszą aplikację w języku React.
Zgodnie z sugestią w edytorze otworzyłem plik App.js i dokonałem edycji. Spolszczyłem napisy i zmieniłem odnośnik na polski.
Tu kod: