Getting Started with React

React is a JS library developed at 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 Application i.e. SPA, desktop apps, and cross-platform native mobile apps. React is known for speed, simplicity, and scalability.

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

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

React Ecosystem

React has an ecosystem of open source projects that fundamentally change the way of building react application. The most popular open source projects of React ecosystem includes 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 with your local environment using one of the JavaScript IDE like VS Code, Brackets, Vim, Sublime etc.

React and React DOM

In 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?

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.