React nedir?

React bir JavaScript kitaplığıdır. React incedir ve onu diğer 3. parti kitaplıklarla karıştırmak son derece kolaydır.

npx create-react-app my-app
cd my-app
npm start

React örneklerine bakarken muhtemelen JSX'in çalıştığını görmüşsünüzdür .

const rootElement =
 React.createElement(‘div’, {},
   React.createElement(‘h1’, {style: {color: ‘red’}}, 
     ‘The world is yours’),
   React.createElement(‘p’, {}, 
     ‘Say hello to my little friend’)
 )
ReactDOM.render(rootElement, document.getElementById(‘app’))

Sanal DOM (VDOM), bir kullanıcı arayüzünün temsilinin standart veya "sanal" bir bellekte depolandığı ve ReactDOM gibi bir kitaplık tarafından "gerçek" bir DOM ile senkronize edildiği bir programlama konseptidir. Bu sürece yeniden birleşme denir. Yanıt olarak "sanal kubbe" uygulamasında bir ağaç gibi görünüyorlar.

Bileşen:

React bileşenleri, verilerde farklı görünümde benzerdir. Bir web sitesinde çok fazla bölüm var. Bazen bazı bölümlerin yapılarının aynı olduğunu ancak verilerin dinamik olduğunu görüyoruz. Bu durumda kodlarımızı yeniden yazmamız gerekir. React bileşenini kullanarak kodlarımızı kopyalayamayız. Bir bileşenin ana güzelliği budur.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

Stilli bileşenler, uygulamanızda JavaScript ve CSS karışımı ile yazılan bileşen düzeyinde stilleri kullanmanıza olanak tanıyan React ve React Native için bir kitaplıktır.

First we need to install styled-components library
npm install styled-components --save
Now we can create a variable by selecting a particular HTML element where we store our style keys
const Div = styled.htmlElemnet`color: pink`

Bazen bazı verileri bir bileşenden diğer bileşenlere aktarmamız gerekir. Props, üst bileşenden alt bileşene veri aktarabileceğimiz bir yöntemdir. Küçük tip uygulamalar için aksesuarlar çok etkilidir.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

• useState
• useEffect
• useContext

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

npm install react-router-dom

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

React'te, satır içi stiller bir dizge olarak belirtilmez. Bunun yerine, anahtarı stil adının camelCased sürümü olan ve değeri stilin değeri olan, genellikle bir dize olan bir nesneyle belirtilirler.

import React from ‘react’;
const divStyle = { margin: ‘40px’, border: ‘5px solid pink’};
const pStyle = { fontSize: ‘15px’, 
textAlign: ‘center’}; const Box = () => ( 
    <div style={divStyle}> 
        <p style={pStyle}>Get started with inline style</p> 
    </div>
); export default Box;

Context-API, bileşenlerden bazı verileri iletmek için başka bir yöntemdir. Props'un üst bileşenden alt bileşene veri aktarabildiğini biliyoruz. Ancak bazen verileri çocuktan ebeveyne veya aynı olmayan diğer bileşenlere aktarmamız gerekir. Bu durumda, Context-API kullanıyoruz ve react uygulamamızdaki her bileşenden kolayca veri aktarıyoruz.