React’ı yeni yeni öğreniyorum. Öğrenirken en çok başlıkta yazdığım hatayla karşılaştım. Kendime ve size not düşerek aklımızın bir kenarında durmasını sağlamak için böyle bir not tutayım dedim.

import React, { Component } from 'react'

class BasitOrnek extends Component {
  render() {
    return (
       <h1>{this.props.title}</h1>
       <p>{this.props.description}</p>
    )
  }
}

şeklinde return içinde iki elemanlı tanımlama yaptığımızda React

…ContentDetail.jsx: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>? (72:16)

Yukarıdaki hatayı veriyor. Aslında hatada ne yapmamız gerektiğini de söylüyor. React jsx içinde return içinde birden fazla öge dönmeye izin vermiyor. Döneceksen bir tek sen dön diyor :)

React eğitim videolarını izlerken bunu belirtmişti eleman ama unutuyor insan. Çözüm bu elemanları saran kapsayıcı bir <div> tanımlamak.

import React, { Component } from 'react'

class BasitOrnek extends Component {
  render() {
    return (
       <div>
	       <h1>{this.props.title}</h1>
	       <p>{this.props.description}</p>
       </div>
    )
  }
}

React v16.2 ile birlikte daha da basit bir çözüm gelmiş.

import React, { Component } from 'react'

class BasitOrnek extends Component {
  render() {
    return (
       <>
	       <h1>{this.props.title}</h1>
	       <p>{this.props.description}</p>
       </>
    )
  }
}

Sadece <> ve </> ile daha basit kullanımı var. Bu kullanım için Babel 7+ gerekiyormuş.

Kaynaklar

Sayfa planlama sihirbazı grid-template-areas

CSS Izgara ile sihirbazlık yapıyoruz. grid-template-areas ve grid-area özelliklerini açıklıyoruz. Devamını oku

SVG ikonlarımıza gölge vermek

05 April 2019 tarihinde yayınlandı.