Things you need to know Before learning Reactjs | Shudhanshu Patidar

Things you need to know Before learning Reactjs | Shudhanshu Patidar

A lot of people jump into React without actually knowing what the uses and requirements of React JS are. It’s very important to know when and how to use Reactjs before using it in your project, or else it’s going to make your life harder than making it easier. React is a front-end JavaScript library that was first deployed by Facebook in 2011. React JS makes it easy for us to create interactive and creative user interfaces. I’ve seen a lot of articles say that React is a JavaScript framework. React JS is not a framework, it is an open-source library. It was made open-source in 2013. In React, you can choose the bundles and dependency packages that you need. It’s highly customizable, and you’re the one who decides the flow of the application. But in frameworks, the framework will be the one in charge of the flow.

Airbnb, Dropbox, Facebook, Instagram, Netflix, Paypal, Reddit, Salesforce, Tesla, Uber, Whatsapp, all use React JS. 40-lines of code in Vanilla JavaScript can be replaced by just 10-lines of React code. So, why wouldn’t you be interested in React?

In this article, I’m going to discuss things you should know before you start working with React JS.

When to Use React

React is mostly used for developing Single Page Apps (SPAs). React JS would be a great choice for your project if it deals with many dynamic inputs and includes access permissions.

Migrating from an existing technological infrastructure to a new one becomes easier with React. It’s because React is lightweight and well wrapped around JavaScript Standards. React is a component library. It will be easier to break down your user interface into different composable pieces. So you’re going to be able to reuse the code. By that, you can save the development time to a great extent and also reduce the overall cost.

In React, the code used for developing web applications can also be used for mobile applications. So, you don’t have to spend more time coding the UI for a mobile app. If you’re building both mobile and web apps, then React would be perfect for that.

When Not to Use React

React would not be a good choice for static websites. React JS becomes tough when you need to add many functionalities to your web pages. Also, if you have a really good knowledge of HTML and CSS, then you need to decide whether to spend your time learning React. React can be learned quickly, but this could be a learning curve that might be unnecessary depending on your project.

Declarative Programming

React is a declarative, efficient, and flexible Javascript Library. So what does declarative mean? Imagine asking your beloved to marry you. You could either ask right away, “Will you marry me?” which would be similar to declarative programming. Or you can explain why you two should marry and then say to her, “Shouldn’t we get married?” which is similar to the imperative programming. Basically, declarative programming means what you do. Imperative programming is how you do it.

When you use declarative programming, you can accomplish what you want to do by using less amount of code than imperative programming. So, in React, you just need to describe what the result of the program should be. You don’t have to explain how to get that specific result. React knows how to get the result.

JavaScript, HTML, and CSS

There are some JavaScript features you should know before you start learning React. Although you don’t need to have in-depth knowledge about all of them, you need to get yourself familiar with these features.

  • ES6 classes
  • Arrow functions
  • Destructuring assignment
  • Map and filter

If you haven’t heard of the above features, then I recommend that you learn about them before you start using React. Why I say you don’t need in-depth knowledge is because I didn’t have in-depth knowledge of all of them when I started using React. But while I was using React, I learned more about them. JS is isomorphic. You can use React JS everywhere when JavaScript can be executed. Isomorphism in web development means rendering the pages on both the client-side and the server-side.

You should also have a decent knowledge of HTML and CSS because React uses JSX. JSX, also known as JavaScript XML, is an HTML like syntax. You can embed the HTML code inside JavaScript using JSX. JSX makes it easier to stylize the UI and enhances the performance of JavaScript. You can write a React application without using JSX too. But it is advised to write with JSX because it adds structure and clarity to our React code.

React Debugging

React JS has an effective set of debugging and designing tools that will help you understand your code more easily. React Developer Tools is a popular browser extension for Chrome. By installing it, you will find interesting widgets to inspect your React code, interpret the output, and debug.

With React, you can detect errors at an early stage. Compile-time debugging helps to achieve this, so you won’t find any silent errors during runtime.

React is the most popular front-end JavaScript library today. Now that you know the above concepts, you’re ready to dive into React. To install React JS, first, you’ll need to install Node.js and NPM (Node Package Manager) to your system. After that, go to the React website and get started with your first React project. That’s all for this article.

Thank you for reading and happy coding!


Shudhanshu Patidar's Blogs