Reageer Aan die gang


Om React in produksie te gebruik, benodig jy npm wat by Node.js ingesluit is .

Om 'n oorsig te kry van wat React is, kan jy React-kode direk in HTML skryf.

Maar om React in produksie te gebruik, moet jy npm en Node.js geïnstalleer hê.


Reageer direk in HTML

Die vinnigste manier om React te begin leer, is om React direk in jou HTML-lêers te skryf.

W3Skole Spasies

Die maklikste manier om te begin met die skep van HTML-lêers is W3Schools Spaces!

Dit is die perfekte plek om jou werk te skep, te redigeer en met ander te deel!

Begin gratis ❯

Begin deur drie skrifte in te sluit, die eerste twee laat ons React-kode in ons JavaScripts skryf, en die derde, Babel, laat ons toe om JSX-sintaksis en ES6 in ouer blaaiers te skryf.

Jy sal meer leer oor JSX in die React JSX- hoofstuk.

Voorbeeld

Sluit drie CDN's in jou HTML-lêer in:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

    <div id="mydiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>

  </body>
</html>

Hierdie manier om React te gebruik kan in orde wees vir toetsdoeleindes, maar vir produksie sal jy 'n React-omgewing moet opstel .


w3schools CERTIFIED . 2022

Word gesertifiseer!

Voltooi die React-modules, doen die oefeninge, neem die eksamen en word w3schools-gesertifiseer!!

$ 95 INSKRYF

Die opstel van 'n React-omgewing

As jy npx en Node.js geïnstalleer het, kan jy 'n React-toepassing skep deur create-react-app.

As jy voorheen create-react-appwêreldwyd geïnstalleer het, word dit aanbeveel dat jy die pakket deïnstalleer om te verseker dat npx altyd die nuutste weergawe van gebruik create-react-app.

Om te verwyder, voer hierdie opdrag uit: npm uninstall -g create-react-app.

Voer hierdie opdrag uit om 'n React-toepassing te skep met die naam my-react-app:

npx create-react-app my-react-app

Dit create-react-appsal alles opstel wat jy nodig het om 'n React-toepassing te laat loop.


Begin die React-toepassing

Nou is jy gereed om jou eerste regte React-toepassing uit te voer!

Voer hierdie opdrag uit om na die my-react-appgids te beweeg:

cd my-react-app

Voer hierdie opdrag uit om die React-toepassing uit te voer my-react-app:

npm start

'n Nuwe blaaiervenster sal verskyn met jou nuutgeskepte React-toepassing! Indien nie, maak jou blaaier oop en tik localhost:3000in die adresbalk.

Die resultaat:



Wysig die Reageer-toepassing

So ver so goed, maar hoe verander ek die inhoud?

Kyk in die my-react-appgids, en jy sal 'n srcgids vind. Binne die srcgids is daar 'n lêer genaamd App.js, maak dit oop en dit sal so lyk:

/myReactApp/src/App.js:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Probeer om die HTML-inhoud te verander en stoor die lêer.

Let daarop dat die veranderinge onmiddellik sigbaar is nadat jy die lêer gestoor het, jy hoef nie die blaaier te herlaai nie!

Voorbeeld

Vervang al die inhoud binne die <div className="App">met 'n <h1>element.

Sien die veranderinge in die blaaier wanneer jy op Stoor klik.

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

Let daarop dat ons die invoere wat ons nie nodig het nie (logo.svg en App.css) verwyder het.

Die resultaat:


Wat is volgende?

Nou het jy 'n React-omgewing op jou rekenaar, en jy is gereed om meer oor React te leer.

In die res van hierdie tutoriaal sal ons ons "Show React"-nutsding gebruik om die verskillende aspekte van React te verduidelik, en hoe dit in die blaaier vertoon word.

As jy dieselfde stappe op jou rekenaar wil volg, begin deur die srcvouer af te stroop om net een lêer te bevat: index.js. Jy moet ook enige onnodige reëls kode binne die index.js lêer verwyder om hulle soos die voorbeeld in die "Show React"-nutsding hieronder te laat lyk:

Voorbeeld

Klik op die "Laat voorbeeld"-knoppie om die resultaat te sien.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';

const myfirstelement = <h1>Hello React!</h1>

ReactDOM.render(myfirstelement, document.getElementById('root'));


Toets jouself met oefeninge

Oefening:

Voer die korrekte ReactDOM-metode in om die React-element na die DOM weer te gee.

ReactDOM.(myElement, document.getElementById('root'));