ReactJS Kullanımı

Sabit belitmek için

const p1 = <h1>foo</h1>;

 

İd vermek için

const p1 = <p id=”large”>foo</p>;

const p2 = <p id=”small”>bar</p>;

 

Link vermek

<a href=”http://www.example.com”>Welcome to the Web</a>;

 

Div kullanımı(eğer kullanmazsak kod hata verebilir)

const blog = (

<div>

<img src=”pics/192940u73.jpg” />

<h1>

Welcome to Dan’s Blog!

</h1>

<article>

Wow I had the tastiest sandwich today.  I <strong>literally</strong> almost freaked out.

</article>

</div>

);

 

 

Kütüphane eklenmesi ve hello word yazılması

 

import React from ‘react’;

import ReactDOM from ‘react-dom’;

 

// Copy code here:

ReactDOM.render(<h1>Hello world</h1>, document.getElementById(‘app’));

 

 

 

ClassName ile ulaşma ve oluşturma

 

import React from ‘react’;

import ReactDOM from ‘react-dom’;

 

// Write code here:

const myDiv = <div className=”big”>I AM A BIG DIV</div>;

 

ReactDOM.render(myDiv, document.getElementById(‘app’));

 

 

Boşluk Kullanımı (  <br/>)

 

const profile = (

<div>

<h1>I AM JENKINS</h1>

<img src=”images/jenkins.png” />

<article>

I LIKE TO SIT

<br/>

JENKINS IS MY NAME

<br/>

THANKS HA LOT

</article>

</div>

);

 

 

React ile matematik işlemleri nasıl yapılır?

Eğer alttaki resimdeki gibi bir kullanım yaparsak bize string bir değer verir.

 

Eğer alt resimdeki gibi kullanırsak gerekli matematiksel işlemi yapabiliriz. Yani tek yapmamız gereken süslü parantez kullanımı.

Örnek:

import React from ‘react’;

import ReactDOM from ‘react-dom’;

 

// Write code here:

const math = (

<h1>

2 + 3 = {2 + 3}

</h1>

);

ReactDOM.render(math,document.getElementById(‘app’));

 

 

Sabit değişkeni string olarak nasıl çağırabiliriz?

 

 

Örnek:

Nesne Olarak nasıl kullanılır?

 

 

Onclick kullanımı

 

 

İf Else Kullanımı

 

import React from ‘react’;

import ReactDOM from ‘react-dom’;

 

function coinToss() {

// This function will randomly return either ‘heads’ or ‘tails’.

return Math.random() < 0.5 ? ‘heads’ : ‘tails’;

}

 

const pics = {

kitty: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg‘,

doggy: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg

};

let img;

 

// if/else statement begins here:

if (coinToss() === ‘heads’){

img = <img src={pics.kitty} />;

}

else{

img = <img src={pics.doggy} />;

}

ReactDOM.render(img,document.getElementById(‘app’));

 

 

Örnek(if kullanmadan karşılaştırma)

 

import React from ‘react’;

import ReactDOM from ‘react-dom’;

 

function coinToss () {

// Randomly return either ‘heads’ or ‘tails’.

return Math.random() < 0.5 ? ‘heads’ : ‘tails’;

}

 

const pics = {

kitty: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg‘,

doggy: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg

};

 

const img = <img src={pics[coinToss() === ‘heads’ ? ‘kitty’ : ‘doggy’]} />;

 

ReactDOM.render(

img,

document.getElementById(‘app’)

);

 

İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.