Forem: John Ekunola O.

Implementing Counter App

John Ekunola O. — Tue, 10 Jan 2023 18:54:44 +0000

React.js, more commonly known as React, it's a free open-source JavaScript library. The React.js framework library was developed by Facebook.

In React, you develop your applications by creating reusable components. These components are individual pieces of a final interface, which, when assembled, form the application’s entire user interface. This makes React applications very easy to update and maintain.

Requirements for Implementing a Counter App in React.js

Node.js installed
Code editor
React
Netlify

Our initial step in developing our counter application is to establish a new React.js project. There are numerous techniques to do this, though the most effortless option is to utilize the create-react-app tool. This tool sets up a new project along with the essential dependencies and configuration files, enabling us to rapidly start constructing our app. This is most certainly a commendable approach and we are certain that it will provide a smooth and successful implementation.

To do this, simply run the below command in your terminal

npx create-react-app my-app

The above code will create an react app which you can run on your local server by running the below code.

cd my-app
npm start

Secondly, we will create a new file in our project called "useCounter.js". Within this file, we will define our custom hook by utilizing the useState hook to keep track of the current count. This hook will enable us to keep track of the count in our application, allowing us to update and manipulate the count as needed.

import { useReducer } from "react";

const useCounter = () => {
  const ACTIONS = {
    ADD: "add",
    REDUCE: "reduce",
    RESET: "reset",
    SET_VALUE: "setValue",
  };

  function setValue(value, count) {
    let num = Number(value);
    if (String(num) === "NaN" || value === "") {
      return count;
    }
    return num;
  }

  function reducer(count, action) {
    switch (action.type) {
      case ACTIONS.SET_VALUE:
        return setValue(action.payload, count);
      case ACTIONS.ADD:
        return ++count;
      case ACTIONS.REDUCE:
        return --count;
      case ACTIONS.RESET:
        return 0;
      default:
        return count;
    }
  }
  const [count, dispatch] = useReducer(reducer, 0);

  return { count, dispatch, ACTIONS };
};
export default useCounter;

Our custom hook is used to define the initial count to be 0 and provide four different functions to interact with the count: increment, decrement, reset, and setValue. The setCount function provided by useState is used to update the count accordingly. To make use of our custom hook, we will create a new component called “Counter” that will display the current count in the UI. This will allow us to easily keep track of the count and interact with it using the four functions provided in the custom hook.

import React from "react";
import useCounter from "./useCounter";
import "../Styles/Counter.css";
// import { Helmet } from "react-helmet-async";

export default function Counter() {
  const { count, dispatch, ACTIONS } = useCounter();

  return (
    <div>
{/* 
    <Helmet>
      <title>Counter</title>
      <meta name="description" content="Counter page" />
    </Helmet> */}
      <div className="counter-container">
        <input
          type="text"
          placeholder="Count Value"
          onChange={(e) =>
            dispatch({ type: ACTIONS.SET_VALUE, payload: e.target.value })
          }
        />
        <h2>Count : {count}</h2>
        <div>
          <button
            className="add-btn"
            onClick={() => {
              dispatch({ type: ACTIONS.ADD });
            }}
          >
            Increase
          </button>
          <button
            className="dlt-btn"
            onClick={() => {
              dispatch({ type: ACTIONS.REDUCE });
            }}
          >
            Decrease
          </button>
        </div>

        <button
          onClick={() => {
            dispatch({ type: ACTIONS.RESET });
          }}
        >
          Reset
        </button>
      </div>
    </div>
  );
}

Once the core functionality was established, we moved on to styling the application. We employed CSS to provide the app with a distinct look and feel, and we were able to customize the appearance to our exact specifications. The appropriate CSS class and import have already been implemented in the code.

Conclusion

Overall, the process of constructing a counter app with React.js was an immensely rewarding experience. Despite the occasional roadblock, we were able to surmount them and create a fully functional and aesthetically pleasing program.

Github Url: https://github.com/Jizzyjay/AltSchool-Second-Exam
Netlify Url: https://altexam.netlify.app/

React and ReactDom

John Ekunola O. — Tue, 04 Oct 2022 14:20:03 +0000

What is React.js?

React.js, more commonly known as React, it's a free open-source JavaScript library. The React.js framework library was developed by Facebook.

The important features of ReactJS are as follows.

JSX
Components
One-way Data Binding
Virtual DOM
Simplicity
Performance
JSX
JSX stands for JavaScript XML. It is a JavaScript syntax extension. It's an XML or HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML-like text can co-exist with JavaScript react code. It is not necessary to use JSX, but it's recommended to use in ReactJS.'

Example of a JSX code:

`render(){
    return(
      <div>
        <h2>Hello AltSchool</h2>
      </div>
    )
}`

Components
ReactJS is all about components. ReactJS applications are made up of multiple components, and each component has its logic and controls. These components can be reused, which helps you to maintain the code when working on large-scale projects.

Virtual DOM
A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. Then it checks the difference between the previous DOM representation and the new DOM. Once it has been done, the real DOM will update only the things that have changed. This makes the application faster, and there is no waste of memory.

Simplicity
ReactJS uses JSX files which makes the application simple and to code as well as understand. JSX files are HTML files with embedded JavaScript. This makes the code more readable and easier to understand.

ReactJS is a component-based approach that makes the code reusable as your need it. This makes it simple to use and learn.

Performance
ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API that deals with HTML, XML, or XHTML. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM leading to smoother and faster performance.

*What is DOM? *

DOM, abbreviated as Document Object Model, is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it’s properties of a website as its nodes. DOM provides a language-neutral interface that allows accessing and updating of the content of any element of a webpage.

*What is ReactDOM? *

ReactDOM is a package that provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.
render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal()

Should I Learn React JS?

React is quickly shaping into one of the most popular and in-demand JavaScript libraries. Therefore, the demand for React developers is very high. As a result, there is a wide range of jobs for developers who know how to use React.

Overall, the demand for React developers is high, and the range of jobs is wide. If you are a React developer, you should be able to find a job that fits your skills and interests.

Lessons learnt so far in my programming Journey

John Ekunola O. — Sat, 11 Jun 2022 18:40:07 +0000

The journey of a thousand miles begins with one step.
--Lao Tzu.

Learning or achieving anything begins with just taking the first step. Taking the first step marks the beginning of a new direction/journey.

These are some of the lessons I've learned and still learning:

Set a goal & move towards it:

“Goal setting is massively individual, it’s about checking in with yourself and being really honest about what you want and what your motivations are” — Katerina Georgiou, Technical Coach @ Maker’s.

Setting a goal can be a powerful, motivational booster on your path to learning to code.
There is no end to learning and improvement in programming, and that’s why it is a good idea to keep setting goals, not lose track of your primary goal, and also help you to be accountable.

You must always be open to Learning:

This is a journey of never-ending learning, there is no end to improvement. we are always upgrading our skills to meet the latest market requirement. As a beginner, you should always be ready to learn new things.
So, what can you take away from this? It is okay to not know everything. As long as you never stop learning new things, you’ll be fine.

More doing, Less Watching:

Watching along with a coding tutorial is great for starting out. You may learn a little when watching a code along but you actually learn more by doing.

A better way to learn to code build a project by yourself. Just get started. Write your own code, solve the bugs, read documentation, and use other resources like StackOverflow, google.

Don’t compare your journey with anyone else’s:

It's very important to know your journey is different from any other person's journey, so it will do you more good than bad to focus on yours and continue grinding.
Comparing your own personal journeys with others often leads to discouragement. The only person you are in competition with is you.

It's okay to be frustrated:

Being frustrated is very much okay and it's part of the experience. It's okay to take a step back if things aren't going your way at a point in time.

It’s okay to hate it sometimes, it’s okay to ask for help, and it's okay to take your mind off that problem.

Google is your Friend:

Knowing how to google is one of the most important skills for a developer.
Becoming a great developer takes a lot of learning to achieve and more often we get stuck on a particular problem or bug. So it's essential to develop your googling skills.

The problem you are facing especially as a beginner in most cases has a solution and it's just a Google search away. This will help improve your googling skills.

Learning new things in general is a big task and as much takes a lot of dedication, energy, and input to achieve. I hope these few above-mentioned points will help you with this journey you've started.
Wishing you all the best as we journey together and i can't wait to see you at the top.