Chapter 1 development environment of JavaScript everywhere

Front end Mao Xiaoyou 2020-11-08 09:41:47
chapter development environment javascript



The first 1 Chapter Our development environment

The first 2 Chapter API brief introduction

The first 3 Chapter have Node and Express Of Web Applications

The first 4 Chapter Our first one GraphQL API

The first 5 Chapter database

The first 6 Chapter CRUD operation

The first 7 Chapter User accounts and authentication

The first 8 Chapter The user action

The first 9 Chapter Details

The first 10 Chapter Deploy our API

The first 11 Chapter User interface and React

The first 12 Chapter Use React structure Web client

The first 13 Chapter Set application styles

The first 14 Chapter Use Apollo Client

The first 15 Chapter Web Authentication and status

The first 16 Chapter establish , Read , Update and delete operations

The first 17 Chapter Deploy Web Applications

The first 18 Chapter belt Electron The desktop application

The first 19 Chapter Put the existing Web Application and Electron Integrate

The first 20 Chapter Electron Deploy

The first 21 Chapter Use React Native Create a mobile app

The first 22 Chapter Mobile applications shell

The first 23 Chapter GraphQL and React Native

The first 24 Chapter Mobile app Authentication

The first 25 Chapter Mobile app release


appendix A. Run locally API

appendix B. Run locally Web App

For the ubiquitous JavaScript Praise

JavaScript Everywhere It's an incredible book , It will give you access to any platform JavaScript Everything you need to build an application .

The title is the fact :JavaScript Everywhere , And this book makes a unique feat , It's in this article that I've written everything for developers at all levels .

Read this book , Then write the code , And make technical decisions with confidence .

Eve Porcello,Moon Highway Software developers and lecturers

JavaScript Everywhere It's guiding the ever-changing modern JavaScript The perfect partner of the ecosystem .Adam Teach in a clear and understandable way React,React Native and GraphQL, So you can build robust Web、 Mobile and desktop applications .

Apollo GraphQL The engineering manager of Peggy Rayzis


For my father , They brought back my first computer that was hacked into , I proofread every paper I wrote . Without you , I'm not here . miss you .


1997 year , I'm in junior high school .

A friend of mine and I are busy on the Internet computer in the school library , He showed me : You can click View→ Source code to view the web page code ,

A few days later , Another friend showed me how to publish his own HTML. My thoughts were ignited .

After that , I'm crazy about .

I look around at my favorite websites , To build your own Franken Website .

Most of my free time is spent in the dining room at home, assembling computers , I even “ To write ”( ok , It's copy and paste ) My first one JavaScript, Implement hover style on links , And this is for the simple CSS It's not feasible yet .

I used to feel like a nerd , however , There was a turning point , It's like a healthy movie 《Almost Famous 》, On my own music website , I got a lot of good reviews .

therefore , I received the promotion in the email CD, And was placed on the guest list of the concert . however , To me, , what's more , I'm sharing my interests with others around the world .

I'm just a boring suburban kid , Love music , But being able to reach people I've never met . That used to be , It's still the same kind of motivation .

today , We can just use Web Technology to build powerful applications , But getting started can be daunting .

APIs It's the invisible background that provides the data .

View View →Source Source code Show links and compressed code .

Authentication and security are confusing . Putting all these things together can be overwhelming .

If we can get past these confusing details , We may notice , I used to 20 Some of the technologies used years ago , It can now be used to build powerful Web Applications 、 Native code mobile applications , Create powerful desktop applications , Design 3D Animation , Even a programming robot .

As an educator , I find that most of us learn a new thing , The best way is , Break them down , And then use them in our practical application cases . That's the goal of the book .

If you know something about HTML,CSS and JavaScript, But you're not sure how to use that content and build the powerful application you've always wanted , Then this book is for you .

I will guide you through the process of building Web Applications 、 The user interface of mobile apps and desktop apps provides power API. most important of all , You'll learn how all these parts come together , So that you can build and create beautiful things .

I can't wait to see what you've done .



After writing my first e-desktop app , I came up with the idea of writing this book .

As a web Developer , I was immediately used web The possibility of building cross platform applications with technology has fascinated .

meanwhile ,React、React Native and GraphQL They're all growing rapidly . I looked for resources to learn how these things come together , But it's not enough .

This book is a guide I would like to have myself .

The ultimate goal of this book is to introduce the use of a single programming language JavaScript The possibility of building a variety of applications .

Who is this book for

This book is suitable for people with HTML,CSS and JavaScript Experienced middle-level developers , Or aspiring beginners interested in learning the tools needed to guide the business or side projects .

The way the book is organized

This book is designed to guide you in developing sample applications for a variety of platforms .

It can be divided into the following parts :

The first 1 The chapter will guide you in setting up JavaScript development environment .

Chapter 2 - 10 Set construction has Node,Express,MongoDB, and Apollo Server Of API.

The first 11 – 25 Chapter reviews the use of React,Apollo And various tools to build cross platform user interface details . special :

The first 11 Chapter introduces user interface development and React.

The first 12 to 17 Chapter shows how to use React,Apollo Client and CSS-in-JS structure Web Applications .

The first 18 – 20 The chapter will guide you in building simple Electron Applications .

The first 21 – 25 How to use it React Native and Expo structure iOS and Android Mobile app for .

The conventions used in this book

This book uses the following printing conventions :

  • Italics

    Indicates a new term ,URL, E-mail address , File name and file extension .

  • Wide body

    For program lists , And use it in paragraphs to refer to program elements , For example, variable or function names , database , data type , environment variable , Statements and keywords .

  • bold

    Displays commands or other text that should be entered directly by the user .

  • Italics

    Display text that should be replaced by a value provided by the user or determined by the context .

TIP Suggest

This element represents a hint or suggestion .

Be careful

This element represents a general comment .


This element indicates warning or attention .

Use code examples

Supplementary materials ( Code example , Practice, etc ) It can be downloaded from :

If you have technical problems or questions when using code samples , Please email to

This book can help you with your work .

Usually , If this book provides sample code , You can use it in programs and documents . Unless you're copying most of the code , Otherwise, you don't need to contact us for permission . for example , There is no license to write programs that use a number of code snippets in this book . Sale or distribution O'Reilly The examples in the book do need permission . No permission is required to refer to this book and quote sample code to answer questions . There is a real need to incorporate a lot of sample code from this book into the product documentation .

We thank , But usually no request is required . Sources usually include titles , author , Publishers and ISBN. for example :Adam D. Scott(O'Reilly) Of “ JavaScript Everywhere ” . Copyright 2020 Adam D.Scott,978-1-492-04698-1.”

If you think the use of code examples is beyond the scope of reasonable use or if you get permission from the above , Please feel free to contact us

The first 1 Our development environment

John - Wood is UCLA The late coach of the men's basketball team , One of the most successful coaches of all time , stay 12 Within the year, I won 10 National champion .

His team is made up of top recruits , Including Hall of fame players , Rulu · Alcidol (Kewem Abdul-Jabbar) And bill · Walton (Bill Walton). The first day of practice , Wooden sat all his recruits down , They are the best players in American high school , And teach them to wear socks correctly .

When asked about this , Wooden said :“ The details determine the major development of the matter .”

Chefs use “ mise en place ” The word comes to Express “ on your marks ”, To describe how to prepare the tools and ingredients for a menu before cooking .

Because small details have been taken into account , So this kind of preparation enables kitchen chefs to prepare meals successfully during busy periods . It's like Coach Wooden 's players and cooks prepare dinner the same way , It's worth taking the time to build our development environment .

A useful development environment does not require expensive software or top-level hardware .

actually , I encourage you to start with simplicity , Use open source software , And develop your tools . Although runners prefer specific brands of sneakers , And the carpenter may have always liked her favorite hammer , But it takes time and experience to determine these preferences . Try out the tools , Look at other tools , Over time , You will create the environment that suits you best .

In this chapter , We will install a text editor ,Node.js,Git,MongoDB And some useful JavaScript package , And find our terminal application . You may already have a development environment that suits you , however , We will also install some of the necessary tools that will be used throughout the book . If you are like me , Usually skip the instruction manual , I still want you to read through this guide .

Any time you find yourself in doubt , Please contact JavaScript Everywhere Community communication , Through our forum channel

Your text editor

Text editors are like clothes . We all need them , But our preferences can be quite different . Some people like simplicity and convenience . Some people like the gorgeous Paisley model . There was no wrong decision , You should use the most comfortable way .

If you don't have a preference for , I strongly recommend Visual Studio Code (VSCode). This is an open source editor , Can be used for Mac,Windows and Linux. Besides , It provides built-in features to simplify development , And it can be easily modified through community extension . It even uses JavaScript Built !


If you're using VSCode, It has an integrated terminal . For most development tasks , This may be what you need . Personally , I found it best to use a dedicated terminal client , Because it makes it easier to manage multiple tabs and use more dedicated window space on your computer . I suggest you try both at the same time , And find the best way for you .

Using dedicated terminal applications

All operating systems come with built-in terminal applications , This is a good place to start . stay macOS On , It's aptly called the terminal . stay Windows operating system ( from Windows 7 Start ) On , The procedure is PowerShell.Linux The terminal name of the distribution may be different , But it usually includes “ Terminal”.

Use VSCode

To use VSCode Access terminal , Please click terminal → New terminal . This will give you a terminal window . The prompt will appear in the same directory as the current project .

Browse the file system

When you find the terminal , You will need to have the critical ability to change the file system directory . You can use Command to do this , The The order stands for “ Change directory ”:cd.

Command line prompt

Terminal instructions are usually Include at the beginning of the line $ or >. These are used to specify hints , Should not be copied . In this book , I'll use the dollar sign ($) Indicates that the terminal prompts . When entering a description in a terminal application , Please do not type $ .

When you open the terminal application , A cursor prompt will appear , You can type commands in it . By default , You are in the home directory of your computer . If you haven't , I suggest creating a Projects Folder , This folder is a subdirectory in your home directory . This folder can hold all your development projects . You create a Projects Directory and navigate to the folder as follows :

# first type cd, this will ensure you are in your root directory
$ cd# next, if you don't already have a Projects directory, you can create one# this will create Projects as a subfolder in your system's root directory
$ mkdir Projects# finally you can cd into the Projects directory$ cd Projects

future , You can Navigate to Projects Catalog :

$ cd # ensure you are in the root directory
$ cd Projects

Now? , Suppose you stay Projects There is a directory called jseverywhere Folder . You can from Projects Directory type To navigate to the folder . To navigate back to the directory ( In this case Projects), Please type the cd ..( The command is followed by two periods ).

All in all , It looks like :

> $ cd # ensure you are in your root directory
> $ cd Projects # navigate from root dir to Projects dir/Projects
> $ cd jseverywhere # navigate from Projects dir to jsevewehre dir/Projects/jseverwhere
> $ cd .. # navigate back from jseverwhere to Projects/Projects
> $ # Prompt is currently in the Projects dir

If this is new to you , Please take a moment to browse the files , Until you feel comfortable . I find file system problems common to novice developers . Mastering this will lay a solid foundation for you to build your workflow .

Command line tools and Homebrew( only Mac)

Some command line utilities are only available when Xcode After that macOS User available .

You can go through The terminal is installed , Without installation Xcode, You can skip this . So , Please run the following command , Then click the install prompt :xcode-select

$ xcode-select --install

Homebrew yes macOS Package manager for . It enables the installation of development dependencies ( Such as programming languages and databases ) It becomes as simple as running a command line prompt . If you use Mac, It will greatly simplify your development environment . To install Homebrew, Please go to Copy and paste the installation command , Or type the following in one line :

$ /usr/bin/ruby -e "$(curl -fsSL"

Node.js and NPM

Node.js yes “ be based on Chrome Browser's V8 JavaScript Engine built JavaScript Runtime .”

One JavaScript Actuator , Based on the Chrome Of V8 JavaScript Engine .

actually , It means Node It's a platform , Allow developers to write... Outside of the browser environment JavaScript.Node.js Attached NPM( Default package manager ).NPM Enables you to install thousands of libraries and JavaScript Tools .

management Node.js edition

If the plan manages a lot of Node project , You may find that you also need to manage multiple versions of Node. If that's the case , I suggest you use

Node Version Manager (NVM) To install Node.NVM Is to enable you to manage multiple activities Node Version of the script . about Windows user , I suggest using nvm-windows. I won't introduce Node version control , But it's a useful tool . If this is your first time using Node, It is recommended to operate your system according to the following instructions .

by macOS install Node.js and NPM

macOS Users can use Homebrew install Node.js and NPM. To install Node.js, Please type the following command in the terminal :

$ brew update
$ brew install node

Installed Node after , Open your terminal application to verify that it works properly .

$ node --version## Expected output v12.14.1, your version number may differ
$ npm --version## Expected output 6.13.7, your version number may differ

After typing these commands , If you see the version number , So congratulations , You have successfully installed for macOS Of Node and NPM!

by Windows install Node.js and NPM

about Windows, install Node.js The most direct way is to visit And download the installation program for your operating system .

First , Follow the installation steps for your operating system , visit And install LTS edition ( At the time of writing 12.14.1). Installed Node after , Open your terminal application to verify that it works properly .

$ node --version## Expected output v12.14.1, your version number may differ
$ npm --version## Expected output 6.13.7, your version number may differ

What is? LTS?

LTS representative “ Long term support ”, It means Node.js Foundation Committed to the major version number ( In this case 12.x) Provide support and security updates . After the initial release of this version , The standard support window will last three years . stay Node.js in , The even version is LTS edition . I recommend even versions for application development .

After typing these commands , If you see the version number , So congratulations , You have successfully installed Windows edition Node and NPM!


MongoDB We're developing API The database that will be used when .Mongo It's using Node.js A popular choice for , Because it treats our data as JSON(JavaScript Object notation ) file . It means JavaScript Developers can easily use .

Official MongoDB Installation document

MongoDB The documentation provides information about installing MongoDB Community Edition To update the guidelines regularly . If you have problems with the installation process , It is recommended that you refer to the following documents

Installation and operation are suitable for macOS Of MongoDB

To be installed for macOS Of MongoDB, Please use... First Homebrew Installation :

$ brew update
$ brew tap mongodb/brew
$ brew install mongodb-community@4.2

To start the MongoDB, We can use it as macOS Service running :

$ brew services start mongodb-community

This will start MongoDB service , And make it run as a background process . Please note that , Whenever you restart your computer and plan to use Mongo Development , You may need to run this command again to restart MongoDB service . To verify MongoDB Is it installed and running , Please type in the terminal and type ps -ef | grep mongod. This will list the currently running Mongo process .

Installation and operation Windows MongoDB

To install Windows edition MongoDB, Please download the installation program from the following location first :

MongoDB Download Center . After downloading the file , Please follow the setup wizard to run setup . I suggest choosing “ complete ” Installation type , Configure it to “ service ”. All other values can be left as default .

After installation , We may need to create Mongo The directory where the data will be written . In your terminal , Run the following command :

$ cd C:\
$ md "\data\db"

To verify that... Is installed MongoDB And start the Mongo service :

  1. find Windows service console .
  2. lookup MongoDB service .
  3. Right click MongoDB service .
  4. click start .

Please note that , Whenever you restart your computer and plan to use Mongo Development , You may need to restart MongoDB service .


Git Is the most popular version control software , It allows you to do things like copy code repositories , Merging code with others and creating your own code branches without affecting each other .Git Will help “ clone ” This book's sample code repository , This means that it will allow you to copy the sample code folder directly . According to your operating system , Maybe it's already installed Git. Enter the following in the terminal window :

$ git --version

If a number is returned , So congratulations - Everything is ready. ! without , Please visit install Git, Or will Homebrew be used for macOS. After completing the installation steps , Input again git --version Your terminal to verify that it works .


Expo It's a tool chain , It can be done by React Native simplify iOS and Android Project guidance and development . We will need to install Expo Command line tools , And optional ( Just recommend )( Apply to iOS or Android Of Expo application ). We'll cover this in more detail in the mobile applications section of this book , But if you're interested in getting started , Please visit Learn more about . To install command line tools , Please type the following in the terminal :

npm install -g expo-cli

Use -g The global flag will make the expo-cli Tools on your computer Node.js Global availability during installation .

To install Expo Mobile applications , Please visit on the device Apple App Store or Google Play The store .


Prettier Is a code formatting tool , Support for multiple languages , Include JavaScript,HTML,CSS,GraphQL and Markdown. It makes it easy to follow the basic formatting rules , This means that when you run Prettier On command , Your code will be automatically formatted to follow a set of standard best practices . What's better is , You can configure the editor to do this automatically every time you save a file . This means that you will never have another item with inconsistent spaces and mixed quotes .

I recommend installing... Globally on your computer Prettier And configure a plug-in for your editor . To install globally Prettier, Please go to the command line and type :

npm install -g prettier

Once installed Prettier, Please visit Find plug-ins for text editors . After the editor plug-in is installed , It is recommended that you add the following settings to the editor's settings file :

"editor.formatOnSave": true,
"prettier.requireConfig": true

as long as .prettierrc The configuration file is in the project , These settings will automatically format the file when saving . The .prettierrc The file specifies Prettier Standards to be followed . Now? , As long as the file exists , Your editor will automatically reformat your code , In order to meet the agreement of the project . Each project in this book will contain a .prettierrc file .


ESLint yes JavaScript Code for linter.linter And Prettier The difference with such a formatter is that ,linter Also check code quality rules , For example, unused variables , Infinite loops and inaccessible code dropped after return . And Prettier equally , I recommend installing for your favorite text editor ESLint plug-in unit . This will prompt you for errors in real time as you write code . You can find a list of editor plug-ins in the following location

ESLint Website And Prettier be similar , The project can be in .eslintrc The document specifies the following ESLint The rules . This gives project maintainers fine-grained control over their code preferences , And how to automatically implement coding standards . Each project in this book will contain a set of useful but permissible ESLint The rules , Designed to help you avoid common pitfalls .

Make things look good

This is optional , But when I found my settings beautiful , I found myself enjoying programming . I can't stand it , After all, I have an art degree . Take a moment to try different color themes and Fonts . As far as I'm concerned , I've started to like Dracula The theme , It's a color theme that almost all text editors and terminals can use , as well as Adobe Of Source Code Pro typeface .


In this chapter , We built a working and flexible JavaScript development environment . One of the great pleasures of programming is to personalize your environment . I hope you try to use themes 、 Color and tools to configure your environment . In the next part of the book , We will develop API The application makes the environment work .


Maomao : If there's something that's not well understood , Welcome to correct the error . If you think it's ok , Please like to collect or share , I hope it can help more people .

Written in the back

Hello everyone , I'm Maomao . I'm translating an English technical book .

English book title :《JavaScript Everywhere: Building Cross-Platform Applications with GraphQL, React, React Native, and Electron》

Chinese Translation :《 Everywhere JavaScript: Use GraphQL、React、React Native and Electron Building cross platform applications 》

author :Adam D. Scott

translator : Maomao

Publication date :2020 year 2 month 6 Japan .

Translation time :2020 year 10 month 10 Japan

Book cover :

In this respect , And very inexperienced .

The readers you see , Any ideas and suggestions can be left below . Hope to get some feedback .

Your advice is very important to me . Thank you very much .(* ̄︶ ̄).

本文为[Front end Mao Xiaoyou]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple