Getting your business information ready for AI
What good data means for a small business using AI, and the ordinary housekeeping that gets your files ready and pays off with or without AI.
· 6 min readFrom the archive: originally published on the Eastpoint blog on 16 January 2019. Some details reflect that time.
React JS is a JavaScript library for building user interfaces. It was created by Facebook in 2013 and has since been a leading technology in the web development industry.
React is now used in the foremost websites and applications running today, even diverging into app development through React Native. As a result of its rise in prominence React has also amassed a huge user base and following.
Now let’s detail some of the advantages of React, we’ll be focusing on web development.
JSX
JSX is a syntax extension to JavaScript, it is recommended that developers use JSX to simplify the development process.
When using JSX rather than plain JavaScript, working with UI can be clearer. This is because HTML markup is recognised as part of the code, which provides visual feedback to the user such as formatting and useful error and warning messages.
This can make the creation and rendering of React components much easier.
Virtual DOM
The Document Object Model (DOM) is a programming interface for HTML, XHTML, or XML documents. Its primary purpose is to represent a web page as a logical tree structure consisting of nodes and objects. These provide a way for programming languages to interact with and manipulate web pages.
Conventional use of the DOM requires a web server that continually checks for updates and changes and produces the correct response where necessary. After a change takes place the entire DOM must be updated. This is not an efficient process, considering that the complexity of web pages has considerable increased since the introduction of the DOM over 20 years ago.
This is where React comes in. Instead of using the real DOM, it uses a copy called the virtual DOM. This allows the changes to take place on a web page without having to update the whole DOM. As a result, individual elements can be targeted and updated in real time. This can significantly lower the workload when updating a web page and increase efficiency.
Not only does React make updating a web page more efficient, it also makes it more streamlined and less disruptive to the user.
Components
React is largely based on the use of components. These can either represent standard DOM tags, such as
and
, or can represent a unique element defined by a user. A benefit gained from this is that once defined, components can then be reused as many times as required. Thus, eliminating a large amount of repeated code, simplifying the remaining code and ensuring consistency.
DOM tag component:
User defined component:
Downward data binding
In React the issues created by explicit data binding have been removed. This was achieved by allowing only downward data binding. The result of this is that it is not possible for a change in a child element to have any direct effect on its parent element.
This means that events must be raised by child components, which parent components then respond to and consequently prevents unwanted changes taking place.
Development tools
Due to React’s huge popularity and support since its introduction, there are now an array of toolsets available to make a React developer’s life easier. Libraries and frameworks are readily available for most popular environments and development tools, along with a selection of debugging and design tools.
Development community
React has a huge community of users, both professionals and beginners, this means that there is an endless supply of resources and information out there to help guide users in creating exactly what they need. In the unlikely event that the information you’re looking for can’t be found then there are plenty of communities and forums full of people happy to work together and help to provide the answers.
In summary...
React offers many benefits to a project. If you’re looking for a responsive, efficient, well supported and cutting-edge technology to drive your next project, give React a go.
References:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://en.wikipedia.org/wiki/Document_Object_Model
https://reactjs.org/docs/components-and-props.html
