DEV Community

loading...
Cover image for I tried React in 2021. Here are my thoughts

I tried React in 2021. Here are my thoughts

aseemwangoo profile image aseem wangoo ・6 min read

In case it helped :)
Pass Me A Coffee!!

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”.

React Takeaways
React Takeaways

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.

Component-based approach
Component-based approach

The components can look like this

Component-based approach
Component-based approach

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.

In case it helped :)
Pass Me A Coffee!!

Discussion (1)

pic
Editor guide
Collapse
eduardo_alvarez_946ae8b20 profile image
Eduardo Alvarez

Short and to the point. Just on small tip. You can write your code blocks with color highlighting by using the 3 quotes with the word javascript next to it

const foo = "bar";
Enter fullscreen mode Exit fullscreen mode