On this first part, I'm going to show you how to use react hooks in a sample react application, that application you'll be able to add books to your list, think the possibilities, we'll use useState(), useEffect() and useCallback().
First Step: Create Project
- You will need to install
create-react-appto your machine, use this command to installnpm install -g create-react-app; - So now you can generate the project typing
npx create-react-app books; - Your project folder will contain this paths and files:
- Delete this file
App.jsand create a new file with the same name; - On your new file create something like that:
import React from 'react';
export default function App() {
return <h1>Hello World!</h1>
};
Second Step: Using useState()
In react version before 16.8 to create a Component that has a state, you should to create a Class Component like that:
import React from 'react';
class App extends React.Component {
state = {
title: 'Hello World!',
}
render() {
return <h1>{this.state.title}</h1>
}
};
export default App;
- Okay now we're going to put this in our context:
import React from 'react';
class App extends React.Component {
state = {
books: ['Javascript', 'React'],
newBook: '',
}
handleBookInput = e => this.setState({ newBook: e.target.value });
addBook = () => {
this.setState({
books: [...this.state.books, this.state.newBook],
newBook: '',
});
}
render() {
// if you don't know what is <></> is short way to use <React.Fragment> :D
return (
<>
<input
value={this.state.newBook}
onChange={this.handleBookInput}
placeholder="add here you new book"
onKeyPress={e => e.key === 'Enter' && this.addBook()}
/>
<button onClick={this.addBook}>Add Book!</button>
<ul>
{this.state.books.map(
(book, index) => <li key={index}>{book}</li>
)}
</ul>
</>
)
}
};
export default App;
- let's re-build this file to a functional component and let's use
useState:
// We need to import useState from react
import React, { useState } from 'react';
export default function App() {
/* When we declare a state variable with useState,
it returns a pair â an array with two items.
The first item is the current value,
and the second is a function that lets us update it.
Using[0] and[1] to access them is a bit confusing because
they have a specific meaning.
This is why we use array destructuring instead. */
/*
const booksStateVariable = useState(['Javascript', 'React']);
const books = booksStateVariable[0];
const setBooks = booksStateVariable[1];
*/
/* To be more pretty and readable we use the way bellow,
now you don't need to use this.state.books, just use books as a state
variable :D;
*/
const [books, setBooks] = useState(['Javascript', 'React']);
/*We'll create an addBook function to save this new book in books array,
what this setBooks do? Answer: It do something like that to you => [...books, the_new_value],
in this first part of article, we'll put the 'Test' value locally,
in next part i'll show the next steps.
*/
const addBook = () => setBooks('Test');
return (
<>
<button onClick={addBook}>Add test book!</button>
<ul>
{books.map((book, index) => <li key={index}>{book}</li>)}
</ul>
</>
);
};
Top comments (0)