This commit is contained in:
Lukas Heiligenbrunner 2020-05-30 15:37:53 +02:00
parent 0de56f3670
commit 66154a4e51
6 changed files with 126 additions and 54 deletions

View File

@ -1,6 +1,8 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from "react-dom";
import TodoApp from "./Zwei"
function App() {
return (
@ -18,6 +20,20 @@ function App() {
>
Learn React
</a>
<button>klick me to get to another pagexD</button>
<button className="square" onClick={
() => {
console.log("rerendering dom");
ReactDOM.render(
<React.StrictMode>
<TodoApp />
</React.StrictMode>,
document.getElementById('root')
);
}
}>
blabla
</button>
</header>
</div>
);

View File

@ -1,9 +0,0 @@
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

65
src/Zwei.js Normal file
View File

@ -0,0 +1,65 @@
import React from 'react';
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
export default TodoApp;

View File

@ -14,4 +14,4 @@ ReactDOM.render(
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
serviceWorker.register();