Post
Ask Question

React (2) - JSX File

This series of articles is about React. In recent years, Single Page Applications (SPA) have been popular in web development associated with loosely coupled models. The major two SPA, Angular and React, are the most popular and almost used in anywhere. I used to be an Angular Developer. While I learned Angular, I started by myself without any training. That made my learning curve quite long, and even at a senior level, I am still not familiar with something I have not met. While for react, there is a chance in a training course. I got the concepts and skills in every course. I will share here the major points that could be helpful for any new React developer.

A. Introduction

React uses a syntax extension for JavaScript named JSX, which is a mix of JS and HTML (a subset of HTML). This article will discuss JSX.

  • A. Introduction
  • B. What is JSX
  • C. React is Component-Based
  • D. Function Component and Class Component
  • E. VS Code Extensions

B. What is JSX?

Consider this variable declaration.

const element = <h1>Hello, world!</h1>;
  • This funny tag syntax is neither a string nor HTML.
  • It is called JSX, and it is a syntax extension to JavaScript.
    • We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
  • JSX produces React “elements”. 

From wiki

JSX (JavaScript Syntax Extension, occasionally referred to as JavaScript XML) is a JavaScript extension that allows the creation of DOM trees using an XML-like syntax. Initially created by Meta for use with React, JSX has been adopted by multiple web frameworks. 

C. React is Component-Based

index.html: Starting point.

index.html

Index.js: feed the root, containing App.js.

app.js

App.js: major component containing sub-components.

Components

Sub-Component.

Sub-Component

Render

Header

React Entry Point: How index.html invoke index.js [ref]

In simple words: index.html is where all your UI is rendered by React and index.js is where all your JS codes exist. So browser, first get index.html and then renders the file. then JS  index.js is responsible for all the logical rendering of UI, which takes an element with id root to be its base element for rendering all the UIs.

Like in vanilla JS, React searches for an element with an ID 'root' and keeps all the UI to be rendered inside that element using the virtual DOM concept. 

After you complete the React development, you have to use a build tool to build a React app by npm build or yarn build, which merges all your codes into a single file. So when a client requests your site, the server sends .html the JS files. So, at last, JS files manipulate the single .html file.

About the create-react-app, react-scripts package that comes when you create a react app with npx create-react-app handles all the requirements to serve a development serve using node. All the files of packages are inside node_moudles.

D - Function Component and Class Component

Functional Components

Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.

Syntax:

const Car=()=> {
      return <h2>Hi, I am also a Car!</h2>;
}

Class Component

This is the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application).

Syntax:

class Car extends React.Component {
      render() {
        return <h2>Hi, I am a Car!</h2>;
      }
}

 

Class component

Running

Sample

Functional Components vs. Class Components

Functional Components                   Class Components                
A functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX). A class component requires you to extend from React. Component and create a render function that returns a React element.
There is no render method used in functional components. It must have the render() method returning JSX (which is syntactically similar to HTML)
Functional components run from top to bottom, and once the function is returned, it can’t be kept alive. The class component is instantiated, and different life cycle method is kept alive and is run and invoked depending on the phase of the class component.
Also known as Stateless components, as they simply accept data and display them in some form, they are mainly responsible for rendering UI. Also known as Stateful components because they implement logic and state.
React lifecycle methods (for example, componentDidMount) cannot be used in functional components. React lifecycle methods can be used inside class components (for example, componentDidMount).
Hooks can be easily used in functional components to make them Stateful.

Example

const [name,SetName]= React.useState(' ')

 It requires different syntax inside a class component to implement hooks.

Example

constructor(props) {
   super(props);
   this.state = {name: ' '}
}
Constructors are not used. Constructor is used as it needs to store state. 


E. VS Code Extensions

Installation of ES7+React/Redux/React-Native Snippet.

Adding the feature to create React Function Component and Class component by shortcuts, such as

For Function Component

  • rafce

For Class Component

  • rcc

Negative experience after I installed, and active Babel ES6/ES7 extension

Ctrl + / => Toggle Line Comment for line or block  --- will never work.

With the installation of Babel ES6/ES7 extension, as many noticed, and when you uninstall or deactivate it, VScode retrieves its normal behaviour: Ctrl + / => Toggle Line Comment for line or block selected with // for JS, JSX, ... files; Shift + Alt + A => Toggle Block Comment for line or block selected between <!-- -->  in HTML files, between /* */ in JS expressions and between {/* */} in JSX files for markup tags in render/return [ref]

References


Similar Articles