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
Read this book , Then write the code , And make technical decisions with confidence .
Eve Porcello,Moon Highway Software developers and lecturers
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 .
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 .
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 .
Who is this book for
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 ：
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 ：
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 .
Displays commands or other text that should be entered directly by the user .
Display text that should be replaced by a value provided by the user or determined by the context .
This element represents a hint or suggestion .
This element represents a general comment .
This element indicates warning or attention .
Use code examples
If you have technical problems or questions when using code samples , Please email to [email protected].
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 .
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 [email protected].
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 .
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'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”.
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
>. 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 brew.sh Copy and paste the installation command , Or type the following in one line ：
$ /usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
Node.js and NPM
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 nodejs.org And download the installation program for your operating system .
First , Follow the installation steps for your operating system , visit nodejs.org 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！
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 [email protected]
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 ：
- find Windows service console .
- lookup MongoDB service .
- Right click MongoDB service .
- 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 git-scm.com 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 expo.io 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 .
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 Prettier.io 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 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 .
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 .
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 .(*￣︶￣).