Tepki temelleri kavramı

React, Facebook tarafından oluşturulan bir ön uç JavaScript kitaplığıdır. Yeniden kullanılabilir UI öğeleri oluşturmaya yardımcı olan bileşen tabanlı bir yaklaşımı izler.

1. React'te JSX

Genellikle JSXsadece sözdizimsel şekerReact.createElement(component, props, ...children)

JSXkod :

<div>My Name is Hossain</div>

React.createElement("div", null, "My Name is Hossain");

Herhangi bir javascript ifadesini props ile iletebiliriz {}. Aşağıdaki örneği akıtmak:

<Component sum={5 + 9 + 1} />

3. Dize Değişmezleri

Bir dizeyi prop olarak geçirebiliriz. orada iki JSX ifadesi eşdeğerdir. HTML özniteliği ile aynıdır.

<Component name="Hossain" />
<Component name={'Hossain'} />

Zaten bir nesne olarak sahne donanımına sahip olabiliriz ve JSX'te sahne donanımına geçtik. ...props nesnelerini iletmek için “spread” operatörünü kullanabiliriz .

const App = () => {
  const props = {name: 'Hossain', age: 20};
  
  return <Person {...props} />
}

Daha fazla JSX'i alt öğe olarak props.childrenveya İç içe geçmiş bileşeni HTML ile aynı şekilde görüntüleyebilirsiniz.

<Container>
  <App1 />
  <App2 />
</Container>

defaultPropsclassbileşende özellik tanımlanabilir . içinde varsayılan sahne öğelerini ayarlar class. Bu kullanılır undefindama kullanılmaznull

class Container extends React.Component {
  // ...
}
Container.defaultProps = {
  color: 'red'
};

Şu anda oluşturma işleminizin ayarlandığından emin değilseniz, Chrome için React Developer Tools'u yükleyebilirsiniz . React prodüksiyon modu ile sitenizi ziyaret ederseniz, React Developer Tools arka plan renginin koyu olduğunu görebilirsiniz. ancak siteniz geliştirme havasında, React Developer Tools arka plan renginin kırmızı olduğunu görebilirsiniz. sitenizi ile kurarsanız, create-react-appbu övgüyü akıtabilirsiniz:

npm run build
or 
yarn build

Şimdiye kadar statik verileri kullanabiliriz, ancak durum değişikliği için veriler değiştiğinde useStateformu kullanabiliriz React hooks. akan örnek patladı: useStatebir fonksiyondur. Değerin varsayılan değeri count. değeri değiştirmek setCount()için . değer değişiyor.statecount

const App = () => {
  [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1)
  }
  
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

JSX'te koşullu işleme için üçlü operatörü kullanmak mümkündür.

<div>{name ? name : 'What is your name?'}</div>

Tepki öğesi için olayları işlemek, DOM öğesindeki olayları işlemeye çok benzer. bazı sözdizimi ertelemeleri var

• Tepki öğesi adı camelCase kullanın.
• JSX ile bir işlevi bir dize yerine olay işleyicisi olarak iletebilirsiniz.

<button onClick={() => console.log('Clicked me')}>
    Click me
</button>