Golang React JS Technology Blog

Getting Started with React and Hello World Example

Today web engineering has modern apps adhere to what is known as a single-page app (SPA) model. This model gives you an experience in which you never navigate to particular pages or even reload a page.  It loads and unloads the various views of our app into the same page itself. If you've ever run popular web apps like Gmail, Facebook, Instagram, or Twitter, you've used a single-page app. In all those apps, the content gets dynamically displayed without requiring you to refresh or navigate to a different page. React gives you a powerful subjective model to work with and supports you to build user interfaces in a declarative and component-driven way.

What is React?

React (sometimes called React.js or ReactJS) is an open-source UI component library. The fundamental philosophy of React is to create composable UIs using JavaScript, that provides a view for data rendered as HTML. React UI components are highly self-contained, concern-specific blocks of functionality. There are components like date-picker or captcha components which have both a visual representation and dynamic logic. And some components like auto-complete or comment component might fetch the auto-completion or comments list from the server.

In React applications, you create interfaces from components. React's rendering system deals with these components and supports the application view in sync. React gives you a trivial virtual DOM, dynamic views without templates, unidirectional data flow, and straightforward mutation. What React introduces is the use of pure JavaScript(without  templates) and a new approach to look at building UI components.
The DOM, or Document Object Model, is a programming interface that provides JavaScript programs to deal with (HTML, XML, and SVG) types of documents. The DOM maintains a structured way of accessing, storing, and handling various parts of a document. A virtual DOM is a data structure or collection of data structures that imitate the Document Object Model that exists in browsers. A virtual DOM will be present as an intermediate layer between the application code and the browser DOM. The virtual DOM supports the complexity of change detection and management to be suppressed from the developer and carried to a specialized layer of abstraction. The virtual DOM is comprised React elements, which are look similar to HTML elements, but they are JavaScript objects.
React's virtual DOM handles change detection in data and rendering browser events into events that React components can recognize and react to. React's virtual DOM also intends to optimize reforms made to the DOM for the sake of performance.

React is V in an MVC Architecture

React is a way to represent the user interface of an application and a mechanism to alter that over time as data changes. React is created with declarative components that illustrate an interface. React works primarily in the View layer where all of its fears and concerns revolve around keeping your visual elements up-to-date. This MVC architecture is absolutely not a fair judgment of what React is or thinks to be. React works primarily in the View layer where all of its fears and concerns revolve around keeping your visual elements up-to-date. This means you are free to use whatever you want for the M and C parts of your MVC architecture. This flexibility gives you to choose any technology you are familiar with, and it creates React useful for creating new web apps and also for existing apps you'd like to enhance without modifying internal business logic and refactoring a bunch of code.

Golang React Example: Hello World

Let's explore your first React code—the ultimate example used for learning programming languages—the Hello World application. The project will print a "Hello World!!!" heading on a web page. The folder structure of the project is simple. It consists of two files in the folder, one is HTML file index.html and another is server.go.

index.html
<!DOCTYPE html>
<html>
<head>
	<script src="https://fb.me/react-0.14.3.min.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
</head>
<body>
	<div id="root"></div>
	<script type="text/javascript">
		ReactDOM.render(
			React.createElement('H1', null, 'Hello World!!!'),
			document.getElementById('root')
		)
	</script>
</body>
</html>
server.go
package main
 
import (
	"fmt"
	"html/template"
	"net/http"
)
 
const (
	Port = ":8080"
)
 
func serveStatic(w http.ResponseWriter, r *http.Request) {
	t, err := template.ParseFiles("index.html")
	if err != nil {
		fmt.Println(err)
	}
	t.Execute(w, nil)
}
 
func main() {
	http.HandleFunc("/", serveStatic)
	http.ListenAndServe(Port, nil)
}
Using command line run command "go run server.go" and open url http://localhost:8080/ in any browser.

The two JS files react-dom-0.14.3.min.js (webbrowser DOM renderer) and react-0.14.3.min.js (React Core package) used to import React and ReactDOM library. React provides an abstraction over the DOM. Once the element is created and stored in h1 tag, we can render it to the DOM node/element with ID content using the ReactDOM.render() method.

React for the web development requires React Core and ReactDOM libraries. React Core is a library fit for development and share composable UI components using JavaScript and JSX (optionally). When working with React in the browser, we can use the ReactDOM library, which has methods for DOM rendering as well as for server-side rendering.
Once you pick up React, your applications can be smoother to build out. They will keep to be simpler to work on for larger teams, and sophisticated qualities can be easier to implement and maintain. React can be comparatively easy for onboarding engineers to pick up, can cut down the total amount of unnecessary complication in an application, and can reduce technical deficit by increasing code reuse.

Most Helpful This Week
How to handle events using expressions inside JSX? Loop inside React JSX React JS onClick event handler React Static Website with Material UI theme onClick Event binding and get event name in ReactJs Check checkbox is Checked or Unchecked What is JSX? How to create Functional Component? onMouseDown and onMouseUp Event handling in ReactJs Integrate Bootstrap with ReactJS Application