JavaScript Moderne - La notion des variables (Usage de mot clé Let et Const)

Javascript moderne (ES6 - ES11) #2 La notion des variables (Usage de mot clé Let et Const) [Tuto fr]

Télécharger VS Code : https://code.visualstudio.com/

Le code source : https://github.com/drcmind/Javascript-Moderne


les amis dans cette nouvelle série de vidéos on va apprendre ensemble le langage de programmation Javascript depuis sa version ECMA2015 jusqu’à ECMA2020 (ES6 - ES11) et delà on se focalisera beaucoup sur la notion de :

  1. Let et Const
  2. Arrow function
  3. Object literal
  4. Template String
  5. Destructuring assignment
  6. Default parameter
  7. Rest et Spread operators
  8. Class, Modules, Promises, iterators
  9. Await/Async
  10. Map et Set

#javascript #programming #web-development #developer

What is GEEK

Buddha Community

JavaScript Moderne - La notion des variables (Usage de mot clé Let et Const)

JavaScript Moderne - La notion des variables (Usage de mot clé Let et Const)

Javascript moderne (ES6 - ES11) #2 La notion des variables (Usage de mot clé Let et Const) [Tuto fr]

Télécharger VS Code : https://code.visualstudio.com/

Le code source : https://github.com/drcmind/Javascript-Moderne


les amis dans cette nouvelle série de vidéos on va apprendre ensemble le langage de programmation Javascript depuis sa version ECMA2015 jusqu’à ECMA2020 (ES6 - ES11) et delà on se focalisera beaucoup sur la notion de :

  1. Let et Const
  2. Arrow function
  3. Object literal
  4. Template String
  5. Destructuring assignment
  6. Default parameter
  7. Rest et Spread operators
  8. Class, Modules, Promises, iterators
  9. Await/Async
  10. Map et Set

#javascript #programming #web-development #developer

Dexter  Goodwin

Dexter Goodwin

1623916080

A Simple Explanation Of JavaScript Variables: Const, Let, Var

The variable is a fundamental concept that any developer should know.

In JavaScript, constlet, and var are the statements you can declarate variable.

I’m going to describe each variable type around the declaration, initialization, value access, and assignment. Each of the 3 types (constlet, and var) create variables that behave differently exactly in these 4 steps.

This post isn’t quite beginner friendly, but rather useful to solidify your knowledge of variables and their behavior.

Let’s get started.

1. Variable identifier

First, let’s understand what a variable is.

In simple terms, a variable is a placeholder (or a box) for a value. A value in JavaScript can be either a primitive value or an object.

The variable has a name, which stricter is called identifier. Examples of identifiers are myNumbernamelistitem.

The syntax of an identifier is pretty simple:

An identifier can contain letters, digits 0..9, and special symbols $_. An identifier cannot start with a digit 0..9.

Examples of valid identifiers are myNumbermy_numberlist1$item_nameab$_.

#javascript #variable #const #let #var

Leonard  Paucek

Leonard Paucek

1656280800

Jump to Local IDE Code Directly From Browser React Component

React Dev Inspector

Jump to local IDE code directly from browser React component by just a simple click

This package allows users to jump to local IDE code directly from browser React component by just a simple click, which is similar to Chrome inspector but more advanced.

View Demo View Github

Preview

press hotkey (ctrl⌃ + shift⇧ + commmand⌘ + c), then click the HTML element you wish to inspect.

screen record gif (8M size):

Jump to local IDE code directly from browser React component by just a simple click

Installation

npm i -D react-dev-inspector

Usage

Users need to add React component and apply webpack config before connecting your React project with 'react-dev-inspector'.

Note: You should NOT use this package, and React component, webpack config in production mode


 

1. Add Inspector React Component

import React from 'react'
import { Inspector, InspectParams } from 'react-dev-inspector'

const InspectorWrapper = process.env.NODE_ENV === 'development'
  ? Inspector
  : React.Fragment

export const Layout = () => {
  // ...

  return (
     {}}
      onClickElement={(params: InspectParams) => {}}
    >
     
       ...
     
    
  )
}


 

2. Set up Inspector Config

You should add:

  • an inspector babel plugin, to inject source code location info
    • react-dev-inspector/plugins/babel
  • an server api middleware, to open local IDE
    • import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'

to your current project development config.

Such as add babel plugin into your .babelrc or webpack babel-loader config,
add api middleware into your webpack-dev-server config or other server setup.


 

There are some example ways to set up, please pick the one fit your project best.

In common cases, if you're using webpack, you can see #raw-webpack-config,

If your project happen to use vite / nextjs / create-react-app and so on, you can also try out our integrated plugins / examples with

raw webpack config

Example:

// .babelrc.js
module.exports = {
  plugins: [
    /**
     * react-dev-inspector plugin, options docs see:
     * https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options
     */
    'react-dev-inspector/plugins/babel',
  ],
}
// webpack.config.ts
import type { Configuration } from 'webpack'
import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'

const config: Configuration = {
  /**
   * [server side] webpack dev server side middleware for launch IDE app
   */
  devServer: {
    before: (app) => {
      app.use(launchEditorMiddleware)
    },
  },
}


 

usage with Vite2

example project see: https://github.com/zthxxx/react-dev-inspector/tree/master/examples/vite2

example vite.config.ts:

import { defineConfig } from 'vite'
import { inspectorServer } from 'react-dev-inspector/plugins/vite'

export default defineConfig({
  plugins: [
    inspectorServer(),
  ],
})


 

usage with Next.js

use Next.js Custom Server + Customizing Babel Config

example project see: https://github.com/zthxxx/react-dev-inspector/tree/master/examples/nextjs

in server.js, example:

...

const {
  queryParserMiddleware,
  launchEditorMiddleware,
} = require('react-dev-inspector/plugins/webpack')

app.prepare().then(() => {
  createServer((req, res) => {
    /**
     * middlewares, from top to bottom
     */
    const middlewares = [
      /**
       * react-dev-inspector configuration two middlewares for nextjs
       */
      queryParserMiddleware,
      launchEditorMiddleware,

      /** Next.js default app handle */
        (req, res) => handle(req, res),
    ]

    const middlewarePipeline = middlewares.reduceRight(
      (next, middleware) => (
        () => { middleware(req, res, next) }
      ),
      () => {},
    )

    middlewarePipeline()

  }).listen(PORT, (err) => {
    if (err) throw err
    console.debug(`> Ready on http://localhost:${PORT}`)
  })
})

in package.json, example:

  "scripts": {
-    "dev": "next dev",
+    "dev": "node server.js",
    "build": "next build"
  }

in .babelrc.js, example:

module.exports = {
  plugins: [
    /**
     * react-dev-inspector plugin, options docs see:
     * https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options
     */
    'react-dev-inspector/plugins/babel',
  ],
}


 

usage with create-react-app

cra + react-app-rewired + customize-cra example config-overrides.js:

example project see: https://github.com/zthxxx/react-dev-inspector/tree/master/examples/cra

const { ReactInspectorPlugin } = require('react-dev-inspector/plugins/webpack')
const {
  addBabelPlugin,
  addWebpackPlugin,
} = require('customize-cra')

module.exports = override(
  addBabelPlugin([
    'react-dev-inspector/plugins/babel',
    // plugin options docs see:
    // https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options
    {
      excludes: [
        /xxxx-want-to-ignore/,
      ],
    },
  ]),
  addWebpackPlugin(
    new ReactInspectorPlugin(),
  ),
)


 

usage with Umi3

example project see: https://github.com/zthxxx/react-dev-inspector/tree/master/examples/umi3

Example .umirc.dev.ts:

// https://umijs.org/config/
import { defineConfig } from 'umi'

export default defineConfig({
  plugins: [
    'react-dev-inspector/plugins/umi/react-inspector',
  ],
  inspectorConfig: {
    // babel plugin options docs see:
    // https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options
    excludes: [],
  },
})


 

usage with Umi2

Example .umirc.dev.js:

import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'

export default {
  // ...
  extraBabelPlugins: [
    // plugin options docs see:
    // https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options
    'react-dev-inspector/plugins/babel',
  ],

  /**
   * And you need to set `false` to `dll` in `umi-plugin-react`,
   * becase these is a umi2 bug that `dll` cannot work with `devServer.before`
   *
   * https://github.com/umijs/umi/issues/2599
   * https://github.com/umijs/umi/issues/2161
   */
  chainWebpack(config, { webpack }) {
    const originBefore = config.toConfig().devServer

    config.devServer.before((app, server, compiler) => {
      
      app.use(launchEditorMiddleware)
      
      originBefore?.before?.(app, server, compiler)
    })

    return config  
  },
}

usage with Ice.js

Example build.json:

// https://ice.work/docs/guide/basic/build
{
  "plugins": [
    "react-dev-inspector/plugins/ice",
  ]
}


 

Examples Project Code


 

Configuration

Component Props

checkout TS definition under react-dev-inspector/es/Inspector.d.ts.

PropertyDescriptionTypeDefault
keysinspector hotkeys

supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys
string[]['control', 'shift', 'command', 'c']
disableLaunchEditordisable editor launching

(launch by default in dev Mode, but not in production mode)
booleanfalse
onHoverElementtriggered when mouse hover in inspector mode(params: InspectParams) => void-
onClickElementtriggered when mouse hover in inspector mode(params: InspectParams) => void-
// import type { InspectParams } from 'react-dev-inspector'

interface InspectParams {
  /** hover / click event target dom element */
  element: HTMLElement,
  /** nearest named react component fiber for dom element */
  fiber?: React.Fiber,
  /** source file line / column / path info for react component */
  codeInfo?: {
    lineNumber: string,
    columnNumber: string,
    /**
    * code source file relative path to dev-server cwd(current working directory)
    * need use with `react-dev-inspector/plugins/babel`
    */
    relativePath?: string,
    /**
    * code source file absolute path
    * just need use with `@babel/plugin-transform-react-jsx-source` which auto set by most framework
    */
    absolutePath?: string,
  },
  /** react component name for dom element */
  name?: string,
}


 

Inspector Babel Plugin Options

interface InspectorPluginOptions {
  /** override process.cwd() */
  cwd?: string,
  /** patterns to exclude matched files */
  excludes?: (string | RegExp)[],
}


 

Inspector Loader Props

// import type { ParserPlugin, ParserOptions } from '@babel/parser'
// import type { InspectorConfig } from 'react-dev-inspector/plugins/webpack'

interface InspectorConfig {
  /** patterns to exclude matched files */
  excludes?: (string | RegExp)[],
  /**
   * add extra plugins for babel parser
   * default is ['typescript', 'jsx', 'decorators-legacy', 'classProperties']
   */
  babelPlugins?: ParserPlugin[],
  /** extra babel parser options */
  babelOptions?: ParserOptions,
}


 

IDE / Editor config

This package uses react-dev-utils to launch your local IDE application, but, which one will be open?

In fact, it uses an environment variable named REACT_EDITOR to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.

For example, if you want it always open VSCode when inspection clicked, set export REACT_EDITOR=code in your shell.


 

VSCode

install VSCode command line tools, see the official docs
install-vscode-cli

set env to shell, like .bashrc or .zshrc

export REACT_EDITOR=code


 

WebStorm

  • just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)
export REACT_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'

OR

install WebStorm command line tools
Jump to local IDE code directly from browser React component by just a simple click

then set env to shell, like .bashrc or .zshrc

export REACT_EDITOR=webstorm


 

Vim

Yes! you can also use vim if you want, just set env to shell

export REACT_EDITOR=vim


 

How It Works

Stage 1 - Compile Time

  • [babel plugin] inject source file path/line/column to JSX data attributes props

Stage 2 - Web React Runtime

[React component] Inspector Component in react, for listen hotkeys, and request api to dev-server for open IDE.

Specific, when you click a component DOM, the Inspector will try to obtain its source file info (path/line/column), then request launch-editor api (in stage 3) with absolute file path.

Stage 3 - Dev-server Side

[middleware] setup launchEditorMiddleware in webpack dev-server (or other dev-server), to open file in IDE according to the request params.

Only need in development mode,and you want to open IDE when click a component element.

Not need in prod mode, or you just want inspect dom without open IDE (set disableLaunchEditor={true} to Inspector component props)

Analysis of Theory


Author: zthxxx
Source code: https://github.com/zthxxx/react-dev-inspector
License: MIT license

#react-native #react 

JavaScript Var, Let, and Const - 8

To declare a variable in JavaScript either var, let or const is used.
We will distinguish between the three with the following features:

  • Block scope
  • Update and redeclaration
  • Hoisting
  • Undefined

Official Website: https://techstackmedia.com

Watch the entire JavaScript Series, including upcoming JavaScipt videos on YouTube: https://www.youtube.com/playlist?list=PLJGKeg3N9Z_Rgxf1Und7Q0u0cSre6kjif

Check it out on the article: https://techstack.hashnode.dev/javascript-var-let-and-const

Become a patron to learn more: https://www.patreon.com/techstackmedia

Next: https://techstack.hashnode.dev/javascript-data-types

Techstack Media is in partnership with Skillshare: http://bit.ly/tsm-skillshare
Learn anything and get the required skill you need to kickstart a long-lasting career.

Website Request: bello@techstackmedia.com

Social Media:
✅ Facebook: https://facebook.com/techstackmedia
✅ Twitter: https://twitter.com/techstackmedia
✅ Instagram: https://instagram.com/techstackmedia
✅ LinkedIn: https://linkedin.com/in/techstackmedia

#javascriptdatatypes #javascipthoisting #javascriptvariable #techstackmedia #webdev #DEVCommunity #100DaysOfCode #opensource #codenewbies #womenwhocode #html #webdevelopment

#javascript #javascript var #let #const

Eldora  Bradtke

Eldora Bradtke

1589938080

JavaScript Variables: var and let and const

There are three ways to create variables in a JavaScript application: using var, using let, or using const. This will not be a post trying to convince you which one you should use, or arguing about what is best. It’s just good to know about the differences and what it means when you use the different options. But hopefully by the end of all this you’ll be comfortable with the three options and can make a decision for your team that will suit your needs. To get the most out of this post, it is best if you understand variable scope, which we covered in this post previously.

#javascript #var #let #const