JAVASCRIPT FRONT END PROGRAMMING: Crafting Dynamic and Interactive User Interfaces with JavaScript (2024 Guide for Beginners)

By DAISY JOHNSTON

"JavaScript Front End Programming" is your indispensable guide to mastering the art of front-end development, empowering you to create dynamic and engaging user interfaces with JavaScript. Tailored for both beginners and those looking to deepen their skills, this book provides hands-on examples, essential techniques, and practical insights to el

• Language: English
• Publisher: DAISY JOHNSTON
• Release date: Dec 28, 2023
• ISBN: 9783988317230

DAISY JOHNSTON

Daisy Johnston, hailing from the tech hub of San Francisco, is a seasoned front-end developer and author specializing in crafting dynamic and interactive user interfaces with JavaScript. Her passion for simplifying complex concepts makes her a perfect guide for beginners in this evolving field.

Book preview

Introduction

Developed by Facebook and released in 2013, React is one of the best front-end libraries, used to handle view layers in mobile and web apps. React JS gives us the ability to create user-interface components that we can reuse, and it is currently enjoying being the most popular community-back JavaScript library.

Who This Book is For

This guide is aimed at those who already have some developing and programming experience and want to get to grips with React JS. Throughout the book, we try to explain each concept using simple examples that you can practice for yourself. Once you have reached the end of the book, you will have the confidence to work with the library to build your own web apps and web pages.

Prerequisites

Working with React JS requires that you have a good working knowledge of JavaScript, CSS, and HTML5. And, although HTML is not used with React JS, the JSX is much like it, so a working knowledge of HTML is also useful.

The official documentation states that the React JS library helps us build composable user interfaces and strongly encourages reusable components, presenting data that will change. It provides us with a much better programming model and can use Node to render on the server.

Using React helps you implement reactive data flow, which is much easier to reason than the traditional data binding method.

React Features

React offers plenty of features:

JSX - a JavaScript syntax extension recommended for React development, although it isn’t strictly necessary. Components – React JS is strongly focused on components. Indeed, everything is a component, and if you can get into that way of thinking, you will find code maintenance much easier with large-scale projects.

Flux and Unidirectional Data Flow – One of the easiest ways to reason about your app is with the one-way data flow implemented by React, using a pattern called Flux.

React Advantages

It uses a JavaScript object called Virtual DOM, much faster than the regular DOM, and helps to improve the performance of your apps.

It can be used on both the server and client-side, as well as other frameworks

The data and component patterns make readability much better, helping to maintain much bigger apps.

React Limitations

It only works on the app view layer, so you will still need other technologies to build a complete development tool kit.

It uses JSX and inline templating, which some developers find a little awkward.

React JS is one of the best tools to have in your front-end development tool kit, so get stuck in and get to grips with all the concepts and learn how to use them through simple, practical examples.

Chapter 1 : ReactJS - Environment Setup

To kickstart your journey, we’ll begin by setting up the environment you need for success in your React development. There are quite a few steps to this, and the first one requires that you install Node.js, so that’s where we begin.

Local Environment Setup

You are going to need two things on your computer to do this – a text editor and the Installables for Node.js.

Text Editor

This is used for typing your programs, and there are several different ones you can use, such as Windows Notepad, Brief, EMACS, Vi, Vim, OS edit Command, and many more. The one you use will depend on your operating system, for example, if you use Windows, you will likely use Notepad or Vi or Vim, while Linux users would stick with Vi or Vim. When you create a file using the editor, it is known as a source file and is where your program code is stored.

Node.js source files typically have the .js extension. Before you start programming, ensure you have a text editor in place first. Make your choice and follow the download instructions on the editor’s website if you need to install one. Also, be sure you have sufficient programming experience – this book is not for those who have no experience.

Node.js Runtime

When you write your source code in the source file, it is written in JavaScript, and the Node.js interpreter reads, interprets, and executes the code. Node.js is a binary installation for Linux, SunOS, macOS, and Windows, both 32-bit and 64-bit architectures.

Download Node.js Archive

Download the newest version of the file from http://nodejs.org/download/ for your specific operating system. macOS/Linux/Unix/SunOS Download the file and open it on your computer. Extract the archive node file called (osname).tar.gz into /tmp. Move the files from there to a directory named /usr/local/nodejs. Here’s an example:

$ cd /tmp

$ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz

$ tar xvfz node-v6.3.1-linux-x64.tar.gz

$ mkdir -p /usr/local/nodejs

$ mv node-v6.3.1-linux-x64/* /usr/local/nodejs

Now add /usr/local/nodejs/bin to your PATH environment variable using

one of the commands below, depending on your OS:

Linux - export PATH=$PATH:/usr/local/nodejs/bin

Mac - export PATH=$PATH:/usr/local/nodejs/bin

FreeBSD - export PATH=$PATH:/usr/local/nodejs/bin

Windows

Download the MSI file and follow the on-screen prompts to get Node.js on your system. The installer should use the default option of C:\Program Files\node.js to install the file and set the bin directory (C:\Program Files\nodejs\bin) in the Path environment variable for you. If you have open command prompts, restart them so the changes can take effect.

Verifying the Installation

Create a new file and name it main.js. Then add the code below to it:

/* Hello, World! program in node.js */

console.log(Hello, World!)

Use the Node.js interpreter to execute the file using this command:

$ node main.js

You should see the following on your screen:

Hello, World!

Once Node.js is installed and working, React can be installed on it using

npm. There are two ways to do this:

With Webpack and Babel

With the create-react-app command

With Webpack and Babel

Webpack manages independent modules and loads them and is commonly known as a module bundler. It compiles dependent modules into one bundle, a singles file, and this can be used during your app development in two ways – call it using the command line or use webpack.config to configure it. Babel compiles and transpiles JavaScript and is used for converting a source code into another one.

This allows you to use the EC6 code features because Babel will convert it to EC5, which any browser can use.

Step One – Creating the Root Folder

Create a new folder and call it reactApp. This is where all the required files will be installed with the mkdir command: C:\Users\username\Desktop>mkdir reactApp C:\Users\username\Desktop>cd reactApp Creating a module requires that the package.json file is generated so, once your folder is created, create another file called package.json.

To do this, run the following npm init command at the command prompt: C:\Users\username\Desktop\reactApp>npm init That command is asking for module information, like author, description, package name and so on. You can avoid all this by using the -y option, like this.

C:\Users\username\Desktop\reactApp>npm init -y

Written to C:\reactApp\package.json:

{

name: reactApp,

version: 1.0.0,

description: ,

main: index.js,

scripts: {

test: echo \"Error: no test specified\" && exit 1

},

keywords: [],

author: ,

license: "ISC

Step Two – Installing React and react dom

We are trying to install ReactJS along with all its dom packages, and we do

that with two npm commands – install react and react-dom. Use the –save

option to add these packages to the package.json file:

C:\Users\Username\Desktop\reactApp>npm install react —save

C:\Users\Username\Desktop\reactApp>npm install react-dom —save

Alternatively, use one single command to install and save everything:

C:\Users\username\Desktop\reactApp>npm install react react-dom –save

Step Three – Installing Webpack

Because webpack is being used to generate the bundler, we need to install

here things – webpack, webpack-dev-server, and webpack-cli:

C:\Users\username\Desktop\reactApp>npm install webpack —save

C:\Users\username\Desktop\reactApp>npm install webpack-dev-server —save

C:\Users\username\Desktop\reactApp>npm install webpack-cli —save

Or use one command to install everything:

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpackcli —save

Step Four – Installing Babel

Now we want babel installed, along with the relevant plugins:

C:\Users\username\Desktop\reactApp>npm install babel-core —save-dev

C:\Users\username\Desktop\reactApp>npm install babel-loader —save-dev

C:\Users\username\Desktop\reactApp>npm install babel-preset-env —save-dev

C:\Users\username\Desktop\reactApp>npm install babel-preset-react —save-dev

C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin —save-dev

Or use one command to install them all:

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-presetenv babel-preset-react html-webpack-plugin —save-dev

Step Five – Creating the Files

To finish, more files need to be created and these can be created manually

or by using the command prompt. These are the required files:

C:\Users\username\Desktop\reactApp>type nul > index.html

C:\Users\username\Desktop\reactApp>type nul > App.js

C:\Users\username\Desktop\reactApp>type nul > main.js

C:\Users\username\Desktop\reactApp>type nul > webpack.config.js

C:\Users\username\Desktop\reactApp>type nul > .babelrc

Step Six – Setting the Compiler, Server, and Loaders

Open the file called webpack-config.js and add in the code below. What this

does is set main.js as the webpack entry point. The output path is where the

bundled app is served, and the development server is also being set as 8001

port, although you can choose whatever port you want.

webpack.config.js

const path = require(‘path’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

entry: ‘./main.js’,

output: {

path: path.join(__dirname, ‘/bundle’),

filename: ‘index_bundle.js’

},

devServer: {

inline: true,

port: 8001

},

module: {

rules: [ ]

test: /\.jsx?$/,

exclude: /node_modules/,

loader: ‘babel-loader’,

query: {

presets: [‘es2015’, ‘react’]

plugins:[

new HtmlWebpackPlugin({

template: ‘./index.html’

})

Open package.json and delete the following from the Scripts object:

test echo \ Error: no test specified\" && exit 1

We delete this because we don’t intend to test anything right now.

Instead, we can add two more commands – start and build:

start: "webpack-dev-server —mode development