React and Its Jargon: how to code in React

Welcome to post #2 of React and Its Jargon series. Did you miss the first post? You can find it here: React and Its Jargon: How React render DOM efficiently

In today’s post, we will cover concepts and jargon focusing on How to code in React — React, ReactDOM, Props & State and JSX

React and ReactDOM

React package contains helpers related to create and update React Element & React Component.

ReactDOM package provides browser-specific helpers to render and manage React Element and Component.

Initially ReactDOM was part of React library because React was made to target browser’s DOM only.

As React way of working gained its presence in other environment & target, React split out DOM specific API’s into a separate library — ReactDOM. Packages such as react-native, react-art, react-canvas and more, used react rendering mechanism as base to build library for non-DOM specific cases.

React Element and React Component

React Element is the smallest building block of React application. It represents the DOM element as a plain object.

React components are reusable pieces of code that return the React elements. It provides more control over the React element as we can define the life cycle method, handler, internal state, etc using it.

Code related to network call, manipulation of user input etc goes into React Component as we can create react event handler and utilize different life cycle methods in it.

Props and State

Both are plain JavaScript Objects which represent data related to React Component.

Props is the data that is passed by a parent component to the child component. It is a read-only object hence receiving child components can not modify it in its scope.

State is a data that is created and managed within the component. It represents the local state of a component and can be updated using React setState method.

All React components must act like pure functions with respect to their props.

Let’s see and relate the jargon we just learned in a sample code —

Vanilla JS React Counter Code

In the above example (codesandbox) —

• React and React DOM is loaded as a separate package.
• Counter is a React Component which is receiving read-only initialCount value in props object and managing internal count value under state object.
• counterWithZeroStart is a React Element created using React Component whereas other React Elements are created directly using DOM Element.

To understand how React will efficiently render this counter’s UI in browser on update read — React and Its Jargon #Part 1

JSX

JSX or JavaScript Extension is a syntax extension that easy out writing React code. It allows developers to write HTML like syntax in the JavaScript file.

JSX is not a browser friendly file system. Use JSX babel transpiler to convert JSX code back to vanilla JS React code.

Let’s re-write the vanilla JS react code in JSX —

JSX React Counter Code

In the above JSX Code (codesandbox), did you notice the HTML like syntax? React Elements and Components are written as HTML tags and Props are now passing as attributes — JSX uses the camel case naming convention for attributes to avoid collision with reserved keywords such as className used in place of class.

Writing code in JSX syntax really made React a developer-friendly library.

I hope this post made you more comfortable with the React concepts and Jargon focusing on How to code in React. Please share your valuable feedback on the post to improve it further.

In case you want to reach out, here’s where you can find me :)
Email: 23decrajat@gmail.com
LinkedIn: www.linkedin.com/in/rajatgms