Deluxe Coding

Photo by Antonio Batinić: https://www.pexels.com/photo/black-screen-with-code-4164418/

More like, good riddance! OK, I have a bit of nostalgia for it because when I first started learning React, it was the go-to for setting up projects without going through the insanity of doing so manually. Unfortunately, this system was bloated and slow. Eventually the maintainers stopped updating it. Finally, the official React stopped endorsing this dormant product.

Today, when you visit the official React site, you will be introduced to several methods of starting a project in React – none of them are create-react-app. For barebones React, Vite has replaced CRA. Vite is super-fast and just the job done in no time. I love quickly spinning up a project in Vite.

Next JS and Remix are also featured as the way to go for React. These frameworks enable server-side rendering (SSR) for React applications. It looks like single page applications (SPA) are on their way out in favour of SSR. I am currently taking both Remix and Next JS courses and will report back once completed. One thing I can say is that routing seems to be much easier.

Web development is a fast-growing, ever-changing environment. If you don’t like to learn, this might not be for you. If you are like me, a madman who loves to learn, this field is incredible. There are so many changes that one can never be fully up to speed on everything…. but the beauty is that you don’t need to know everything. Just learn what you need to know to do the task at hand. As time goes by, you will continue to learn more things.

React

Vite | Next Generation Frontend Tooling (vitejs.dev)

Next.js by Vercel – The React Framework for the Web (nextjs.org)

Remix – Build Better Websites

React hooks allows us to use state in function components. I find this method of using state easier than the old class-based version.

Import the useState hook from react before creating a function component. The first thing to do is set the initial state. Assign useState with the desired initial state as the parameter to an array as a const type variable.

const [count, setCount] = useState(0);

In the above example, we create a piece of state called count to store the value of a counter. Inside the array, we place two items – the variable name for the state, and another variable to modify the state. You may name these anything you like, but the convention is to use the name for the state preceded by ‘set’ for the modifier.

The state variable cannot be modified directly. We must use the second variable to change the state (setCount in this example). Attempts to directly change the state will result in an error.

count = count + 1	// will cause an error
setCount(count + 1)	// will add 1 to the current state of the count variable.

The state may be passed down to the HTML render via JSX between the { }.

<h3>You clicked {count} times.</h3>

Since we have used the concept of a counter for this example, let us carry on by creating a counter component using the useState hook.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked { count } times!</P>
      <button onClick={() => setCount(count + 1)}>Click Me!</button>
        Click me!
      </button>
    </div>
  );
}

Clicking the button runs an anonymous arrow function which updates the state of count by calling setCount. This is fine as a simple example, but you may also create the function separately and invoke it from the button.

We may expand our simple counter component by creating two functions, one for addition, another for subtraction. Place these definitions above the return function.

const addCount = () => {
  setCount(count + 1)
}
const subtractCount = () => {
  setCount(count - 1)
}

Replace the button with two buttons, one for each function:

<button onClick={ addCount }> + </button>
<button onClick={ subtractCount }> - </button>

Here is the final component which now includes a button for addition and another for subtraction:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  
  const addCount = () => {
    setCount(count + 1)
  }
  const subtractCount = () => {
    setCount(count - 1)
  }
  return (
    <div>
      <p>You clicked { count } times!</P>
      <button onClick={ addCount }> - </button>
      <button onClick={ subtractCount }> - </button>
        Click me!
      </button>
    </div>
  );
}

Category: React

So Long Create-React-App!

Introduction to React State Hooks