精通MERN堆栈：Mongo、Express、React和Node全栈Web开发

需积分: 9 141 浏览量更新于2024-07-18 收藏 3.23MB PDF 举报

"Pro MERN Stack Full Stack Web App Development with Mongo Express React and Node" 是一本关于使用MongoDB、Express、React和Node.js构建全栈Web应用的专业书籍，作者Vasan Subramanian。本书深入探讨了MERN（MongoDB、Express、React、Node.js）堆栈，这是一个流行的JavaScript开发框架，用于构建现代、高效且可扩展的Web应用程序。MongoDB是一个基于分布式文件存储的开源文档数据库，常用于处理大量的非结构化数据。Express是Node.js的一个Web应用框架，提供了快速构建服务器端应用的工具和结构。React是Facebook开发的用于构建用户界面的JavaScript库，特别适用于构建动态和交互式的前端应用。Node.js则是一个开放源代码、跨平台的JavaScript运行环境，允许在服务器端执行JavaScript代码。在书中，作者Vasan Subramanian详细介绍了如何将这四个技术有效地整合在一起，构建完整的Web应用。内容可能包括： 1. **MongoDB**：介绍NoSQL数据库的概念，MongoDB的安装与配置，数据模型设计，查询和操作数据，以及如何使用Mongoose等库进行数据操作。 2. **Express**：讲解如何设置Express应用，路由处理，中间件系统，模板引擎的使用，以及如何创建RESTful API。 3. **React**：深入讲解React的基本组件，JSX语法，状态管理，React Router用于页面导航，以及如何实现单向数据流。 4. **Node.js**：阐述Node.js的事件驱动模型，异步编程，使用npm（Node包管理器）管理依赖，以及构建服务器端逻辑。 5. **集成开发**：指导读者如何将MongoDB、Express、React和Node.js集成在一起，建立数据流，实现前后端通信，以及调试和测试技巧。 6. **最佳实践**：分享项目管理和部署策略，代码优化，安全性和错误处理，以及持续集成和持续部署(CI/CD)。 7. **示例应用**：通过一个实际的全栈应用开发案例，让读者能够动手实践，巩固所学知识。 8. **进阶主题**：可能涵盖如GraphQL、WebSockets、JWT（JSON Web Tokens）身份验证等高级技术。通过这本书，开发者不仅能学习到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页未读，继续阅读

jpsiyu

粉丝: 9
资源: 22

精通MERN堆栈：Mongo、Express、React和Node全栈Web开发

Pro_MERN_Stack_Full_Stack_Web_App_Development

Pro MERN Stack 无水印pdf

全栈Javascript开发架构MERN.zip

project-templates-mern:使用Mongo Express React Node的FullStack JavaScript项目的项目模板

Mern-Stack-Todo-List-App：这是使用MERN（Mongo Express React Node）堆栈制作的待办事项列表应用程序

MERN-stack:Mongo、Express、React、Node

pro-mern-stack：Pro MERN Stack的代码清单

MERN-Stack:这是一个面向初学者的MERN（mongo express react节点）堆栈存储库，对于初学者来说很有趣，他们可以通过nosql数据库（Mongodb）学习nodejs和reactjs

pro-mern:使用Mongo，Express，React和Node进行全栈Web应用开发

Ecommerce-MERN-FULL-STACK-:使用Mongo DB，Express.js，Node.js和React的完整的电子商务网站

最新资源