MERN Full Stack
关注
分享
扫一扫
Tech In Pieces
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Node.js/Express.js:代码简介
我们知道 这个node.js和express.js的作用在于：接受前端请求 然后对我们的数据库的数据进行真够删改查的请求。所以我们重点看请求如何被接受 以及如何被处理 以及如何向数据库请求并且接受数据库的返回的。因为基本上所哟的请求 包括Loginsingup都是要经过这一层的我们来看一下代码的大体架构：app.js四个文件夹：controllersmodelsroutesutil首先看controllers文件夹：有places-controllers.js和users-contro原创 2021-07-25 04:27:54 · 268 阅读 · 0 评论 -
React.js如何构建route文件
要注意 React.js中的route可以在任何一个js文件中存在 不仅仅只是一个文件例子：in App.jsimport React from 'react';import { BrowserRouter as Router, Route, //router下面的route Redirect, //route下面的redirect Switch} from 'react-router-dom';import Users from './user/pages/Users';im原创 2021-07-24 04:48:40 · 385 阅读 · 0 评论 -
React Router组件
三种类型组件 路由组件 路由匹配组件 导航组件。在使用这些组件前，需要importimport { BrowserRouter, Route, Link } from "react-router-dom";当然 在import前 请手动安装第三方库react-route-dom v5npm install react-router-dom@5下面分别来看：路由组件对于Web项目来说，react-router-dom提供了< BrowserRouter >和< Hash原创 2021-07-23 04:51:10 · 612 阅读 · 5 评论 -
React中的五种组件形式
无状态组件(Stateless Component):最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。一般来说，各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性（props）加上一个渲染函数（render）。由于不涉及到状态的更新，所以这种组件的复用性也最强。const PureComponent = (props) => ( <div> //use props </div>)//如果原创 2021-07-23 04:49:43 · 3536 阅读 · 0 评论 -
React.js如何处理list和item部件(父部件和子部件)的关系
我们由UserList和UserItem两个部件UserItem是一个小的子部件 但是有很多重复 合起来就是UserList父部件。所以我们应该先写UserItem这个小部件。import React from 'react';import './UserItem.css';const UserItem = props => { return ( <li className="user-item"> <div className="user-it原创 2021-07-23 04:48:51 · 470 阅读 · 0 评论 -
React.JS灵魂五问
React.js是用来接受用户输入 渲染绘制或者更新UI的props是什么意思？就是从父部件传到子部件的数据什么是部件？就是UI块什么是state?就是当我们修改部件内容的时候 这个部件会被重渲染什么是hooks?它是一类特殊的函数 能让你在functional控件、部件中添加各种各样的函数...原创 2021-07-23 04:47:45 · 180 阅读 · 0 评论 -
MERN Fullstack 架构
section3: planning the appsection5: react.js build the frontendsection7 node.js&express.js build REST APIsection9 MongoDB&mongoose: connect backend to database.section10: connect react.js frontend to backendsection11: add function 1: file uplo原创 2021-07-23 04:46:24 · 324 阅读 · 0 评论 -
React is all about Component? then what is Elements and Instances?
现在我们写React应用，相当部分都是在写JSX。JSX本身是对JavaScript语法的一个扩展，看起来像是某种模板语言，但其实不是。但正因为形似HTML，描述UI就更直观了，也极大地方便了开发；你想如果我们没有HTML，必须手写一堆的document.createElement()，我想前端们肯定已经崩溃了。不过如果你一直写JSX，并且从来没脱离过JSX，可能某种程度上会阻碍我们理解React。当我们有一个JSX片段，它实际上是调用React API构建了一个Elements Tree：`var原创 2020-12-23 10:24:55 · 95 阅读 · 0 评论 -
React简单介绍与基础语法
React 是一个用于构建用户界面的 JAVASCRIPT 库。属于MVC模式中的V部分（view）其具有性能高 代码逻辑简单等特点。三个至关重要的库： react.min.js 、react-dom.min.js 和 babel.min.js元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。比如：const element = Hello, world!;假设在html文件中我们有个div 此时 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DO原创 2020-12-14 00:35:44 · 170 阅读 · 0 评论 -
Frontend开发和UI有什么区别？
UI设计师/前端工程师 看着两个名词就知道他们之间有什么区别。UI设计重点在于设计用户界面，即对软件的人机交互，操作逻辑，界面美观整体设计，分类可以分为网页界面 平板电脑 车载导航等几个具体的方向。前端工程师负责配合UI设计师将设计实现为代码。前端开发中用到的技术喝多 比如说HTML CSS JS Ajax, VUE技术栈 React技术栈等等。...原创 2020-11-16 01:36:04 · 445 阅读 · 0 评论 -
什么是React DOM?
使用react开发网页的话，我们难免会下载两个包，一个是react，一个是react-dom，其中react是react的核心代码。react-dom 包提供了 DOM 特定的方法，可以在你的应用程序的顶层使用，如果你需要的话，也可以作为 React模型 之外的特殊操作DOM的接口。 但大多数组件应该不需要使用这个模块。但是这个中文解释就跟没解释一样，下面参考geeksforgeekswe all know that reactJS is a library to build active user i原创 2020-10-16 10:28:47 · 3916 阅读 · 0 评论 -
什么是JSX
是由React团队开发的 是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。虽然你可以完全不使用JSX语法，只使用JS语法，但还是推荐使用JSX，可以定义包含属性的树状结构的语法，类似HTML标签那样的使用，而且更便于代码的阅读。一个简单的例子： <!DOCTYPE html原创 2020-10-16 09:40:12 · 970 阅读 · 0 评论 -
What is React.js exactly?
It’s a javascript library for building user interfaces注意：他只是规定了在什么时间出现什么界面，而不是说这个界面里面的数据是怎么拿到的。原创 2020-10-15 11:12:52 · 95 阅读 · 0 评论 -
对SIMPLE-MERN-PROJECT的框架解析
分为两个部分 backend and front endbackend部分代码主要就一个server.js 里面包含了各种请求头和请求关键词：get post usefrontend主要由三个模块组成： node modules, public, srcnode modules 里面充满了各种根文件public里面只存了icon图片，index.html,还有一些奇怪的json文件src里面包含一个文件夹components,其里面是四个小组件（或者叫类组件）：Button, Header, In原创 2020-10-15 11:06:55 · 211 阅读 · 1 评论 -
React和Express/Node.js如何通信
Node/Express sends requests to the React.js backend原创 2020-10-15 10:00:04 · 300 阅读 · 0 评论 -
Difference between GraphQL and REST API
reference: https://www.jianshu.com/p/2ad286397f7aSimilarity:the are both based on Http to do request and receive data.从获取资源的方式上来比较：相同点：都有资源这个概念，而且都能通过ID去获取资源。相同点：都可以通过HTTP GET方式来获取资源相同点：都可以使用JSON作为响应格式差异点：在REST中，你所访问的路径就是该资源的唯一标识（ID）；在GraphQL中，该标识与访原创 2020-10-15 09:33:41 · 222 阅读 · 0 评论