React nedir?
React, Facebook tarafından oluşturulan bir JavaScript kitaplığıdır.
React, bir Kullanıcı Arayüzü (UI) kitaplığıdır
React, UI bileşenleri oluşturmak için bir araçtır
React Hızlı Başlangıç Eğitimi
Bu bir hızlı başlangıç öğreticisidir.
Başlamadan önce, aşağıdakiler hakkında temel bir anlayışa sahip olmalısınız:
Tam bir eğitim için:
React Eğitimini Başlatın ❯Bir HTML Sayfasına React Eklemek
Bu hızlı başlangıç öğreticisi, aşağıdaki gibi bir sayfaya React ekleyecektir:
Örnek
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Babil nedir?
Babel, biçimlendirme veya programlama dillerini JavaScript'e çevirebilen bir JavaScript derleyicisidir.
Babel ile JavaScript'in en yeni özelliklerini kullanabilirsiniz (ES6 - ECMAScript 2015).
Babel farklı dönüşümler için kullanılabilir. React, JSX'i JavaScript'e dönüştürmek için Babel'i kullanır.
Babel'i kullanmak için <script type="text/babel"> gerektiğini lütfen unutmayın.
JSX nedir?
JSX, Java S cript X ML anlamına gelir .
JSX, JavaScript'in XML/HTML benzeri bir uzantısıdır.
Örnek
const element = <h1>Hello World!</h1>
Yukarıda gördüğünüz gibi, JSX JavaScript veya HTML değildir.
JSX, JavaScript'in ES6'nın tüm gücüyle (ECMAScript 2015) birlikte gelen bir XML sözdizimi uzantısıdır.
Tıpkı HTML gibi, JSX etiketlerinin de etiket adları, nitelikleri ve çocukları olabilir. Bir öznitelik küme parantezleri içine alınmışsa, değer bir JavaScript ifadesidir.
JSX'in HTML metin dizesi çevresinde tırnak işaretleri kullanmadığını unutmayın.
Tepki DOM Oluşturma
HTML öğelerini oluşturmak (görüntülemek) için ReactDom.render() yöntemi kullanılır:
Örnek
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX İfadeleri
İfadeler, JSX'te küme parantezlerine sarılarak kullanılabilir.
Örnek
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Tepki Elemanları
React uygulamaları genellikle tek bir HTML öğesi etrafında oluşturulur .
React geliştiricileri genellikle buna kök düğüm (kök öğe) der:
<div id="root"></div>
Tepki öğeleri şöyle görünür:
const element = <h1>Hello React!</h1>
Öğeler , ReactDOM.render() yöntemiyle oluşturulur (görüntülenir):
ReactDOM.render(element, document.getElementById('root'));
Tepki öğeleri değişmezdir . Değiştirilemezler.
Bir React öğesini değiştirmenin tek yolu, her seferinde yeni bir öğe oluşturmaktır:
Örnek
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Tepki Bileşenleri
React bileşenleri JavaScript işlevleridir.
Bu örnek, "Hoş Geldiniz" adlı bir React bileşeni oluşturur:
Örnek
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React, bileşenler oluşturmak için ES6 sınıflarını da kullanabilir.
Bu örnek, bir oluşturma yöntemiyle Welcome adlı bir React bileşeni oluşturur :
Örnek
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
React Bileşen Özellikleri
Bu örnek, özellik bağımsız değişkenleriyle "Hoş Geldiniz" adlı bir React bileşeni oluşturur:
Örnek
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React, bileşenler oluşturmak için ES6 sınıflarını da kullanabilir.
Bu örnek ayrıca, özellik bağımsız değişkenleriyle "Hoş Geldiniz" adlı bir React bileşeni oluşturur:
Örnek
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSX Derleyici
Bu sayfadaki örnekler tarayıcıda JSX'i derler.
Üretim kodu için derleme ayrıca yapılmalıdır.
React Uygulaması Oluştur
Facebook, bir React uygulaması oluşturmak için ihtiyacınız olan her şeyi içeren bir Create React Uygulaması oluşturdu.
React, JSX ve ES6, otomatik önek CSS dosyalarını derlemek için Webpack kullanan bir geliştirme sunucusudur.
Create React App, koddaki hataları test etmek ve uyarmak için ESLint'i kullanır.
Create React App oluşturmak için terminalinizde aşağıdaki kodu çalıştırın:
Örnek
npx create-react-app react-tutorial
Node.js 5.2 veya daha yüksek bir sürüme sahip olduğunuzdan emin olun. Aksi takdirde, npx'i yüklemelisiniz:
Örnek
npm i npx
Uygulamanızın kalmasını istediğiniz yerden bir klasör başlatın:
Örnek
C:\Users\myUser>npx create-react-app react-tutorial
Başarı Sonucu:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
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 react-tutorial
npm start