1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- import PropTypes from "prop-types";
- import React, { Component } from "react";
- import logo from "./logo.svg";
- import "./App.css";
- const appName = "MasterControlProgram";
- const titleName = "heading";
- class Link extends Component {
- render() {
- return this.props.hide
- ? null
- : <a href={this.props.address}>Click</a>;
- }
- }
- Link.propTypes = {
- address: PropTypes.string,
- hide: PropTypes.bool,
- };
- const Title = ({ text }) => <div>{text}</div>;
- Title.propTypes = {
- text: PropTypes.string,
- };
- class App extends Component {
- state = {
- input: "",
- mainColor: "blue",
- on: false,
- lifeCycle: "",
- };
- componentDidMount() {
- this.setState({ lifeCycle: "componentDidMount" })
- }
- componentWillReceiveProps() {
- this.setState({ lifeCycle: "componentWillReceiveProps" })
- }
- render() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <h1 className="App-title">Welcome to React</h1>
- <h3 className={this.state.mainColor}>Everyone is welcome!</h3>
- </header>
- <Title text="Some title" />
- <p className="App-intro">
- To get started, edit <code>src/App.js</code> and save to reload.
- </p>
- <ul className="tyler">
- <li>First</li>
- <li>Second</li>
- <li>Third</li>
- </ul>
- <p className="button-state">{this.state.on ? "Yes!" : "No!"}</p>
- <button onClick={() => this.setState({ on: true })}>Click</button>
- <h2>{this.state.input}</h2>
- <input type="text" onChange={(e) => this.setState({ input: e.currentTarget.value })} />
- <p className="lifeCycle">{this.state.lifeCycle}</p>
- </div>
- );
- }
- }
- App.displayName = appName;
- Title.displayName = titleName;
- export { App, Link, appName, titleName };
|