Reaguj Pierwsze kroki
Aby używać Reacta w środowisku produkcyjnym, potrzebujesz npm, który jest dołączony do Node.js .
Aby uzyskać przegląd tego, czym jest React, możesz napisać kod React bezpośrednio w HTML.
Aby jednak używać Reacta w środowisku produkcyjnym, potrzebujesz zainstalowanego npm i Node.js.
Reaguj bezpośrednio w HTML
Najszybszym sposobem na rozpoczęcie nauki Reacta jest zapisanie go bezpośrednio w plikach HTML.
Przestrzenie W3Schools
Najprostszym sposobem na rozpoczęcie tworzenia plików HTML jest W3Schools Spaces!
To idealne miejsce do tworzenia, edytowania i udostępniania swojej pracy innym!
Zacznij od dołączenia trzech skryptów, pierwsze dwa pozwalają nam napisać kod React w naszych skryptach JavaScript, a trzeci, Babel, pozwala nam pisać składnię JSX i ES6 w starszych przeglądarkach.
Więcej o JSX dowiesz się w rozdziale React JSX .
Przykład
Dołącz trzy CDN do pliku HTML:
<!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>
Ten sposób korzystania z Reacta może być w porządku do celów testowych, ale w przypadku produkcji będziesz musiał skonfigurować środowisko React .
Zostać certyfikowanym!
95 $ ZAPISZ
Konfigurowanie środowiska reakcji
Jeśli masz zainstalowane npx i Node.js, możesz utworzyć aplikację React za pomocą create-react-app.
Jeśli wcześniej instalowałeś create-react-appją globalnie, zaleca się odinstalowanie pakietu, aby upewnić się, że npx zawsze używa najnowszej wersji create-react-app.
Aby odinstalować, uruchom to polecenie: npm uninstall -g create-react-app.
Uruchom to polecenie, aby utworzyć aplikację React o nazwie
my-react-app:
npx create-react-app my-react-app
Skonfiguruje wszystko , create-react-appczego potrzebujesz do uruchomienia aplikacji React.
Uruchom aplikację React
Teraz jesteś gotowy do uruchomienia swojej pierwszej prawdziwej aplikacji React!
Uruchom to polecenie, aby przejść do my-react-appkatalogu:
cd my-react-app
Uruchom to polecenie, aby uruchomić aplikację React
my-react-app:
npm start
Pojawi się nowe okno przeglądarki z nowo utworzoną aplikacją React! Jeśli nie, otwórz przeglądarkę i wpisz
localhost:3000w pasku adresu.
Wynik:
Zmodyfikuj aplikację React
Jak dotąd tak dobrze, ale jak mogę zmienić zawartość?
Zajrzyj do my-react-appkatalogu, a znajdziesz
srcfolder. Wewnątrz
srcfolderu znajduje się plik o nazwie
App.js, otwórz go i będzie wyglądał tak:
/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;Spróbuj zmienić zawartość HTML i zapisz plik.
Zauważ, że zmiany są widoczne natychmiast po zapisaniu pliku, nie musisz ponownie ładować przeglądarki!
Przykład
Zastąp całą zawartość wewnątrz <div className="App">elementem
<h1>.
Zobacz zmiany w przeglądarce po kliknięciu Zapisz.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Zauważ, że usunęliśmy importy, których nie potrzebujemy (logo.svg i App.css).
Wynik:
Co dalej?
Teraz masz na swoim komputerze środowisko React i jesteś gotowy, aby dowiedzieć się więcej o React.
W dalszej części tego samouczka użyjemy naszego narzędzia „Pokaż React”, aby wyjaśnić różne aspekty React i sposób ich wyświetlania w przeglądarce.
Jeśli chcesz wykonać te same czynności na komputerze, zacznij od rozebrania srcfolderu tak, aby zawierał tylko jeden plik: index.js. Należy również usunąć wszelkie niepotrzebne wiersze kodu z index.js
pliku, aby wyglądały jak w przykładzie w narzędziu „Pokaż reakcję” poniżej:
Przykład
Kliknij przycisk „Uruchom przykład”, aby zobaczyć wynik.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));