React — Not just a framework

React

React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components whenever your data changes. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.

React can also render on the server using Node and Power Mobile apps using React Native.

Why Do JavaScript Developers Use React JS?

React is a JavaScript library that specializes in helping developers build user interfaces or UIs. In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app.

Before React JS, developers were stuck building UIs by hand with “vanilla JavaScript” or with less UI-focused React predecessors like jQuery. That meant longer development times and plenty of opportunities for errors and bugs. So, in 2011, Facebook engineer Jordan Walke created React JS specifically to improve UI development.

In addition to providing reusable React library code (saving development time and chances of coding errors), React comes with two key features that add to its appeal for JavaScript developers:

• JSX
• Virtual DOM

Notable features

1. Components →React code is made of entities called components. Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as “props” which stands for “Properties”.

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

2. Virtual DOM →In React, for every DOM (Document Object Model) object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy. A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

3. JSX → JSX (short for JavaScript eXtension) is an extension of the JavaScripts language syntax. In other words similar to HTML, JSX provides a way to structure component rendering using a syntax familiar to many developers. JSX is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code. And — since React JS browser support extends to all modern web browsers — JSX is compatible with any browser platform you might be working with.

This can be understood more by the example given below -

class App extends React.Component {
  render() {
    return (
      <div>
        <p>NavBar</>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
   }
 }

3. React Elements → A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns. With a class component, the element is the object that the component’s render function returns.

React applications are usually built around a single HTML element.

const element = <h1>Hello React!</h1>

And the elements get render with ReactDOM.render()method.

ReactDOM.render(element, document.getElementById(‘root’));

Done with the theory part, To see how to start a basic hello world project in React Js click the link below.

Get started with the first app in React

let's get started…