React Başlarken
React'i üretimde kullanmak için Node.js'de bulunan npm'ye ihtiyacınız var .
React'in ne olduğuna dair genel bir bakış elde etmek için React kodunu doğrudan HTML'ye yazabilirsiniz.
Ancak React'i üretimde kullanmak için npm ve Node.js'nin kurulu olması gerekir.
Doğrudan HTML'de Tepki Verin
React'i öğrenmeye başlamanın en hızlı yolu, doğrudan HTML dosyalarınıza React yazmaktır.
W3Schools Alanları
HTML dosyaları oluşturmaya başlamanın en kolay yolu W3Schools Spaces!
Çalışmanızı oluşturmak, düzenlemek ve başkalarıyla paylaşmak için mükemmel bir yerdir!
Üç komut dosyası ekleyerek başlayın, ilk ikisi JavaScript'lerimize React kodu yazmamıza izin veriyor ve üçüncüsü Babel, eski tarayıcılarda JSX sözdizimi ve ES6 yazmamıza izin veriyor.
React JSX bölümünde JSX hakkında daha fazla bilgi edineceksiniz .
Örnek
HTML dosyanıza üç CDN ekleyin:
<!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>
React'i bu şekilde kullanma, test amacıyla uygun olabilir, ancak üretim için bir React ortamı kurmanız gerekir .
Sertikalı olmak!
95 $ KAYIT
Bir React Ortamı Ayarlama
npx ve Node.js kuruluysa, kullanarak bir React uygulaması oluşturabilirsiniz create-react-app.
Daha önce create-react-appglobal olarak yüklediyseniz, npx'in her zaman create-react-app.
Kaldırmak için şu komutu çalıştırın: npm uninstall -g create-react-app.
Adlı bir React uygulaması oluşturmak için bu komutu çalıştırın
my-react-app:
npx create-react-app my-react-app
Bir create-react-appReact uygulamasını çalıştırmak için ihtiyacınız olan her şeyi ayarlayacaktır.
React Uygulamasını Çalıştırın
Artık ilk gerçek React uygulamanızı çalıştırmaya hazırsınız !
my-react-appDizine gitmek için bu komutu çalıştırın :
cd my-react-app
React uygulamasını çalıştırmak için bu komutu çalıştırın
my-react-app:
npm start
Yeni oluşturduğunuz React Uygulamanız ile yeni bir tarayıcı penceresi açılacaktır! Değilse, tarayıcınızı açın ve
localhost:3000adres çubuğuna yazın.
Sonuç:
React Uygulamasını Değiştirin
Buraya kadar iyi ama içeriği nasıl değiştirebilirim?
Dizine bakın ve bir klasör my-react-appbulacaksınız
. srcKlasörün içinde
srcadında bir dosya var
App.js, açın ve şöyle görünecek:
/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;HTML içeriğini değiştirmeyi deneyin ve dosyayı kaydedin.
Dosyayı kaydettikten hemen sonra değişikliklerin görünür olduğuna dikkat edin, tarayıcıyı yeniden yüklemeniz gerekmez!
Örnek
İçindeki tüm içeriği <div className="App">bir
<h1>öğeyle değiştirin.
Kaydet'i tıkladığınızda tarayıcıdaki değişiklikleri görün.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;İhtiyacımız olmayan içe aktarmaları kaldırdığımıza dikkat edin (logo.svg ve App.css).
Sonuç:
Sıradaki ne?
Artık bilgisayarınızda bir React Environment var ve React hakkında daha fazla bilgi edinmeye hazırsınız.
Bu öğreticinin geri kalanında, React'in çeşitli yönlerini ve bunların tarayıcıda nasıl görüntülendiğini açıklamak için "React'i Göster" aracımızı kullanacağız.
Aynı adımları bilgisayarınızda da uygulamak istiyorsanız, srcklasörü yalnızca bir dosya içerecek şekilde soyun: index.js. index.js
Ayrıca , aşağıdaki "React React" aracındaki örneğe benzemeleri için dosyanın içindeki gereksiz kod satırlarını da kaldırmalısınız :
Örnek
Sonucu görmek için "Örneği Çalıştır" düğmesini tıklayın.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));