react 简明入门中文教程
文章平均质量分 94
去年写了一个 vue 的系列教程,收获好评无数。今年接触的项目都是 react 的,于是,再写一个系列的入门教程,方便大家可以快速的掌握 react。我的这个系列的博文,不会讲太多的概念,只要跟着敲一遍代码,自然就掌握了相关的知识。这一点,是网上同类教程所不一样的。希望大家喜欢。
FungLeo
键鼠轻游戏人间 风流谈笑傲江湖
展开
-
基于 TS 的 React 模板项目,集成 eslint sass,采用 StandardJS 代码风格,包含自动注册组件等各项功能,新建项目或 React 学习必备
react-typescript-sass-standard-template项目简介由于 Create React App 脚手架创建的项目过于简陋,没有集成诸如 eslint 等工具,致使每次在开发 react 项目的时候,就要颇费一番周折。针对这种不便,我搞了这个模板仓库。仓库地址:https://github.com/fengcms/react-typescript-sass-standard-template我的构建思想css 和 js 分离。我很不喜欢在 js 中写 css。所以,我原创 2021-05-15 15:24:25 · 793 阅读 · 0 评论 -
React 脚手架 create-react-app 新版使用说明 重点是配置代理
React 脚手架 create-react-app 新版使用说明 重点是配置代理近期更新了一下 create-react-app 工具,然后发现,和原来的老版本使用出现了略微的差异。比如原先想要处理 sass 还需要去手动配置 webpack 但是新版里面已经集成了。此外,代理的配置也完全不一样了。因此,如果是看我之前的 react 简明教程的话,是会出现一些不一样的地方的。因此,我重新来整理...原创 2018-12-07 16:14:07 · 7338 阅读 · 0 评论 -
DeepinLinux 运行 React 项目出现 Error: watch ENOSPC 的解决方案
DeepinLinux 运行 React 项目出现 Error: watch ENOSPC 的解决方案今天给新来的前端同事安装了 DeepinLinux,然后在运行 React 项目的时候出现了 Error: watch ENOSPC 的报错。我很奇怪为什么会出现这个错误,随后找到了这篇文章,原文如下:Error: watch ENOSPC 的解决方案在 Fedora 和 Ubun...转载 2018-09-10 17:52:40 · 1468 阅读 · 1 评论 -
React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念
React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念我之前写了一系列的 vue 相关的入门博文,深受大家的欢迎。现在开发了几个 reactjs 的小项目,略有心得,因此,想与大家分享。由于之前有了 vue 开发的一些经验,因此,这个系列的博文会相对比较简单。如果你是有过一些经验的开发者,可以略过这篇博文,直接阅读下一篇。如果你只是掌握了 jquery 这...原创 2018-06-28 11:56:05 · 3496 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(二)创建项目
React + webpack 开发单页面应用简明中文文档教程(二)创建项目在上一篇博文当中,你是否感觉我实在是太啰嗦了一点,说了很多你不喜欢听的东西呢。不重要啦,这里,我们开始。使用 mac 或者 Linux 系统的朋友直接进行,使用 windows 的朋友,先自行解决终端的问题。 上一篇博文让你安装 nodejs ,不会没安装吧?没安装赶紧去安装。安装脚手架打...原创 2018-06-28 11:57:54 · 1954 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件
React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件在上一篇博文中,我们已经运行起来了我们的项目。但是,这只是一个初始项目而已,基本上属于不可用的状态,因此,我们要继续工作,展开我们的开发工作。这篇博文,我们来调整项目构架,以及配置文件,让项目可以更好的开发。自定义配置模式在默认情况下,项目的各种配置都是默认的,且不可修改,因此,我们...原创 2018-06-28 11:59:06 · 2320 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置
React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置在上一篇博文中,我们很好的认识了项目的各个文件的所用,并且进行了一些调整。经过这些调整之后,我们的项目已经很成功的跑不起来了。嗯,我们要接着干,才能让我们的项目跑起来。编辑调整项目 src 文件配置 index.js 文件原文内容如下:import React from ...原创 2018-06-28 12:00:42 · 2122 阅读 · 8 评论 -
React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件
React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件我们的项目大多数情况下,是需要和服务端进行交互的。因此,我们需要一个接口请求文件,这里,我们的接口调用,按照老习惯,还是请求 cnodejs.org 提供的公用接口。接口文档查看,请点击 https://cnodejs.org/api配置代理react 的代理配置相比 vue 的配置,要简...原创 2018-06-28 12:02:29 · 2030 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件
React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件在上一章中,我们顺利的配置了代理,并且请求到了 cnodejs.org 的公开 api 数据。这篇文章中,我们将把我们请求到的数据,渲染出来。通过这个页面的编写,我们需要对 react 的 jsx 文件,有一个简单的认识。编辑 page/site/index.jsx 文件,渲染列表...原创 2018-06-28 12:03:57 · 1332 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件、父组件给子组件传值
React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件、父组件给子组件传值在上一章中,我们成功调取数据,并渲染了一个列表。应该还是有成就感的吧。这一章,我们来实现父子组件之间的传值。创建 @/coms/header.jsx 组件新建这个文件,并输入以下代码:import React, { Component } from 'react...原创 2018-06-28 12:05:02 · 1590 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面
React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面在前面博文中,我们已经渲染了列表,并且用 Link 标签,来进行了跳转。但是我们并没有编写内容页面。这一篇,我们来解决这些问题。创建 page/site/details.jsx 文件我们创建 page/site/details.jsx 文件,并录入一下内容:// 我们需要在页面...原创 2018-06-28 12:06:15 · 1349 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值
React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值通过前面八篇博文,我们走下来,已经完成了一个小项目的基本开发。从这个章节开始,我们开始做一些更加高级的事情。前面我们讲过父组件给子组件传值,非常的简单。但是,子组件如何给父组件传值呢?我们需要明白一个概念,就是 react 组件之间的关系,如下图所示:由上及下特别简单,但是由下到上,就会比较困难。...原创 2018-06-28 12:07:35 · 1132 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片
React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片react 是一个非常自由的框架,如果没有强制的规范,每一个人都会发展出不同的编写风格。我遇到过很多 react 开发的项目,他们都把图片就进存放,简单说,就是存放在 src 目录下的某个地方,然后使用 ./xxx.jpg 这样的方式引入。这种写法对于我这种具有代码强迫症的人来说,简直是...原创 2018-06-28 12:08:28 · 2112 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行
React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行好,前面我们经过一系列的开发,已经掌握了一些内容了。这篇博文,我们要学习,如何将项目打包。将项目打包到根目录运行如果我们需要将项目打包到根目录运行,这个就非常非常简单了。我们只需要运行npm run build命令,然后,等待编译,过会儿就编译好,并将我们的文件寸在了 build...原创 2018-06-28 12:09:27 · 2301 阅读 · 2 评论