精通MERN堆栈全栈Web应用开发

5星 · 超过95%的资源需积分: 9 12 浏览量更新于2024-07-20 收藏 3.23MB PDF 举报

"Pro MERN Stack 全栈Web应用开发" MERN栈是现代Web开发中的一个流行框架，它由四个主要技术组件组成：MongoDB、Express、React和Node.js。这个全栈解决方案允许开发者构建功能丰富的、动态的、数据驱动的Web应用程序。以下是这些组件的详细介绍： 1. MongoDB：作为MERN栈中的数据库层，MongoDB是一个基于分布式文件存储的开源NoSQL数据库系统。它使用JSON格式的文档存储数据，支持灵活的数据模型，适合处理大量结构化和半结构化的数据。MongoDB提供高可用性、高性能和易于扩展的特性，使开发者可以快速迭代应用程序。 2. Express：Express是Node.js平台上的一个轻量级Web应用框架，用于构建API和Web服务器。它简化了HTTP服务器的创建，提供了路由、中间件和各种实用工具，使得开发过程更加高效。Express的简洁和模块化设计使其成为构建可维护的大型应用的理想选择。 3. React：React是Facebook开发的JavaScript库，主要用于构建用户界面，尤其是单页应用程序（SPA）。它采用组件化的方式组织代码，通过虚拟DOM提高性能，以及强大的生命周期方法和状态管理。React的声明式编程风格使得代码更容易理解和调试，同时社区还提供了丰富的第三方库来增强其功能。 4. Node.js：Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让开发者可以在服务器端使用JavaScript进行开发。Node.js以其事件驱动、非阻塞I/O模型而著称，提供了高度可扩展的网络应用。Node.js的生态系统中有大量的模块和库，可以方便地完成各种任务，如文件系统操作、网络通信等。在《Pro MERN Stack Full Stack Web App Development》一书中，Vasan Subramanian详细介绍了如何利用这些技术构建完整的Web应用。读者将学习到如何设置开发环境，配置数据库连接，构建RESTful API，设计和实现React组件，以及如何优化和部署应用。书中的实例和最佳实践将帮助开发者深入理解MERN栈，并具备实际项目开发的能力。这本书不仅适合初学者，也适合有一定经验的开发者，无论你是想从传统的Web开发转向全栈开发，还是希望提升现有技能，都能从中受益。通过阅读此书，你将能够掌握MERN栈的核心概念，从而构建出高效、可扩展的Web应用程序。

V. Subramanian, Pro MERN Stack, DOI 10.1007/978-1-4842-2653-7_1

CHAPTER 1

Introduction

Web application development is not what it used to be even a couple of years back.

Today, there are so many options, and the uninitiated are often confused about what’s

good for them. This applies not just to the broad stack (the various tiers or technologies

used), but also to the tools that aid in development; there are so many choices. This book

stakes a claim that the MERN stack is great for developing a complete web application,

and it takes the reader through all that is necessary to get it done.

In this chapter, I’ll give a broad overview of the technologies that make up the MERN

stack. I won’t go into details or examples in this chapter; I’ll just introduce the high-level

concepts. This chapter will focus on how these concepts affect an evaluation of whether

MERN is a good choice for your next web application project.

What Is MERN?

Any web application is made by using multiple technologies. The combination of these

technologies is called a “stack,” popularized by the LAMP stack, which is an acronym

for Linux, Apache, MySQL, and PHP, which are all open-source components. As web

development matured and interactivity came to the fore, single page applications (SPAs)

became more popular. An SPA is a web application paradigm that avoids refreshing a web

page to display new content; it instead uses lightweight calls to the server to get some data

or snippets and updates the web page. The result looks quite nifty when compared to the

old way of reloading the page entirely. This brought about a rise in front-end frameworks,

since much of the work was done on the client side. At approximately the same time,

although completely unrelated, NoSQL databases also started gaining popularity.

The MEAN (MongoDB, Express, AngularJS, Node.js) stack was one of the early

open-source stacks that epitomized this shift towards SPAs and the adoption of NoSQL.

AngularJS, a front-end framework based on the model-view-controller (MVC) design

pattern, anchored this stack. MongoDB, a very popular NoSQL database, was used for

persistent data storage. Node.js, a server-side JavaScript runtime environment, and

Express, a web server built on Node.js, formed the middle tier, or the web server. This

stack is arguably the most popular stack for any new web application these days.

Chapter 1 ■ IntroduCtIon

Not exactly competing, but React, an alternate front-end technology from Facebook,

has been gaining popularity and offers a replacement to AngularJS. It thus replaces the

“A” with an “R” in MEAN, to give us the MERN Stack. I said “not exactly” since React is not

a full-fledged MVC framework. It is a JavaScript library for building user interfaces, so in

some sense it’s the View part of the MVC.

Although we pick a few defining technologies to define a stack, these are not enough

to build a complete web application. Other tools are required to help the process of

development, and other libraries are needed to complement React. This book is about all

of them: how to build a complete web application based on the MERN stack, using other

complementary tools that make it easy for us to do it.

Who Should Read This Book

Developers and architects who have prior experience in any web app stack other than

the MERN stack will find this book useful for learning about this modern stack. Prior

knowledge of how web applications work is required. Knowledge of JavaScript is also

required. It is further assumed that the reader knows the basics of HTML and CSS. It will

greatly help if you are also familiar with the version control tool git; you can try out the

code just by cloning the git repository that holds all the source code described in this

book, and running each step by just checking out a branch.

If you have decided that your new app will use the MERN stack, then this book will

help you quickly get off the ground. Even if you have not made any decision, reading the

book will get you excited about MERN and equip you with enough knowledge to make

that decision for a future project. The most important thing you will learn is how to put

together multiple technologies and build a complete, functional web application; by the

book’s end, you’ll be a full-stack developer or architect on MERN.

Structure of the Book

Although the focus of the book is to teach you how to build a complete web application,

most of the book revolves around React. That’s just because, as is true of most modern

web applications, the front-end code forms the bulk. And in this case, React is used for

the front end.

The tone of the book is tutorial-like. What this means is that unless you try out

the code and solve the exercises yourself, you will not get the full benefit of reading the

book. There are plenty of code listings in the book (this code is also available online in

a GitHub repository, at https://github.com/vasansr/pro-mern-stack). I encourage

you not to copy/paste; instead, please type out the code yourself. I find this very valuable

in the learning process. There are very small nuances, such as the types of quotes,

which can cause a big difference. When you actually type out the code, you are much

more conscious of these things than when you are just reading it. Clone the repository

only when you are stuck and want to compare it with my code, which has been tested

and confirmed to work. And if you do copy/paste small sections, don’t do it from the

electronic version of the book, as the typography of the book may not be a faithful

reproduction of the actual code.

Chapter 1 ■ IntroduCtIon

I have also added a checkpoint (a git branch, in fact) after every change that can be

tested in isolation, so that you can look at the exact diffs between two checkpoints, online. The

checkpoints and links to the diffs are listed in the home page (the README) of the repository.

You may find this more useful than looking at the entire source, or even the listings in the text

of this book, as GitHub diffs are far more expressive than what I can do in this book.

Rather than cover one topic or technology per section, I have adopted a more

practical and problem-solving approach. You will have developed a full-fledged working

application by the end of the book, but you’ll start small with a Hello World example.

Just as in a real project, you will add more features to the application as you progress.

When you do this, you’ll encounter tasks that need additional concepts or knowledge to

proceed. For each of these tasks, I will introduce the concept or technology that can be

used, and I’ll discuss it in detail. Thus, you may not find one chapter or section devoted

purely to one topic or technology; instead, each chapter will be a set of goals you want to

achieve in the application. You will be switching between technologies and tools as you

progress.

I have included exercises wherever possible to make you either think or look up

various documentation pages on the Internet. This is so that you know where to get

additional information for things that are not covered in the book, such as very advanced

topics or APIs.

I have chosen an issue tracking application as the application that you’ll build.

It’s something most developers can relate to, and it has many of the attributes and

requirements that any enterprise application will have, commonly referred to as a

“CRUD” application (CRUD stands for Create, Read, Update, Delete of a database record).

Conventions

Many of the conventions used in the book are quite obvious, so I won’t explain all of

them. However, I will cover some conventions with respect to how the code is shown if

they’re not obvious.

Each chapter has multiple sections, and each section is devoted to one set of code

changes that results in a working application and can be tested. One section can have

multiple listings, each of which may not be testable by itself. Every section will also have a

corresponding entry in the GitHub repository, where you can see the complete source of

the application at the end of that section, as well as the differences between the previous

section and the current section. You will find the difference view very useful to identify

the changes made in the section.

All code changes will appear in the listings within the section, but do not rely on

their accuracy. The reliable and working code can be found in the GitHub repository,

which may even have undergone last minute changes that couldn’t make it to the book in

time. All listings will have a listing caption, which will include the name of the file being

changed or created.

A listing is a full listing if it contains a file, a class, a function, or an object in its

entirety. A full listing may also contain two or more classes, functions, or objects, but not

multiple files. In such a case, if the entities are not consecutive, I’ll use ellipses to indicate

chunks of unchanged code.

Listing 1-1 is an example of a full listing, the contents of an entire file.

Chapter 1 ■ IntroduCtIon

What You Need

You will need a computer where you can run your server and do other tasks such as

compilation. You also need a browser to test your application. I recommend a Linux-

based computer running Ubuntu or a Mac as your development server, but with minor

changes, you could also use a Windows PC.

If you have a Windows PC, an option is to run an Ubuntu server virtual machine

using Vagrant (www.vagrantup.com/). This is helpful because you will eventually need to

deploy your code on a Linux-based server, and it is best to get used to that environment

from the beginning. But you may find it difficult to edit files using the console. In that

case, an Ubuntu desktop variant may work better for you, but it requires more memory

for the virtual machine.

Running Node.js directly on Windows will also work, but the code samples in this

book assume a Linux-based PC or Mac. If you choose to run directly on a Windows PC,

you may have to make the appropriate changes, especially when running commands in

the shell, using a copy instead of using soft links, and in rare cases, to deal with ‘\’ vs. ‘/’ in

path separators.

Further, to keep the book concise, I have not included installation instructions for

packages, and they are different for different operating systems. You will need to follow the

installation instructions from the package providers’ websites. And in many cases I have not

included direct links to websites even though I ask you to look them up. This is for a couple

of reasons. The first is to let you learn by yourself how to search for them. The second is that

the link I may provide may have moved to another location due to the fast-paced changes

that the MERN stack was experiencing at the time of writing this book.

MERN Components

I’ll give a quick introduction to the main components that form the MERN stack and a few

other libraries and tools that you’ll be using to build your web application. I’ll just touch

upon the salient features, and leave the details to other chapters where they are more

appropriate.

React

React anchors the MERN stack. In some sense, it is the defining component of the MERN

stack.

React is an open-source JavaScript library maintained by Facebook that can be used

for creating views rendered in HTML. Unlike AngularJS, React is not a framework. It is a

library. Thus, it does not, by itself, dictate a framework pattern such as the MVC pattern.

You use React to render a view (the V in MVC), but how to tie the rest of the application

together is completely up to you.

I’ll discuss a few things about React that make it stand out.

剩余334页未读，继续阅读

Mnbv1x

粉丝: 10
资源: 24

精通MERN堆栈全栈Web应用开发

Pro_MERN_Stack_Full_Stack_Web_App_Development

教你成为全栈工程师(Full Stack Developer)

Pro MERN Stack 无水印pdf

javascript全栈教程推荐

db.n2b.aggregate([$group:{_id:null,merN1:{$mergeObjects:”$n1”}}}]

reg [7:0] mem [1:256]; initial $readmemh("mem.data", mern, 128. 1): 对于mem行为正确的描述是

github电商项目

当前最新的后端技术栈有哪些？

用vscode写前端idea写后端我不想这样用该怎么合到一起

fatal: not a git repository(or any the parent directories): .git

最新资源