react学习笔记三----练习项目完成

2018-08-20 admin

如果没有看前两篇的童鞋,可以看看前两篇文章的内容,虽然写的一般,但是起码也是一个重无到有的过程。

直接进主题
  • 到这里,其实我们的前端页面布局,后台nodejs服务程序已经有了,现在就是写页面和调用后台服务程序去处理数据了。

现在可以看看练习项目的功能点了,其实很简单啦: 1、显示文章列表 2、添加文章,当然就包括:格式、图片、链接啦 3、简单的登录控制(这个超级简单,只是做了一个管理员账号的登录)

说明
文章列表(只说重点部分,其他看源码吧)
1、查询数据库(废话,不查数据库难道写成静态的呀,哈哈)
2、显示列表:
2.1、marked:解析makedown格式
2.2、highlight:高亮代码
2.3、以上两个组件是重点部分,一下代码重点为怎么使用:
import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/arta.css';
--------------------------------这里放在页面渲染中-------------------------------------
marked(“这里是数据中的内容数据”);
----------------------------这里放在页面加载完成后的生命周期中-----------------
//显示代码高亮
marked.setOptions({
            highlight: code => hljs.highlightAuto(code).value,
        });
添加文章
1、react-simplemde-editor:makdown组件
import SimpleMDE from 'react-simplemde-editor';
import "simplemde/dist/simplemde.min.css";

--------------------------------这里放在页面渲染中-------------------------------------
<SimpleMDE
                  id="your-custom-id"
                  label=""
                  options={{
                      autofocus: true,
                      spellChecker: false,
                      gfm: true,
                      pedantic: false,
                      sanitize: false,
                      tables: true,
                      breaks: true,
                      smartLists: true,
                      smartypants: true,
                  }}
                  value={this.state.textValue}
                  onChange={this.handleChange}
/>
参数请查看官方文档
简单的登录控制
1、因为是练习版本,这里直接将管理账号手动添加到了mysql
2、nodejs通过查询验证对应的账号数据,将数据保存在cookie中
这里不做详细说明,不清楚请自行nodejs学习
总结
  • 虽然该项目只是作为学习react一个初级阶段的项目,并没有采用高深的组件和技术,但是感觉作为一个练习项目还是可以用的。并且很多react其他好用的组件其实只会在需要的时候才会去用到。什么时候用,在做项目 的时候其实自然就知道了。
  • 其实该3个章节不算教程,仅仅是一个学习笔记而已。
结尾语
  • react是个好东西,后期也会继续学习和了解,还有很多东西没了解清楚
  • 因为公司项目原因,其实最终项目中会使用vuejs,毕竟项目不算特别大,需要快速开发完成。
该系列的代码链接

nodejs:https://github.com/522011796/… react:https://github.com/522011796/…

demo演示地址

react: http://www.rickycloud.cn/ vuejs: https://www.rickycloud.cn/

原文链接:https://segmentfault.com/a/1190000016075016

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-38474.html

文章标题:react学习笔记三----练习项目完成

相关文章
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
优化RequireJS项目的相关技巧总结
本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将...
2017-03-27
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
javascript解析xml实现省市县三级联动的方法
本文实例讲述了javascript解析xml实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下: (该方法适用于任何常用浏览器) &lt;body&gt; &lt;div&gt; &lt;span&gt; &lt...
2017-03-27
AngularJS基础知识笔记之过滤器
过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。 4 过滤器 过滤数组中它根...
2017-03-23
整理关于Bootstrap警示框的慕课笔记
在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示: 在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框...
2017-04-01
AngularJS基础知识笔记之表格
表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 &lt;table&gt; &lt;tr&gt; &lt;th&gt;Name&lt;&#x2F;t...
2017-03-23
JavaScript的jQuery库中ready方法的学习教程
学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数。 问...
2017-03-29
回到顶部