React props.children

Giriş
Açıklaması şöyle. Bileşenin açma ve kapama tag'leri arasındaki şeyler props.children olarak gelir.

What is ‘props.children’?

The React docs say that you can use props.children on components that represent ‘generic boxes’ and that don’t know their children ahead of time. For me, that didn’t really clear things up. I’m sure for some, that definition makes perfect sense but it didn’t for me.

My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component.

Örnek
Elimizde şöyle bir bileşen olsun.

function Layout(props) {
  return(
    <React.Fragment>
      <Navbar />
      {props.children}
    </React.Fragment>
  );
}

Şöyle yaparız.

<Layout>
  <Switch>
    <Route exact path="/badges" component={Badges}/>
    <Route exact path="/badges/new" component={BadgeNew} />
  </Switch>
</Layout>

Örnek
Elimizde şöyle bir bileşen olsun.

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

Şöyle yaparız

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

String Literal

String Literal
Giriş
String Literal ve String nesnesi farklı şeylerdir. String Literal object değildir string nesnesidir. String literal back tick, çift tırnak veya tek tırnak arasında olabilir. Şöyle olabilir.

`...`
"..."
'...'

Örnek
Elimizde şöyle bir kod olsun

console.log(typeof (new String('ddd')))
console.log(typeof ('ddd'))

Çıktı olarak şunu alırız.

object
string

Örnek
in operator için açıklama şöyle.

You must specify an object on the right side of the in operator. For example, you can specify a string created with the String constructor, but you cannot specify a string literal.

Şu kod in operator ile çalışır.

let let1 = new String('test');
console.log(let1.length);
console.log('length' in let1)

Çıktı olarak şunu alırız.

4
true

Ancak şu kod çalışmaz.

var let1 = 'test';
console.log(let1.length);
console.log('length' in let1);

Çıktı olarak Error alırız.

Template Literal
Backtick içindeki ${variable} şeklinde kullanımdır.

Örnek
Şöyle yaparız

const name = "Alice";

const age = 42;

console.log(`${name} is ${age} years old`)

React.memo

Giriş
Açıklaması şöyle.

If you want to avoid the component from re-rendering when it's parent does, you would need to use React.memo. React isn't going to automatically stop rendering the component just because it doesn't have any props.

Örnek
Şöyle yaparız.

function App() {
  const [, setToggle] = React.useState(true);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button type="button" onClick={() => setToggle(x => !x)}>
        Re-render Parent
      </button>
      <br />
      <Gurdingo />
      <br />
      <GurdingoMemo />
    </div>
  );
}

const Gurdingo = () => {
  React.useEffect(() => {
    console.log("Rendering");
  });
  return <>100</>;
};

const GurdingoMemo = React.memo(() => {
  React.useEffect(() => {
    console.log("Rendering Memoized Gurdingo");
  });
  return <>100</>;
});

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);