React – podobno najlepsza biblioteka JS

LINKI

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:

Dodaj komentarz