Everand Logo

Welcome to Everand!

  • Discover millions of audiobooks, ebooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

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

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

    By DAISY JOHNSTON

    ()

    Read preview

    About this ebook

    "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

    LanguageEnglish
    PublisherDAISY JOHNSTON
    Release dateDec 28, 2023
    ISBN9783988317230
    JAVASCRIPT FRONT END PROGRAMMING: Crafting Dynamic and Interactive User Interfaces with JavaScript (2024 Guide for Beginners)
    Author

    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.

    Related to JAVASCRIPT FRONT END PROGRAMMING

    Related ebooks

    Programming For You

    View More
    View More

    Related podcast episodes

    Related categories

    Reviews for JAVASCRIPT FRONT END PROGRAMMING

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      JAVASCRIPT FRONT END PROGRAMMING - DAISY JOHNSTON

      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

      Enjoying the preview?
      Page 1 of 1