[[oktatas:web:react|< React]]

====== React ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Kezdés =====


Weblap a kezdéshez:
  * https://create-react-app.dev/

Projekt készítése:
  npx create-react-app app01


Az első indításnál megkérdezi, hogy telepítsük-e a 
create-react-app csomagot:

<code>
npx create-react-app app01
Need to install the following packages:
  create-react-app
Ok to proceed? (y)
</code>

Enter lenyomása után indul a letöltési és a projekt készítése.

Ha elkészült a projekt lépjünk be a projekt könyvtárába:
  cd app01

A szerver indítása:
  npm start


===== JSX kifejezés kiértékelése =====

Tegyünk az App.js fájlba egy új sort:
  <p>{ 3 * 5 }</p>

<code javascript>

<p>{ 3 * 5 }</p>

</code>

Nézzük meg weboldalon.


===== JSX megjelenítés =====
Nem jelenik meg:
<code>
{ false &&
  <p>{ 3 * 5 }</p>
}
</code>


Megjelenik:
<code>
{ true &&
  <p>{ 3 * 5 }</p>
}
</code>

===== Lehetséges hiba =====

A projekt létrehozásakor:

<code>
npx create-react-app app01
Need to install the following packages:
  create-react-app
Ok to proceed? (y)

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

</code>

Megoldás:
  npx clear-npx-cache

Vagy:
  npx create-react-app@latest app01