What I've learned this week! W004 - ReactJS, the Start

Hey, y'all! What's been up?

This week was a good one, I'm very excited to learn!

I started a React / React Native course and I'm loving it, I got a little bit of knowledge in React, but all I've learned in the past is not enough anymore, for example, this course will cover a bunch of cool and new things for me: React Hooks, deploy, the basics of Firebase, Unit Tests, CI/CD, Redux, Redux-Thunk and a lot of other really cool things, and again, I'm very excited with it.

I'll interim this course with the Node.js course, and my choice to do these two at the same time is that I want to apply and complete these 2 pieces of knowledge together, so I decided to do both at the same time.

So let's go then! What did I learn this week?

First of all, I came back to the begin, saw again some concepts of const, var and let variables, arrow functions, high order functions, functional and class components, callbacks, promises, async/await, navigation with react-router-dom, you know, just to warm me up.

After the basics, I started to see a little bit of the Hooks, which was a new thing for me, and dude, I LOVED IT! The fact that you can transform this:

import React from "react";


class CounterExample extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      counter: 0
    };
  }


  addCounter = () => {
    this.setState({ counter: this.state.counter + 1 });
  };


  render() {
    return (
      <>
        <h1>Counter Example {this.state.counter}</h1>
        <button onClick​={this.addCounter}>Add 1</button>
      </>
    );
  }
}


export default CounterExample;

Into this:

import React, { useState } from "react";


const CounterExample = () => {
  const [counter, setCounter] = useState(0);


  const addCounter = () => setCounter(counter + 1);


  return (
    <>
      <h1>Counter Example {counter}</h1>
      <button onClick​={addCounter}>Add 1</button>
    </>
  );
};


export default CounterExample;

This is 10 fewer lines of code!!! I'm amazed! I know that Hooks is not that brand new this way, but to me it is.

Unfortunately (or fortunately), this past week I got back to the basics of React, so there's not much to say here because I don't wanna write about the really basic things.

This next week I'll learn how to deploy an application to the Firebase Hosting, and in the next week I'll put the link to the application on the article, we're developing a simple basic application that is financial control, basically, you put the incomings and outgoings with the value and description (separated by year-month) and the application will give you the prediction to that month. Yeah, I know, it is a really basic application, but learning the fundamentals is that matters, isn't it?

The design is not the better, I know, but I'm not focusing on this.

___

That's it, guys. This next week, with no doubts, will be full of new things to me, and I'm feeling amazing. If you read until here, thank you.

Cya next week!

Cover image by kreatikar from Pixabay