React Router

Giriş
Şu satırı dahil ederiz.

import { Router, Route, Switch, HashRouter, Link } from "react-router-dom";

Açıklaması şöyle.

React Router is a Frontend tool that makes it look like you are navigating between pages

Örnek
Şöyle yaparız. <Router> içinde <Link>'ler tanımlanır. Her link için de path tanımlanır.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";

import "./styles.css";

function App() {
  return (
    <Router>
      <div>
        <Link to="/" style={{ marginRight: "10px" }}>
          Home
        </Link>
        <Link to="/login">Login</Link>
      </div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
      </Switch>
    </Router>
  );
}

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

React State

Giriş
State constructor içinde atanır.

Örnek
this.state {a : b} şeklinde kullanırız. Şöyle yaparız.

class ControlForm extends Component {
  constructor() {
    super();
    this.state = { toggleActive: false, sizeSelect: "0", speed: 1.3, volume: .6};
    ...
  }

Props
Örnek
Dışarıdan state vermek için şöyle yaparız..

class App extends Component {
  state = {
    text: "Hello, How May I Help You Today?"
  }
  ...
  render() {
    return (
      <div>
        <button onClick={this.confirm(A, 10)} />
        ...
        <Barista text={this.state.text} />
      </div>
    )
  }
}

Dışarıdan verilen değerleri state yapmak için props.X şeklinde kullanırız. Şöyle yaparız

class Barista extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: props.text
    }
  }
  ...
}

Örnek
Elimizde şöyle bir kod olsun.

import React from 'react;
import './App.css';
import './Child/Child';

function App() {
return(
  <div className='App'>
  <Child text={'Text for child #1'}/>
  <Child text={'Text for child #2'}/>
</div>

export default App

Dışarıdan verilen değerleri kullanmak için şöyle yaparız.

import React from 'react';
import './Child.css';


function Child(props) {
   return (
     <div className='h4content'>
       <h4>{props.text}</h4>
     </div>
  )
}

export default Child