I wonder if someone is new to web development and they start with React, the moment they start exploring the amount of options / choices they have to make to choose the set of libraries, frameworks, the best practices in working with React, they will run away to the jungles.

And the challenging yet most effective way to learn React is to try out various approaches: watch YouTube videos, enroll in both free and paid online courses, read numerous books and articles, and then cultivate a deeper understanding.

In these blog, we will talk about what React is and why it matters.

What is React JS ?

• React JS is an open source UI, JavaScript library for web and native user interfaces.

• React lets your build user interfaces out of individual pieces called components. Then combine them into entire screens, pages and apps.

But we already have countless JavaScript libraries for writing frontend code or translating designs into UI. Why one more ?

Why React?

1. Virtual DOM: React's use of a virtual DOM enables efficient updates to the actual DOM, reducing the need for extensive manipulations and enhancing overall performance.

2. Component-Based Architecture: React's component-based structure promotes modular development, making it easier to manage and reuse code.

   1. React components are JavaScript functions that return markup:

       function MyButton() {
         return (
           <button>I'm a button</button>
         );
       }
      

   2. Now that you’ve declared MyButton, you can nest it into another component:

       export default function MyApp() {
         return (
           <div>
             <h1>Welcome to my app</h1>
             <MyButton />
           </div>
         );
       }
      

3. Declarative Syntax: React's declarative approach to building user interfaces allows developers to describe the desired outcome, and React takes care of updating the DOM to match that state.

And, you don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.

Features of React

1. JSX: React uses this cool thing called JSX, which is like mixing HTML and JavaScript together. It makes the code look cleaner and more straightforward when you're building the user interface.

2. Components: React is all about breaking down your code into these reusable building blocks called components.

3. Virtual DOM: React does this behind-the-scenes trick called the virtual DOM, which makes updating the actual webpage super efficient. It's like having a clone of the webpage in the background, and React figures out the fastest way to update things.

4. Data: React keeps things simple with data. It flows in one direction, making it easier to follow.

5. React Hooks: React has these things called hooks. They're like shortcuts that make functional components as powerful as the older class components. They help manage the state and make your code look less like a puzzle.

6. React Native: You can use React not just for websites but also for building mobile apps with React Native. It's like having the best of both worlds - the same code for web and mobile.

7. React Router: React Router is this handy tool for handling navigation in your web apps. It helps you smoothly switch between different pages without having to reload the whole thing.

8. Awesome Community: React has a massive group of cool people who use it and build stuff with it. This means there are tons of helpful libraries, tools, and resources floating around the internet.

Thanks for Reading!

Reference

• https://react.dev/