DEV Community: Adrian0506

React Hooks

Adrian0506 — Wed, 13 Jan 2021 04:12:39 +0000

React hooks are a pretty amazing tool in Javascript. You can easily change a components state without making it a class. It is fairly simple and easy to use. It saves a lot of time and you can use them multiple times in a single component.
I will show you a example of how react hooks will look.

import React, {useState} from 'react';

function App () {
let [currentCount, incrementCount] = useState(0);

return <>

Click Me

{currentCount}

</>

}

This small function basically creates a variable with a value of 0. When you click on click me it increments the count. Which will change that variables state. This will cause the page to re render to show the correct count. I like using hooks because I believe it makes code look cleaner, you also have to write less lines of code to change the state. I feel like this is fairly popular among developers.

Also some examples can be maybe you want to render something based if the state is true or false, with useState it is basically works as a toggle. When you click something you can toggle it to be true and then when you click it again you can toggle it to be off. If you want more complex states you may have to use a class component in order to pull it off.

Javascript Async/await

Adrian0506 — Wed, 16 Dec 2020 03:07:38 +0000

I have recently learned about JavaScripts Asnyc functions! At first they were really confusing. I have been using them primarily for node.js. The way Async functions work is that say you are reading a file in node js. Let me make a short example.

function readFile () {
let data = readFile('./src/index.txt');
console.log(data)
}
console logs undefined;

The reason this logs undefined is because we are not waiting for the data to come back. We instantly go to the next like to log the data. But since it hasnt come but we do not know what is in data so as a result it logs undefined. Here is a different example of a working solution to this problem.

function readFile() {
readFile('./src/index.txt', function (err, data) {
if (err) {
return err

} else {
console.log(data)

}
});

}

Instead we give it a call back! The call back runs when it finished reading the file and is ready to return a result. We also have a err argument that only runs when a err is found. we could also do this a different way by stopping the code until it comes back with a response, but the problem with this is that it will not run another line of code until it returns a response! It could slow down your application a lot! Here is a example of that.

function async readFile() {
let data = await readFile('./src/index.txt')
console.log(data)

}

This time it will fine the data but the await keyword will stop the code until it receives something in return!

Hack Reactor Week 3 (react)

Adrian0506 — Wed, 09 Dec 2020 03:23:28 +0000

Hey everyone! I have just gotten to my 3rd week of hack reactor. It has been very fun and I have been enjoying it a lot! But I want to talk about react states! React states is such a powerful tool! It constantly re renders a page if the state of something has been changed. Let me model a demonstration!

class App extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0;
}
}

incrementCounter() {
let currentVal = 0;
currentVal++;
setState({
counter: currentVal
})
}
Render() {

return

Click me! {this.state.counter}

}
}

What is awesome about this is that it will re render the entire page when you click on the click me element! And can be used in many different ways. Examples can be like whenever a user sends a tweet. The state of the current tweets are tracked. When we add a new tweet it changes the state and re render the page to display that new tweet! You can find a way to do this in vanilla js. But react does that for us and helps us save so much time!

Hack Reactor DAY 2!

Adrian0506 — Tue, 17 Nov 2020 21:20:18 +0000

Going through hack reactor has been fun so far. Been learning a lot and collaborating with others!