FungLeo's Blog

react-typescript-sass-standard-template项目简介由于 Create React App 脚手架创建的项目过于简陋，没有集成诸如 eslint 等工具，致使每次在开发 react 项目的时候，就要颇费一番周折。针对这种不便，我搞了这个模板仓库。仓库地址：https://github.com/fengcms/react-typescript-sass-standard-template我的构建思想css 和 js 分离。我很不喜欢在 js 中写 css。所以，我

React 脚手架 create-react-app 新版使用说明 重点是配置代理近期更新了一下 create-react-app 工具，然后发现，和原来的老版本使用出现了略微的差异。比如原先想要处理 sass 还需要去手动配置 webpack 但是新版里面已经集成了。此外，代理的配置也完全不一样了。因此，如果是看我之前的 react 简明教程的话，是会出现一些不一样的地方的。因此，我重新来整理...

DeepinLinux 运行 React 项目出现 Error: watch ENOSPC　的解决方案今天给新来的前端同事安装了 DeepinLinux，然后在运行 React 项目的时候出现了 Error: watch ENOSPC 的报错。我很奇怪为什么会出现这个错误，随后找到了这篇文章，原文如下：Error: watch ENOSPC　的解决方案在 Fedora 和 Ubun...

React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念我之前写了一系列的 vue 相关的入门博文，深受大家的欢迎。现在开发了几个 reactjs 的小项目，略有心得，因此，想与大家分享。由于之前有了 vue 开发的一些经验，因此，这个系列的博文会相对比较简单。如果你是有过一些经验的开发者，可以略过这篇博文，直接阅读下一篇。如果你只是掌握了 jquery 这...

React + webpack 开发单页面应用简明中文文档教程（二）创建项目在上一篇博文当中，你是否感觉我实在是太啰嗦了一点，说了很多你不喜欢听的东西呢。不重要啦，这里，我们开始。使用 mac 或者 Linux 系统的朋友直接进行，使用 windows 的朋友，先自行解决终端的问题。 上一篇博文让你安装 nodejs ，不会没安装吧？没安装赶紧去安装。安装脚手架打...

React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件在上一篇博文中，我们已经运行起来了我们的项目。但是，这只是一个初始项目而已，基本上属于不可用的状态，因此，我们要继续工作，展开我们的开发工作。这篇博文，我们来调整项目构架，以及配置文件，让项目可以更好的开发。自定义配置模式在默认情况下，项目的各种配置都是默认的，且不可修改，因此，我们...

React + webpack 开发单页面应用简明中文文档教程（四）调整项目文件以及项目配置在上一篇博文中，我们很好的认识了项目的各个文件的所用，并且进行了一些调整。经过这些调整之后，我们的项目已经很成功的跑不起来了。嗯，我们要接着干，才能让我们的项目跑起来。编辑调整项目 src 文件配置 index.js 文件原文内容如下：import React from ...

React + webpack 开发单页面应用简明中文文档教程（五）配置 api 接口请求文件我们的项目大多数情况下，是需要和服务端进行交互的。因此，我们需要一个接口请求文件，这里，我们的接口调用，按照老习惯，还是请求 cnodejs.org 提供的公用接口。接口文档查看，请点击 https://cnodejs.org/api配置代理react 的代理配置相比 vue 的配置，要简...

React + webpack 开发单页面应用简明中文文档教程（六）渲染一个列表，初识 jsx 文件在上一章中，我们顺利的配置了代理，并且请求到了 cnodejs.org 的公开 api 数据。这篇文章中，我们将把我们请求到的数据，渲染出来。通过这个页面的编写，我们需要对 react 的 jsx 文件，有一个简单的认识。编辑 page/site/index.jsx 文件，渲染列表...

React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值在上一章中，我们成功调取数据，并渲染了一个列表。应该还是有成就感的吧。这一章，我们来实现父子组件之间的传值。创建 @/coms/header.jsx 组件新建这个文件，并输入以下代码：import React, { Component } from 'react...

React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面在前面博文中，我们已经渲染了列表，并且用 Link 标签，来进行了跳转。但是我们并没有编写内容页面。这一篇，我们来解决这些问题。创建 page/site/details.jsx 文件我们创建 page/site/details.jsx 文件，并录入一下内容：// 我们需要在页面...

React + webpack 开发单页面应用简明中文文档教程（九）子组件给父组件传值通过前面八篇博文，我们走下来，已经完成了一个小项目的基本开发。从这个章节开始，我们开始做一些更加高级的事情。前面我们讲过父组件给子组件传值，非常的简单。但是，子组件如何给父组件传值呢？我们需要明白一个概念，就是 react 组件之间的关系，如下图所示：由上及下特别简单，但是由下到上，就会比较困难。...

React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片react 是一个非常自由的框架，如果没有强制的规范，每一个人都会发展出不同的编写风格。我遇到过很多 react 开发的项目，他们都把图片就进存放，简单说，就是存放在 src 目录下的某个地方，然后使用 ./xxx.jpg 这样的方式引入。这种写法对于我这种具有代码强迫症的人来说，简直是...

React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行好，前面我们经过一系列的开发，已经掌握了一些内容了。这篇博文，我们要学习，如何将项目打包。将项目打包到根目录运行如果我们需要将项目打包到根目录运行，这个就非常非常简单了。我们只需要运行npm run build命令，然后，等待编译，过会儿就编译好，并将我们的文件寸在了 build...