Category: React

Here are my 5 main takeaways from React.

Disclaimer:

1. This article is based on my experience with React, and I don’t aim to hurt anyone’s intentions.
2. I tried React for 2 days, hence I’m no expert and don’t wish to mislead the readers.

Relax and Enjoy….:)

Here are 5 things that are worth sharing.

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

1. Small learning curve

I was really amazed at how easy it was to get started with React.

npx create-react-app my-app
cd my-app
npm start

• After following the above commands, I was able to see a sample React App running.
• I feared that behind the scenes, there would be n number of files, coordinating together and including different packages, BUT
• I was wrong. As I started exploring the folders and their respective files, it was making sense to me.

React starts off with minimum/essential configurations, and can be shaped as the features evolve.

2. Instant Hot Reload

This was truly up to the mark. I started the local server and began to do some minor changes in the existing codebase (like changing the title, etc)

• As soon as I saved anything, it used to reflect almost instant.
• In the console, it would prompt me to install extensions for React.

On a sidenote, I found after adding a new package, I would need to restart my server.

3. Component-based approach

Let’s take the below UI. If I start to program this, I would think of breaking it into components, and yes, React encourages this.

Note: I used the functional components.

The components can look like this

The next question is how do you know what should be a component? The answer lies in the single responsibility principle, that is, a component should ideally only do one thing.

If it starts growing, it should be decomposed into smaller subcomponents.

What does a component look like

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Once a component is defined, we can use it anywhere, making it reusable.

4. JS and Props

React resembles vanilla JavaScript, maybe one of the reasons for its popularity.

const element = <h1>Hello, world!</h1>;

• Ok, this is not HTML, nor it is Javascript. Its JSX (JavaScript XML)
• After compilation, JSX expressions become regular JavaScript function calls and evaluate into JavaScript objects.
• React uses camelCase property naming convention over HTML attribute names.

For instance, class becomes className in JSX

Props

• Now, inside my components, I began wondering how to include component-specific properties.

Enter Props

• Props are short for properties and work similarly to the HTML attributes.
• Way to pass data from one component to others, in the same way as arguments are passed in a function.

<Button onClick={btnOnClick} text="Fetch" />

Here, onClick and text are properties of the Button Component.

• I also wanted to have type checking for those properties.

Enter PropTypes

React has some built-in type checking abilities. You can assign the propTypes property to the component-specific property

Button.propTypes = {
    text: PropTypes.string,
    onClick: PropTypes.func.isRequired,
}

Note: This plugin helped me a lot.

5. Development Experience

This is one of the important factors which decides in continuing with a technology happily or forcefully.

• I liked the experience with React. It was fun and easy to use. 

Maybe one of the reasons for being one of the popular frameworks today.

* Other mentions

Hooks (useState)

A Hook is a special function that lets you “hook into” React features. 

useState is a Hook that allows you to add React state to function components.

When to use a Hook?: If you write a function component and realize you need to add some state to it, you use a hook

import React, { useState } from 'react';

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

---

Final Thoughts

I realized every technology has some things in common — like loops, functions. They only differ by their syntax and structure and the way that tech allows you to write your logic.