The Features of React

JSX — JavaScript Syntax Extension

JSX is a syntax extension to JavaScript. It’s used with React to describe what the user interface would look like. With using JSX, we can write HTML structures in the same file contains with JavaScript code. It makes the code easier to understand and debug.

conts name = ‘features’;

conts greet = <h1>Hello, {name}</h1>;

The above code shows us about how JSX is implemented in React. This is not stringn or HTML. Instead, It embed HTML into JavaScript code.

Virtual DOM

React is still a lightweight representation of the real DOM in the memory, and that’s knows as the “virtual” DOM (VDOM). Manipulating the real DOM is much slower than manipulating VDOM because there are no images drawn on the screen. When the state of the object changes, VDOM only changes that object in the actual DOM instead of updating all objects.

Performance

Cause React uses VDOM which makes web aplications run faster than developed used alternatif front-end framework. React breaks up a complex user interface into individual component, which allows multiple users to work on each component simultaneously, thereby speeding up the development time.

Extensions

React comes to be a simple UI design and has many extensions that offer complete applications architecture support. React can provided server-side rendering, which entails rendering a normal client-side only web applications on the server, then it can send a fully rendered pages to the client. It need employs Flux and Redux extensively in web applications development. So, there is React Native, a popular framework derived from React, it uses a compatible mobile aplications.

Debugging

Destructuring is an expression in javascript that is used to break an array or object into different variables.

--

--

--

I,m a Trader and Bussiness Man for Indonesia. It’s always fun to share knowledge with others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What and Whom I follow (, read, listen, and watch) to understand Micro Frontends

Build a Contact Form with Vanilla JS and NodeMailer

How to structure your web/mobile app (part 1): URLs

Day 46 Training at Ryaz: Learning React

Create Ionic 5 Local Notifications Mobile App with Appery.io

Implement Auth0 With Your Node.js App

Gantt and Scheduler for Small, Medium-sized and Large Business

What is Mean Stack Web Development? How to Become a Mean Stack Web Developer?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ari Priyanto

Ari Priyanto

I,m a Trader and Bussiness Man for Indonesia. It’s always fun to share knowledge with others.

More from Medium

Coding with React JS

Ultimate guide on how to effectively learn React!

NewsAPI with React Js

Re-assigning a value to UseParams hook using useState hook.