kol2 reak

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
posts.jsx        WYŚWIETLENIE DANYCH W KOMPONENCIE
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

import React, {Component} from "react";
// import 'bootstrap/dist/css/bootstrap.min.css';

class Posts extends Component {

    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: [],
        };
    }

    componentDidMount() {
        fetch("https://taw-posts.herokuapp.com/api/posts")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        items: result
                    });
                    console.log(result)
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
    }

    render() {

        const {items} = this.state;

        return (
            <React.Fragment>
                {items.map((item, key) => {
                    return <div key={key}>
                        <div className="card">
                            <img className="card-img-top" src={item.image} alt="Card image cap" />
                                <div className="card-body">
                                    <h5 className="card-title">{item.title}</h5>
                                    <p className="card-text">{item.text}</p>
                                    <a href="#" className="btn btn-primary">Go somewhere</a>
                                </div>
                        </div>
                    </div>
                })}
            </React.Fragment>)
    }
}

export default Posts;


=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
STWORZENIE NOWEGO KOMPONENTU       ---> NAJPIERW PRZYCISK KTORY ZMIENIA NAPIS, ALERT, PROGRES BAR            home.jsx
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

import React, {useState} from "react";

const Home = () =>
{
    const [str, setStr] = useState('World');

    return (
        <div className="jumbotron">
            <p>Hello, {str}</p>
            <button onClick={() => setStr('Mikołaj')}>Click</button>
        </div>
    );
};

export default Home;
-----------------------------------------------------
import React, { useState } from "react";

const Home2 = () => {

    const [showResults, setShowResults] = React.useState(false)
    const onClick = () => setShowResults(true)
    const onClick2 = () => setShowResults(false)
    return (
        <div>
            {showResults ? <Results /> : null}
            <button type="button" class="btn btn-primary" onClick={onClick}>Poka Alerta</button>
            <button type="button" class="btn btn-secondary" onClick={onClick2}>Schowaj Alerta</button>

        </div>
    )
}

const Results = () => (
    <div class="alert alert-primary" role="alert">
        This is a primary alert—check it out!
    </div>
);

export default Home2;
-----------------------------------------------------
import React, { useState } from "react";

const Home3 = () => {

    let sto = 'progress-bar w-100';
    const [isActive, setActive] = useState("false");
    const handleToggle = () => {
        setActive(!isActive);
    };
    return (

        <div>
            <div class="progress">
                <div className={!isActive ? sto : null} role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <br />
            <button type="button" class="btn btn-primary" onClick={handleToggle}>Wal stówe</button>
        </div>
    )


}
export default Home3;
---------------------------------------------------

DODANIE NAWIGACJI           navbar.jsx


import React, { Component } from "react";
import { Link } from "react-router-dom";

class Navbar extends Component {

    render() {
        return (
            <div>
                <ul className="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li className="nav-item" role="presentation">
                        <Link to="/home" className="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                            aria-controls="pills-home" aria-selected="true">Home</Link>
                    </li>
                    <li className="nav-item" role="presentation">
                        <Link to="/posts" className="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                            aria-controls="pills-home" aria-selected="true">Posts</Link>
                    </li>
                    <li className="nav-item" role="presentation">
                        <Link to="/home2" className="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                            aria-controls="pills-home" aria-selected="true">Home2</Link>
                    </li>
                    <li className="nav-item" role="presentation">
                        <Link to="/home3" className="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                            aria-controls="pills-home" aria-selected="true">Home3</Link>
                    </li>
                </ul>
            </div>
        );
    }


}

export default Navbar;

------------------------
App.js                 IMPORTY I DALSZY NAVBAR (SWITCH)

import './App.css';
import { Route, Switch, Redirect } from "react-router-dom";
import Posts from "./components/posts";
import 'bootstrap/dist/css/bootstrap.min.css'
import Home from './components/MBhome';
import Navbar from './components/MBnavbar';
import Home2 from './components/MBhome2';
import Home3 from './components/MBhome3';


function App() {

  return (
    <div className="container-fluid">
      <Navbar />
      <div className="container">
        {/* <Home /> */}
        <div className="content">
          <Switch>
            <Route path="/posts" exact component={Posts} />
            <Route path="/home" component={Home} />
            <Route path="/home2" component={Home2} />
            <Route path="/home3" component={Home3} />
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default App;




=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
INDEX.JS             IMPORTY I RENDER
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <BrowserRouter>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </BrowserRouter>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();