loading...
Cover image for Getting Started with ReactJS

Getting Started with ReactJS

kgprajwal profile image K G Prajwal ・3 min read

React

React is a product of Facebook. It is a very flexible and efficient Javascript library for building interactive user interfaces. React forms the view layer of the web application which is technically the frontend. This makes it easier to make web applications with essential features such as reusable components, state management, DOM rendering and many more which are explained later. React is mainly used in making single-page web applications. In this article we'll see the fundamentals of react library and why is it so popular.

Features

  • Components

ReactJS makes use of components which are independent and reusable bits of code. In other words, components are functions that work in isolation and each component manage their own state. It makes building web applications very much easier when individual blocks of elements are broken down while building large scale applications.

  • Virtual DOM

Every time there is any changes in the original DOM. The whole application is re-rendered onto the virtual DOM. The difference between the original and virtual DOM is checked and only this difference is updated in the original DOM. This boosts the speed of react application as the page need not be refereshed to see the changes.

  • Declarative

Designing any view on React is very easy and they manage their own state. React will make sure to render just the right components onto the DOM which enables the user to easily maintain and debug the code.

  • JSX

JSX stands for Javascript XML. It is a mixture of both Javascript and XML. As talked about earlier, the react is made up of components. These components have both javascript logic as well HTML/XML to render onto the screen. These component files have an extension .jsx.

  • Performance

React is ridiculously fast. Its virtual DOM minimizes the re-rendering of entire DOM unnecessarily. Also, React uses one-way binding (unidirectional data flow) using a pattern called Flux. This makes the components immutable hence, giving more felexibility and efficiency.

Why React?

  • Easy to learn

Compared to other libraries or frameworks out there like Angular or VueJS, React is comparably easier to learn and handle. With the basics of HTML, CSS and Javascript in place, you are ready to get started with React.

  • Simplicity

React is very simple to use. It has some very powerful packages to run its engine like webpack. With some simple JSX you will have components rendering independently on your screen. React becomes such a powerful tool when used with other JS libraries such as Redux, Material-UI, Materialize, GraphQL, etc.

  • Used by Developers

React is the most loved library compared to other libraries out there. React is open-source and has active contributors on its GitHub. The repository itself has over 150,000 stars and it's used by 3.8 million developers.

  • React Native

React can also be used to create mobile apps. And this version of react is called React Native. This shows the power of react's flexibility to adapt. With the perfect plan and execution a developer can make an app for android, iOS and the web.

Setup

React is incredibly easy to set up in the beginning and doesn't require frequent set ups if the package has been installed globally on your system.

Make sure to install NodeJS and NPM( Node Package Manager) on your system before installing react.

To install react, run the following command:

npx create-react-app <your-app-name>

After the installation is completed, go into your app directory:

cd <your-app-name>

Run to see your default app:

npm start

Result

You see a beautiful React App running on your browser. Feel free to play around with the files in the src folder of react to make your own web or mobile app.

I hope this serves as good beginning into your journey as a React developer. For any queries feel free to contact me on my LinkedIn.

Thank You!

Posted on May 30 by:

kgprajwal profile

K G Prajwal

@kgprajwal

Full-Stack Development and Data Science Enthusiast

Discussion

markdown guide
 

I think the "easy to learn" part is a bit exaggerated. While maybe subjective from my point of view, I find Vue loads easier to catch on and make operations with. With React, there are more "steps per action" that you have to keep in mind which Vue does not explicitly require .

 

I would agree. I have worked on both Vue.js and React JS along with React Native as well. According to me, React is more like Javascript on steroids. You feel like you are writing Javascript and you have state and reactivity. However, some of the things like setting state of a variable on input change using setState feels very silly.

And, in those area if you compare Vue.js, it's very fun working with it. The API of Vue.js is very easy. The code I find is a lot more organised because you have a method object for all the functions, so on and so forth. React is kind of, you write what ever you want, where ever you want.

But when it comes to React with Typescript, it's a lot more fun to work with.

 

I totally agree with you, VueJS actually has an easy learning curve and elegant programming style, but as a package, there isn't much to work around with Vue as the plugins and resources are still under development. But, it is still a great library to work with as it has quite similar features to React. Everything has its own pros and cons, its just our perspective of accepting to overcome the cons.

 

This is an amazing beginner resource for React JS! Such a great article. You broke everything down precisely, and it's easy to understand 🙏

 

Thank you so much for the great feedback!

 
 

Thanks for this simple explanation, it's helped me get to grips with the basic theory as I get started learning.

 

Thank you for your kind words.

 

Great post, thanks for sharing! :)
The links do not seem to work, I suggest to check them.

 

Thank You so much for the appreciation! I have updated the post regarding the links!