免费软件下载网站哪个好,建店前期网站开通怎么做分录,网页素材提取,国外有哪几家做充电桩网站React现在我们有了一个属于文章的API#xff0c;可以添加、修改、删除、查看文章#xff0c;但是对于我们的网站来说#xff0c;还需要一个用户界面才行。现在开始探索一下ReactJS吧。经常听到有前端三大框架Angular、React、Vue的说法#xff0c;不过React官网对自己的介绍…React现在我们有了一个属于文章的API可以添加、修改、删除、查看文章但是对于我们的网站来说还需要一个用户界面才行。现在开始探索一下ReactJS吧。经常听到有前端三大框架Angular、React、Vue的说法不过React官网对自己的介绍却是这样的A JavaScript library for building user interfaces一个用来构建用户界面的JavaScript库。首先我们需要配置一下环境以便使用React。首先我们要安装一个Node.js目前我们还不用深入了解Node只需要知道它能帮助你在非浏览器环境下运行JS代码就行了。官网为node.org直接下载安装就行Linux用户推荐用各自的包管理器安装。Node自带包管理器npm有点类似Python的pip不过这里我们使用yarn这个包管理器。按照官网说明安装完之后打开终端并进入我们的项目目录react_drf为接下来的工作做准备。从零开始构建一个React项目涉及到的东西是比较多的这时候就有一些方便的脚手架可以选择脚手架可以帮我们省掉很多麻烦的配置。在这里先选用Facebook官方提供的create-react-app。$ yarn create react-app frontend使用上述命令后你将会看到react_drf目录下多了个frontend文件夹$ cd frontend
$ yarn start这下你会看到浏览器跳转到localhost:3000并且应该看到一个转动的React logo的页面这说明你安装成功了接下来浏览一下frontend这个目录下的文件但还不要做任何改动。index.js现在让我们一起来看一下frontend/src这个目录基本上目前我们只要关心这个目录下的内容就可以了。首先来看一下这里的frontend/src/index.jsimport React from react;
import ReactDOM from react-dom;
import ./index.css;
import App from ./App;
import * as serviceWorker from ./serviceWorker;ReactDOM.render(React.StrictModeApp //React.StrictMode,document.getElementById(root)
);// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();可能你已经注意到了代码中的App /这一部分似乎HTML中并没有这一标签并且为什么JS文件中有这样类似HTML的东西呢可能你的心中已经布满了疑问没关系让我们先动手改一下这段代码...
React.StrictModedivhello world/div/React.StrictMode,
...我想上述写法应该能让你看出应该在哪里修改代码。现在打开浏览器看看localhost:3000这个页面应该能看到页面发生了改变并显示了hello world。如果你之前不小心关闭了终端请记得重新打开并在frontend目录下运行yarn start。这里我不打算详细介绍React的基础知识了目前我还没有见过比React官方文档更好的学习资料哪怕你觉得自己的英语很差劲官方的中文文档也值得一看这里我仅仅粗略介绍一下接下来要接触的知识点。JSX不够恰当但简单理解的话可以认为在React中可以把HTML、CSS、JavaScript混合在一起一个原本在HTML中的元素可以被赋值给变量如const element h1Hello, world!/h1;JSX里面也可以插入JS如const name Josh Perez;
// 使用JS变量
const element h1Hello, {name}/h1;组件可以简单理解为React认为UI应该是组件化的就像搭积木一样由一个一个组件搭起来这样将一个大页面的工作拆分为很多个小组件便于复用也方便多人协作开发。之前看到的App /就是一个组件。生命周期函数有一个有趣的比喻把组件比作一只蚂蚁它的一生就是从一根绳子的一端爬向另一端这个绳子上挂了很多卡片那么它从头爬到尾就会在过程中触碰到不同的卡片这些卡片就是生命周期函数。第一个组件在frontend/src目录下创建新文件ArticleList.js正如名字所示这是一个文章列表的组件。import React, {Component} from react;class ArticleList extends Component {constructor(props) {super(props);}}现在我们定义了一个类组件它继承自React的Component类这里我们写了它的第一个生命周期函数也就是constructor如果你熟悉过任何一门面向对象的语言这里应该不难理解。constructor并不是React独有的而是JavaScript原生的写法不过对于类组件来说它当然也可以算生命周期的一部分。现在来看第二个生命周期函数renderclass ArticleList extends Component {constructor(props) {......}render() {return div第一个组件/div;}}render函数是类组件中唯一一个必须被实现的函数组件将根据这个函数的返回值渲染内容。这里的div第一个组件/div就是JSX如果有多行嵌套可以用括号括起来return (div classNameArticleListdiv文章一/divdiv文章二/div/div);那怎么让这个组件被渲染呢聪明的你可能已经把App.js的代码看了一遍我们在ArticleList.js的最后面添加一行代码export default ArticleList;同时修改index.jsimport React from react;
......
// 原先引入App的那行可以删掉
import ArticleList from ./ArticleListReactDOM.render(React.StrictModeArticleList //React.StrictMode,document.getElementById(root)
);......现在运行yarn start你将在看到浏览器启动并显示你在render函数中返回的内容。当然事实上如果你之前没有停止终端的运行那么就不必要重新运行yarn start代码做了更改会自动重新渲染以后不再提醒如何查看我们的成果了。接下来开始实现文章列表界面但是先不急着从API获取文章数据先让我们模拟一下文章数据const articleList [{id: 2,title: React,body: React is good,created: 2020-03-21T21:19:31.732703,updated: 2020-03-21T21:19:31.732728},{id: 1,title: React,body: React is good,created: 2020-03-21T21:10:53.922033,updated: 2020-03-21T21:10:53.922128}
];class ArticleList extends Component {constructor(props) {super(props);this.state {articleList: articleList,}}......
}注意到这里添加了一个articleList列表在构造函数里多了一个this.state并为其设置了articleList属性。现在来修改render函数render() {return (div classNameArticleList{this.state.articleList.map(item div key{item.id}h4{item.title}/h4pstrong{item.body}/strongbr/em创建时间{item.created}/emem更新时间{item.updated}/em/p/div)}/div);}现在来大致讲解一下上面的代码首先我们看到最外层的div标签它拥有一个className属性这个实际上就是HTML的class属性这么写的原因也很简单JSX允许JS和HTML混合在一起但在很多编程语言包括JS里class都是用于创建类的关键字所以给它改个名字便于区分。接着我们看到了在JSX中如何使用JavaScript我们在大括号里使用了map方法使用箭头函数让不同标签里包含了文章标题、正文等内容。注意到包含div key{item.id}这一行现在如果你已经使用了yarn start命令你将会在浏览器看到一个简陋的文章列表如果你删除这个key{item.id}在浏览器按下F12你将会在控制台看到警告信息。总之记住React要求这类列表元素必须要要有一个唯一的key标识来让React能识别哪些元素被改变了。在后台的真实数据中id这个字段是主键也就是唯一的刚好可以利用。使用API好了我们已经使用虚假的数据尝试了一把之前说过前后端分离开发的一个好处是前端与后端约定好接口后可以各自分开并行开发那么实质上就会有一些工具来帮助生成“假的API”或者虚假的前端请求之类来帮助测试有兴趣的可以去搜索搜索。当然这里我们是为了学习开发只有自己一个人而已那现在让我们来试试使用真实的API吧。同源策略在正式开始之前我们还要先了解一下浏览器的同源策略。想象一下如果你在a.com登录浏览了一段时间再跑去b.com逛逛结果b.com直接取到了你在a.com的cookie用于在a.com登录你的账号那实在是太可怕了尤其是当a.com是银行或购物网站的时候。基于此浏览器使用同源策略来做一个基本的安全保障。简单来说就是域名、端口、协议只要有一个不一样就会受到访问限制 Cookie、LocalStorage 和 IndexDB 无法读取。 DOM 无法获得。 AJAX 请求不能发送。我们可以简单尝试一下修改ArticleList.jsconstructor(props) {......}componentDidMount() {fetch(http://127.0.0.1:8000/articles/).then(response response.json()).then(result this.setState({articleList: result})).catch(e e);}......这里我们又见到了一个新的生命周期函数componentDidMount将在render之后执行。这里调用了原生的fetch函数直接简单粗暴的请求API在浏览器中按下F12你会看到如下报错虽然域名IP、协议都相同但是端口号却不同Django后台在8000React却在3000所以发生了错误。这里给出一个在开发时可以用的方案帮助我们解决这个问题当然在实际部署时不能这么做部署时的具体情况以后再讲这里我们先找到frontend/package.json这个文件在其中添加一行{.......,proxy: http://127.0.0.1:8000
}省略号代表之前的内容如果你插入在文件最后面可别忘了给前面加一个逗号。接着对源代码做一处修改componentDidMount() {fetch(/articles/)......}这样开发服务器就能识别你的请求将其代理到http://127.0.0.1:8000也就是Django服务所在的地址了现在重新运行yarn start可以在浏览器看到你在后端添加的数据啦。结语这次就讲到这里了下一章要讲讲将这次的代码在细节上优化一下。这一章有很多React的基础知识并没有讲解如果读者对React目前还没有一点了解那么建议现在去React官网看一下至少把基础教程看完。欢迎关注我的公众号“公子政的宅日常”原创技术文章第一时间推送。D
