React Element ve Component arasındaki fark nedir?
Bir element, DOM düğümleri veya diğer bileşenler açısından ekranda ne görünmesini istediğinizi açıklayan düz bir nesnedir. Elementler, sahnelerinde başka Elementler içerebilir. Bir React elementi oluşturmak ucuzdur. Bir element oluşturulduktan sonra asla mutasyona uğramaz.
React Element'in nesne gösterimi aşağıdaki gibi olacaktır:
const element = React.createElement('div', { id: 'login-btn' }, 'Login');
Yukarıdaki React.createElement() işlevi aşağıdaki nesneyi döndürür:
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}
Ve son olarak, ReactDOM.render() kullanarak DOM'a dönüştürülür:
<div id="login-btn">Login</div>
Oysa bir component birkaç farklı şekilde bildirilebilir. render() yöntemiyle bir sınıf olabilir. Alternatif olarak, basit durumlarda bir fonksiyon olarak tanımlanabilir. Her iki durumda da girdi olarak props alır ve çıktı olarak bir JSX ağacı döndürür:
const Button = ({ onLogin }) => (
<div id={'login-btn'} onClick={onLogin}>
Login
</div>
);
Ardından JSX, bir React.createElement() işlev ağacına aktarılır:
const Button = ({ onLogin }) =>
React.createElement('div', { id: 'login-btn', onClick: onLogin }, 'Login');
As a JavaScript developer, it's essential to have a solid understanding of the language and its various concepts. In this article, we will provide some common interview questions and their answers to
Frontend development is an essential part of web development that focuses on building the user interface of a website or application. Frontend developers are responsible for creating visually appealin
React is a popular JavaScript library used for building user interfaces. It has become increasingly popular over the years and is now widely used in web development. If you're preparing for a React in
As web applications become more complex, the size of the JavaScript bundles that are required to run them can become unwieldy. This can lead to slow load times and poor user experiences, particularly
Managing state in a complex application can be a daunting task, but Redux can help simplify the process. Redux is a popular library for managing state in JavaScript applications, and it can be used wi
React is a popular JavaScript library for building user interfaces. One of the key features that sets React apart from other libraries is its use of a virtual DOM. In this article, we will explore wha
React Native Reanimated, React Native uygulamalarında yüksek performanslı animasyonlar oluşturmak için kullanılan bir kütüphanedir. React Native, mobil uygulama geliştirmek için kullanılan açık kaynak
JSX, JavaScript XML, JavaScript ve XML'in birleşimidir. React gibi bazı JavaScript kütüphaneleri ve çerçeveleri, bileşenlerin görünümlerini tanımlamak için JSX sözdizimini kullanır. JSX, HTML benzeri