Week 5: Dipping into React🎨

#javascript #webdev #programming #beginners

This week, I took my first steps towards learning React! For now it was all about learning about state, hooks and most importantly, getting familiar with the syntax. Let's get right into it!

Topics Covered✅

The volume of topics I covered this week was modest, and the individual topics were pretty simple once I had dedicated some time to them. Here's a list of the topics I covered:

Basic File structure in the vite repository
useState hook
Components and props
Hooks vs side-effects

As usual, these topics were discovered slowly through assignments (and also with some help from the React docs).

Creating my first React app and learning about useState🚀

I used Vite to create my React app. For that, all I had to do was run

npm create vite@latest

in the terminal and then follow the steps on screen.

Everything I have to deal with for now is in the src folder.
I emptied out the two default css files and went straight to mess with the App.jsx file.

I then replaced the boilerplate code there with this-

import { useState } from 'react'

function App() {
  const [count,setCount] = useState(0);
  function onClickHandler(){
    // count++; not the right way to set state variables
    setCount(count+1);
  }

  return (
      <div>
        <button onClick={onClickHandler}>Counter {count}</button>
      </div>    
  )
}

export default App

And that, was my first React app.
Now I'm aware that this is as simple as it gets, but we all start somewhere right? This helped me learn about the useState hook.

This hook returns us a variable which is a state variable and a function that updates the state variable. We can give it a default value by specifying it in the brackets.

Something that was a bit strange to me here was how the App function returns a div. Initially, I thought I was returning plain HTML here, but it was actually JSX — a JavaScript syntax extension that looks like HTML but lets you embed JS expressions inside curly braces leading to some very interesting use-cases.

Components and props💡

Then I learned how it was better to have all the different parts of my React App as separate components.

A component is basically just a function that you declare with a capital first letter. We can use this name as a tag and pass in whatever parameters the function requires as props.

import { useState } from 'react'

function App() {

  const [count,setCount] = useState(0);
  return (
      <div>
        <CustomButton count={count} setCount={setCount}/>
      </div>    
  )
}
//component
function CustomButton(props){
  function onClickHandler(){
    props.setCount(props.count+1);
  }
  return <button onClick={onClickHandler}>Counter {props.count}</button>
}

export default App

Here is the exact same app as before, but this has the button as a separate component in the same file named as CustomButton. We pass down both count and setCount to the component with the shown syntax. We can then access all passed parameters which we get as an object called props. Thus we change the onClickHandler to use 'props.count' and 'props.setCount()'.

Structuring our app as a bunch of separate components just helps in code readability and modularity.

New things I learnt this week🔄

Structure of a React app
Hooks - just inbuilt React functions with special purposes
Using the useState hook
Object Destructuring - This is one I found very interesting.

When we pass down props to a component, we don't necessarily need to use the 'props.' syntax. Instead, we can destructure the props object to individually use all props. The syntax is as follows -

  function CustomButton({ count , setCount }){
  function onClickHandler(){
    setCount(count+1);
  }
  return 
  <button onClick={onClickHandler}>Counter {count}</button>
  }

This feels a bit cleaner to me. And we can destructure any object – not just the props object.

Wrapping up🔚

This week felt very fresh. A change of topics can do a lot to re-ignite interest. I'll cover some leftover topics I studied later on. Next week, we dive deeper into React with a project. If you have any questions or feedback, make sure to comment and let me know!

I'll be back next week with more. Until then, stay consistent!