The Lexical Structure of JavaScript

To understand the structure of JavaScript, you need to learn the following building blocks of it: Unicode, case sensitivity, semicolons, comments, white space, literals, identifiers, and reserved words.

Unicode

You can use Unicode in JavaScript. So, you can use Emojis as variable names and write identifiers in any language, for example, Japanese or Chinese, with some rules. 

If you want to know whether your Unicode variable is acceptable or not, you can check it at https://mothereff.in/js-variables.

Case sensitivity

JavaScript is case-sensitive like many languages. So, a variable name written in a lower case format is different from the same variable name written in a camel case format.

Semicolons

JavaScript has a very C-like syntax, and you might see lots of code samples that feature semicolons at the end of each line.

Semicolons are not mandatory in JavaScript, and it does not have any problem that does not use them. Many developers, coming from languages that do not have semicolons, also started avoiding using them in JavaScript code.

It goes to personal preference and your programming behavior. If you are using those languages where semicolons are mandatory, you can use the same behavior for your JavaScript code.

Comments

Using comments helps us to understand code and its purpose. Each programming language has its own set of syntax when it comes to writing comments.

You can use two kinds of comments in JavaScript:

Single-line comments: Single-line comments begin with //. It will ignore all the things immediately after // syntax until the end of that line. It is also known as inline comments.

// Single-line comment

Multi-line comments: Multi-line comments begin with /* and end with */. You can write as many lines as you want in between these syntaxes.

/* Multi-line
Comment */

Usually, most developers use /* and */ syntax to writing multi-line block comments as JavaScript does not give any error. But the standard way to use multi-line comments in JavaScript is to use block comments as follows;

  1. Start with /** in a blank line.
  2. End with */ at the end line.
  3. Use * at the beginning of each line between the start and the end.
/**
 * Multi-line comment as
 * block comments
 */

White space

JavaScript does not consider white space meaningful like Python. You can add spaces and line breaks in any fashion.

In practice, you will most likely keep a well-defined style of indentation and adhere to what people commonly use.

Literals

We define as literal a value that is written in the source code, for example, a number, a string, a boolean, or also more advanced constructs, like Object Literals or Array Literals:

Identifiers

An identifier is a sequence of characters to identify a variable, a function, or an object. There are specific rules for identifiers as follows,

  • It should start with a letter (it could be any allowed character like emoji 😄 or Unicode words), the dollar signs $, or an underscore _.
  • It can contain digits.

Reserved words

You cannot use reserved JavaScript words as identifiers. Some of the reserve words are as follows,

break
do
instanceof
typeof
case
else
new
var
catch
finally
return
void
continue
for
switch
while
debugger
function
this
with
default
if
throw
delete
in
try
class
enum
extends
super
const
export
import

These reserved words are JavaScript functions or variables, which are used for different operations using JavaScript.

Getting started with ReactJS

Setting up a local environment is recommended way to learn ReactJS because the local setup allows you to complete the tutorial using your choice of editor, use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Let’s start with creating a new ReactJS application.

Create React App

Creating React App is a comfortable environment for learning and building an application in React.

There are few prerequisites for creating a React app as follows,

  • Node.js >= 14.0.0
  • npm >= 5.6

If above requirements are satisfied, you can run the following command to create a new react application,

npx create-react-app my-react-app

You can change my-react-app to anything you want to name your app.

The create-react-app command will set up everything you need to run a React application. Now you are ready to run your first real React application! Go to your application directory using the following command,

cd my-react-app

Now, run the following command inside your application directory to run your application,

npm start

It will compile your application and open it in the new browser window or tab. If not, you can open your browser and write localhost:3000 in the address bar. Your application will look like screenshot below,

If you check your command window, it will show the following output,

You can see that command window is also providing command to create a production build for your application.

Using ReactJS in the HTML File

Now that we know what ReactJS is, we can start with different usage of ReactJS. If you don’t know what ReactJS is, read the ReactJS introduction.

In this article, we will learn to use ReactJS directly in the HTML file. There are some prerequisites to adding ReactJS script inside the HTML code. We need to include the following three javascript in the head section of the HTML file.

  • ReactJS
  • ReactDom
  • Babel

The first two allow us to write ReactJS code in our JavaScripts, and Babel will allow to write JSX syntax and ES6 in older browsers.

Example

Let’s see an example of using ReactJS in the HTML file,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }
      ReactDOM.render(<Hello />, document.getElementById('example'))
    </script>
  </body>
</html>

This way, we can use ReactJS for testing purposes. But for production use, we have to set up a React environment.