React: An Introduction

Released in May of 2013, the free open-source and front-end JavaScript library known as React was made available to the public. This open-source library was released with its initial intentions of building user interfaces, along with other user interface components. Nowadays, React is maintained by Facebook and a large community of companies individual developers. React is a library that is most often used in single-page development and even mobile applications. Since React applications still require additional libraries to be installed for routing, its main concern is still to render state management to the Document Object Model. I chose to cover React in this blog because there is a high probability it will be used in our Senior Design Group Project, and I wanted to learn more about it as soon as I could. To briefly cover React in this blog, I will be going over its Components/Functions, React Hooks, and JSX.
MSC

React Components/Functions

Since React code is made of entities that are called components, its important to note that these components can be rendered in the document object model to a particular element. This is possible by using the React DOM library, and allows developers using React to pass values known as “props” when rendering a component. There are two primary methods of declaring components in React, and they are labeled as class-based components and function components. Function components are those which are declared with a function that will return some JSX, which is also known as JavaScript XML. The example below shows proper React syntax in a Function component:
const Greeter = (props) => <div>Hello, {props.name}!</div>;

Class-based components are those which are declared using ES6 classes, which refer to the ECMAScript. This is essentially a general-purpose programming language that is a JavaScript Standard. This component is often used for client-side scripting and has been increasingly popular for its use in writing server applications using Node.js. The example below shows proper React syntax in a Class-based component:
class ParentComponent extends React.Component {
state = { color: 'green' };
render() {
return (
<ChildComponent color={this.state.color} />
);

React Hooks

Hooks in React are essentially functions which allow developers to “hook into” React state and lifecycle applications. These are accessed through function components as hooks do not work inside classes, but instead allow devs to use React without classes. There are many built-in hooks in React such as the following:

  • useState
  • useContext
  • useReducer
  • useMemo
  • useEffect
    These hooks are documented in the Hooks API Reference as being the most used. They serve primary for controlling state and side effects respectively in React. The example provided below shows a React Hook known as useState:

    MSC

JSX

JSX is a shortened version of JavaScript Syntax Extension, which is also sometimes referred to as JavaScript XLM. JSX is basically an extension to the JavaScript language syntax, which provides developers a way to structure component rendering using familiar syntax. React components are often written using JSX, and they share common extension syntax with those created by Facebook for PHP, called XHP. JSX’s markup is made-up of nested elements, attributes, JavaScript expressions, and conditional statements. Code that is written in JSX will require conversion with tools such as Babel before web browsers can understand the written language. This whole process is usually performed during the build of the software, and before application is deployed from developers.

Common Issues with React

Although React is a highly used open-source JavaScript library, there are disadvantages in place that deter users from its functionality at times. The most stated issue with React is the high-pace of its development process, as the environment changes very fast continually. This is usually because it takes a while for developers to get used to new ways of implementing code through the software, as well as documenting properly. Since react technologies update very quickly, there is not enough time for developers to document and write instructions to have backlogs of their writing process. Another stated issue with React is that JSX can act as a barrier during deployment. Since ReactJS uses JSX, some members of the community believe that JSX has complexity issues. This means it may lead to a consequent hard learning curve for developers that are new to React. Visit JavaPoint to read more about the advantages and disadvantages of React.

MSC

Learn More About React

You can visit React to learn more about React and see the important documents on its implementations and advanced concepts. React has a large and active Community that allows new users to learn through skilled developers that employ React in their projects. To get started with React, their Tutorials are very beneficial to new learners and offer a free way to gain insight into React.


Stay tuned for a new blog next week!