Learning react: todo app
For a long time, I wanted to explore the React world. Today it had happened. ^_^ I must say that I am amused by the simplicity of it and React you got my attention! Since I have some experience with JS and data binding frameworks such as AngularJS and Angular, I decided to jump right in with what I usually do, learn by doing it.
So, I have decided to build a Todo app. It was really quick and easy to set it up right away. I followed the Getting Started guildline from the official site.
Initializing the todo-app
Like @angular/cli
for Angular, there is create-react-app
for React. I have initialized the app using the following way.
$ npx create-react-app todo-app
This created the folder and installs the default dependencies needed for an app to start. For example,
"dependencies": {"react": "^16.9.0","react-dom": "^16.9.0","react-scripts": "3.1.1"}
react
for the React framework itselt and react-dom
for DOM manipulation, I suppose.
It does come with some boilerplate code and a starter page with some links like the Getting Started and Tour of Heroes links for Angular starter page.
Create the app
Then I just started editing the stuff that was already in place and ended up with an working Todo app after an hour.
// App.jsxclass App extends React.Component {constructor() {super()this.state = {newTodo: '',todos: ['Schoonmaken','Boodschappen doen','Espanol Oefeningen','podcast Luisteren']}}handleChange = ({ target: { value } }) => {this.setState({ newTodo: value })}addNewTodo(e) {e.preventDefault()this.state.newTodo &&this.setState({todos: [...this.state.todos, this.state.newTodo],newTodo: ''})}removeTodo(index) {this.setState({todos: [...this.state.todos.filter((_value, i) => i !== index)]})}render() {return (<div className="App"><header className="App-header"><formclassName="todo-new"noValidateonSubmit={(e) => this.addNewTodo(e)}><inputclassName="todo-new**input"type="text"name="todo-new"id="todo-new"value={this.state.newTodo}onChange={(e) => this.handleChange(e)}/><buttonclassName="todo-new**add"onClick={(e) => this.addNewTodo(e)}>Add</button></form><TodoListtodos={this.state.todos}removeTodo={(i) => this.removeTodo(i)}/></header></div>)}}export default App
To get to know the communication between components, I created a child component called TodoList
which worries about displaying the list of todos alone.
// todo-list.jsxexport class TodoList extends React.Component {render() {return (<div className="todo-list">{this.props.todos.map((todo, index) => (<div className="todo-list__item" key={index}><span>{todo}</span><spanclassName="todo-list__item--remove"onClick={() => this.props.removeTodo(index)}>x</span></div>))}</div>)}}
I am surprised to see that it was done within a few lines of code. O_O I like it really! I am already feeling cheating on Angular >_O
// index.jsimport React from 'react'import ReactDOM from 'react-dom'import App from './App'ReactDOM.render(<App />, document.getElementById('root'))
That is it! A working todo app in few hours, mostly because I was bit adament on fixing few things on my own by trail and error. I like it that way as it makes me to think logically and it becomes hard to forget once you found the solution after a struggle for some time on your own! O_o