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

CSS ile yükleniyor animasyonu yapmak

CSS ile yükleniyor animasyonu yapmak Devamını oku

CSS scroll-snap

20 November 2023 tarihinde yayınlandı.

CSS ile buzlu cam efekti yapmak

13 November 2023 tarihinde yayınlandı.