rlax/Api.js

## Api.js
import "./App.css";
import React, { Component } from "react";

class App extends Component {
  state = {
    data: [[], [], [], []],
  };

  // Code is invoked after the component is mounted/inserted into the DOM tree.
  componentDidMount() {
    const url =
      "https://en.wikipedia.org/w/api.php?action=opensearch&search=Russia&format=json&origin=*";

    fetch(url)
      .then((result) => result.json())
      .then((result) => {
        this.setState({
          data: result,
        });
      });
  }

  render() {
    const { data } = this.state;
    const [, titles] = data;

    const result = titles.map((entry, index) => {
      const style = { marginLeft: `${Math.random() * 100}px` };
      return (
        <div>
          <li className={"item"} style={style} key={index}>
            <a href={data[3][index]}>{entry}</a>
          </li>
        </div>
      );
    });

    return (
      <div style={{ height: "10%", backgroundColor: "navajowhite" }}>
        <ul className="list">{result}</ul>
      </div>
    );
  }
}

export default App;

## App.js
import "./App.css";
import React, { useState } from "react";
import { Table } from "./Table";

const state = {
  employees: [
    {
      name: "Charlie",
      job: "Janitor",
    },
    {
      name: "Mac",
      job: "Bouncer",
    },
    {
      name: "Dee",
      job: "Aspring actress",
    },
    {
      name: "Dennis",
      job: "Bartender",
    },
  ],
};

function App(props) {
  const [employees, setEmployees] = useState(state.employees);
  const removeEmployee = (index) => {
    setEmployees({
      employees: employees.filter((employee, i) => {
        return i !== index;
      }),
    });
  };

  return (
    <div className="App">
      <header className="App-header">
        <Table jobsData={employees} removeEmployee={removeEmployee} />
      </header>
    </div>
  );
}

export default App;

## Countdown.js
class Timer extends React.Component {
    constructor(props) {
      super(props);
      const timeLeft = new Date('2020-10-29T14:00').getTime() - new Date().getTime();

      this.state = { seconds: Math.round(timeLeft / 1000) };
    }

    tick() {
      this.setState(state => ({
        seconds: state.seconds - 1
      }));
    }

    componentDidMount() {
      this.interval = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
      clearInterval(this.interval);
    }

    render() {
      return (
        <div>
          Секунды: {this.state.seconds}
          Минуты: {Math.round(this.state.seconds / 60)}
        </div>
      );
    }
  }

  ReactDOM.render(
    <Timer />,
    document.getElementById('timer-example')
  );

## Homework-Form.js
import React, { Component } from "react";

class Form extends Component {
  initialState = {
    name: "",
    job: "",
  };

  state = this.initialState;

  handleChange = (event) => {
    const { name, value } = event.target;
    console.log({ name, value });
    this.setState({
      [name]: value,
    });
  };

  render() {
    const { name, job } = this.state;

    return (
      <form>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          name="name"
          id="name"
          value={name}
          onChange={this.handleChange}
        />
        <label htmlFor="job">Job</label>
        <input
          type="text"
          name="job"
          id="job"
          value={job}
          onChange={this.handleChange}
        />
        <input type="button" value="Submit" onClick={this.submitForm} />
      </form>
    );
  }
}
export default Form;

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>

## Router.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

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

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

## Table-new.js
import React from "react";

// const SimpleHeader = ???
// class ClassComponentHeader ???

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  );
};
const TableBody = (props) => {
  const { data, removeEmployee } = props;
  console.log(data);
  const rows = data.map((row, index) => {
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
        <td>
          <button onClick={() => removeEmployee(index)}>Удалить</button>
        </td>
      </tr>
    );
  });

  return <tbody>{rows}</tbody>;
};

export class Table extends React.Component {
  render() {
    const { jobsData, removeEmployee } = this.props;

    return (
      <table>
        <TableHeader />
        <TableBody data={jobsData} removeEmployee={removeEmployee} />
      </table>
    );
  }
}
export default Table;

## Table.js
import React from "react";

// const SimpleHeader = ???
// class ClassComponentHeader ???

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  );
};
const TableBody = (props) => {
  const { data } = props;
  console.log(data);
  const rows = data.map((row, index) => {
    return (
      <tr>
        <td>{row.name}</td>
        <td>{row.job}</td>
      </tr>
    );
  });

  return <tbody>{rows}</tbody>;
};

export class Table extends React.Component {
  render() {
    const { jobsData } = this.props;

    return (
      <table>
        <TableHeader />
        <TableBody data={jobsData} />
      </table>
    );
  }
}
export default Table;

## Table1.js
import React from "react";

class Table extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Charlie</td>
            <td>Janitor</td>
          </tr>
          <tr>
            <td>Mac</td>
            <td>Bouncer</td>
          </tr>
          <tr>
            <td>Dee</td>
            <td>Aspiring actress</td>
          </tr>
          <tr>
            <td>Dennis</td>
            <td>Bartender</td>
          </tr>
        </tbody>
      </table>
    );
  }
}
	import "./App.css";
	import React, { Component } from "react";

	class App extends Component {
	state = {
	data: [[], [], [], []],
	};

	// Code is invoked after the component is mounted/inserted into the DOM tree.
	componentDidMount() {
	const url =
	"https://en.wikipedia.org/w/api.php?action=opensearch&search=Russia&format=json&origin=*";

	fetch(url)
	.then((result) => result.json())
	.then((result) => {
	this.setState({
	data: result,
	});
	});
	}

	render() {
	const { data } = this.state;
	const [, titles] = data;

	const result = titles.map((entry, index) => {
	const style = { marginLeft: `${Math.random() * 100}px` };
	return (
	<div>
	<li className={"item"} style={style} key={index}>
	<a href={data[3][index]}>{entry}</a>
	</li>
	</div>
	);
	});

	return (
	<div style={{ height: "10%", backgroundColor: "navajowhite" }}>
	<ul className="list">{result}</ul>
	</div>
	);
	}
	}

	export default App;
	import "./App.css";
	import React, { useState } from "react";
	import { Table } from "./Table";

	const state = {
	employees: [
	{
	name: "Charlie",
	job: "Janitor",
	},
	{
	name: "Mac",
	job: "Bouncer",
	},
	{
	name: "Dee",
	job: "Aspring actress",
	},
	{
	name: "Dennis",
	job: "Bartender",
	},
	],
	};

	function App(props) {
	const [employees, setEmployees] = useState(state.employees);
	const removeEmployee = (index) => {
	setEmployees({
	employees: employees.filter((employee, i) => {
	return i !== index;
	}),
	});
	};

	return (
	<div className="App">
	<header className="App-header">
	<Table jobsData={employees} removeEmployee={removeEmployee} />
	</header>
	</div>
	);
	}

	export default App;
	class Timer extends React.Component {
	constructor(props) {
	super(props);
	const timeLeft = new Date('2020-10-29T14:00').getTime() - new Date().getTime();

	this.state = { seconds: Math.round(timeLeft / 1000) };
	}

	tick() {
	this.setState(state => ({
	seconds: state.seconds - 1
	}));
	}

	componentDidMount() {
	this.interval = setInterval(() => this.tick(), 1000);
	}

	componentWillUnmount() {
	clearInterval(this.interval);
	}

	render() {
	return (
	<div>
	Секунды: {this.state.seconds}
	Минуты: {Math.round(this.state.seconds / 60)}
	</div>
	);
	}
	}

	ReactDOM.render(
	<Timer />,
	document.getElementById('timer-example')
	);
	import React, { Component } from "react";

	class Form extends Component {
	initialState = {
	name: "",
	job: "",
	};

	state = this.initialState;

	handleChange = (event) => {
	const { name, value } = event.target;
	console.log({ name, value });
	this.setState({
	[name]: value,
	});
	};

	render() {
	const { name, job } = this.state;

	return (
	<form>
	<label htmlFor="name">Name</label>
	<input
	type="text"
	name="name"
	id="name"
	value={name}
	onChange={this.handleChange}
	/>
	<label htmlFor="job">Job</label>
	<input
	type="text"
	name="job"
	id="job"
	value={job}
	onChange={this.handleChange}
	/>
	<input type="button" value="Submit" onClick={this.submitForm} />
	</form>
	);
	}
	}
	export default Form;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />

	<title>Hello React!</title>

	<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
	</head>

	<body>
	<div id="root"></div>

	<script type="text/babel">
	// React code will go here
	</script>
	</body>
	</html>
	import React from "react";
	import {
	BrowserRouter as Router,
	Switch,
	Route,
	Link
	} from "react-router-dom";

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

	{/* A <Switch> looks through its children <Route>s and
	renders the first one that matches the current URL. */}
	<Switch>
	<Route path="/about">
	<About />
	</Route>
	<Route path="/users">
	<Users />
	</Route>
	<Route path="/">
	<Home />
	</Route>
	</Switch>
	</div>
	</Router>
	);
	}

	function Home() {
	return <h2>Home</h2>;
	}

	function About() {
	return <h2>About</h2>;
	}

	function Users() {
	return <h2>Users</h2>;
	}
	import React from "react";

	// const SimpleHeader = ???
	// class ClassComponentHeader ???

	const TableHeader = () => {
	return (
	<thead>
	<tr>
	<th>Name</th>
	<th>Job</th>
	</tr>
	</thead>
	);
	};
	const TableBody = (props) => {
	const { data, removeEmployee } = props;
	console.log(data);
	const rows = data.map((row, index) => {
	return (
	<tr key={index}>
	<td>{row.name}</td>
	<td>{row.job}</td>
	<td>
	<button onClick={() => removeEmployee(index)}>Удалить</button>
	</td>
	</tr>
	);
	});

	return <tbody>{rows}</tbody>;
	};

	export class Table extends React.Component {
	render() {
	const { jobsData, removeEmployee } = this.props;

	return (
	<table>
	<TableHeader />
	<TableBody data={jobsData} removeEmployee={removeEmployee} />
	</table>
	);
	}
	}
	export default Table;
	import React from "react";

	class Table extends React.Component {
	render() {
	return (
	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Job</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Charlie</td>
	<td>Janitor</td>
	</tr>
	<tr>
	<td>Mac</td>
	<td>Bouncer</td>
	</tr>
	<tr>
	<td>Dee</td>
	<td>Aspiring actress</td>
	</tr>
	<tr>
	<td>Dennis</td>
	<td>Bartender</td>
	</tr>
	</tbody>
	</table>
	);
	}
	}