Getting Started with React

React is a JS library developed on Facebook for creating User Interfaces. In other words, it is designed to build interactive, stateful & reusable UI components which present data that changes over time. It is used to develop Single Page Applications i.e. SPA, desktop apps, and cross-platform native mobile apps. React is known for speed, simplicity, and scalability.

Unlike some of the other known frameworks such as VueJs and Angular, React library requires the integration of external libraries as well because it is a library and not a full-fledged framework so that is the difference between them.

React History

1. React was created by Jordan Walke, a software engineer at Facebook in 2011

2. First deployed on Facebook's newsfeed in 2011 and later on, in 2012, Instagram.com was developed.

3. Became open-source at JSConf US in May 2013.

4. React Native was introduced in February 2015.

5. React Fiber was introduced in April 2017, as the foundation of any future improvements and feature development of the React framework.

6. Initial releases of React were started as minor versions release, starting from 0.1.0 to 0.14.x.

7. In April 2016, React 15 was announced and switched to major versions release.

8. The latest version is React 17.0.2 (while updating this article).

Who is using React?

React is declarative!

React is based on the declarative style of programming which allows you to focus on "How your application should look"; instead of being concerned about the implementation details like DOM updates, control flow, and so on.

In an imperative style of programming, you are concerned about "What you should do" for DOM updates, control flow, and so on.

React doesn’t use templates

Before, React every JS framework used templates for building UI. But React doesn’t use templates for building UI. It uses a full-featured programming language JavaScript for design, logic, and to render the view. In order to achieve this, react uses components which is a mixing of markup with its view logic and states. This way makes the view easier to extend and maintain.

React also uses JSX as an alternative to pure javascript-based syntax, if you like the readability of HTML to raw JavaScript. We can specify the JavaScript-based expressions, loops, conditional statements, and other stuff within the JavaScript code with HTML.

React Ecosystem

React has an ecosystem of open source projects that fundamentally change the way of building react applications. The most popular open-source projects of React ecosystem include ES6/7, node, npm, redux, babel, webpack, and react-router.

React Advantages

1. Easy to Learn and Easy to Use.

2. Virtual DOM.

3. Unidirectional Data Binding.

4. Client-side and Server-side rendering.

5. Reusable and Interactive components.

6. Great Developer Tools.

7. Reactjs Eco System.

Let's Start with React

Let's start with React development using online IDE StackBlitz which is powered by Visual Studio Code. Here, StackBlitz IDE is using the react template as created by react CLI tool create-react-app with no build configuration. You can use create-react-app it with your local environment using one of the JavaScript IDE like VS Code, Brackets, Vim, Sublime, etc.

React and React DOM

In the above code, we are using two main libraries React and ReactDOM for building the UI using react. Let's understand the objective of these two libraries.

1. React

   React is a core library for building reusable UI components using JavaScript and JSX.

2. ReactDOM

   ReactDOM library is used to work with React in the browser. ReactDOM provides methods for DOM rendering as well as for server-side rendering. It is available as a separate package from v0.14

What do you think?

React being a JavaScript-based library, getting much popularity over other libraries and frameworks due to its performance output, features such as state, props, virtual DOM, life cycle hooks, new react hooks, and so on, thus more and more developers are diving to learn to react and get started with hands-on experience as its learning curve is very straight-forward.

This article is meant to be a getting started to the concept of React. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

GET TEST NOW