React学习—初出茅庐

  对与React的学习思路,首先React中用到了Class、let、const、以及modual(模块)的导入(import)和导出(export),而这些都是ECMAScript6标准中新增的内容,所以ECMAScript6在React学习中,是一个基础且重要的知识点。

  前端开发工程化构建思想,组件依赖、组件管理。以及前端开发MVC构建,都让前端的开发更加高效和专注。

零、ES6

 从零开始。ECMAScript6 一个里程碑,对前端的发展有着重要的作用。let const class modual import export,新的扩展,新的语法,新的思维。

在了解和学习React之前,掌握ECMAScript6的相关知识,能够让我们更深入和快速的了解React的开发思路。

  

  先推荐一本书,ES6标准入门,这本书对ES6的讲解通俗易懂,同时篇幅较少,是一个快速了解和入门的好书。

  ES6在线学习资料:http://es6.ruanyifeng.com/

一、React学习资料:

 国内React的学习资料以阮一峰的资料讲的通俗易懂,可以搜索他的相关学习资料。

1.https://hulufei.gitbooks.io/react-tutorial/introduction.html

 React路由数据流,以及组件的生命周期和组件的开发,都是学习的重点。

 React路由做为一个重点知识,相关学习资料如下:

1.http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

2.https://reacttraining.com/react-router/web/example/custom-link React路由

 重点1:我想重点强调一下这个资料,其中的示例可以帮助我们学习React Router,毕竟React Router已经经过了几个版本的更新,网上的相关学习资料比较杂乱。

 重点2:注意Link标签,pathname中,注意  `   (反单引号也称重音符,是西文字符)。这个反单引号也是我们经常写错的一个点。

<Link style={{marginLeft:}} to={{
pathname:`/config/devItem/${record.id}`
}}>配置</Link>

  

数据流以及组件生命周期的资料,网上有在线帮助文档,可以给大家提供帮助。

二、React开发工具:

1.Visual Studio Code。

2.Web Storm。

三、React开发环境:

1.nodeJs

2.npm

3.webpack

4.babel

5.create-react-app​  (npm install -g create-react-app yarn)

  • (create-react-app 是业界最优秀的 React 应用开发工具之一,本文会尝试在 create-react-app 创建的工程中使用 antd 组件,并自定义 webpack 的配置以满足各类工程化需求。)
  • yarn:Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
     例如,在项目中引入antd(蚂蚁金服)的类库就是通过yarn来实现的。

$ yarn add antd --save (要在自己的项目目录下执行该命令)

四、Ant Design

  Ant Design是蚂蚁金服提供的一套设计规范,同时也提供了一套组件库。在我们构建后台管理系统的时候,提供高效展示支持。提升开发效率。的学习和使用请参考官网。

  

提示:

  1.依赖包的管理:当你从别人的git上clone项目后,项目中node_modules文件夹下默认是没有相关依赖的,需要我们手动在项目目录下,执行 npm install 的命令,这样包管理器会自动根据package.json中所描述的相关依赖去自动下载依赖包,这样我们clone后的项目就可以正常的运行了。(这段是我特别想强调的)

  2.前端项目的编译:npm run build

  

  趁着今天刚分享玩 React 的相关知识,做一此总结,好了就写到这里,我是Jerry。

  

前端学习—React—初出茅庐的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  3. 从0开始学习react(一)

    本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...

  4. 前端基于react,后端基于.net core2.0的开发之路(1) 介绍

    文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数 ...

  5. 前端学习记录之Javascript-DOM

    简介 为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等.然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了 ...

  6. web前端学习就这9个阶段,你属于哪个阶段?

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  7. 4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务

    1.简要的介绍 学习react,首先学习的就是javascript,然后ES6,接着是jsx,通常来说如果有javascript的基础,上手非常快,但是真正要搭建一个前端工程化项目,还是有很多坑的 搞 ...

  8. 五分钟学习React(三):纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  9. 五分钟学习React(一): 什么是React

    在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...

随机推荐

  1. can't load package the specified module could not be found

    can't load package the specified module could not be found 用 Dependency Walker 2.2Dependency Walker ...

  2. 可视化库-seaborn-回归分析绘图(第五天)

    1. sns.regplot() 和 sns.lmplot() 绘制回归曲线 import numpy as np import pandas as pd from scipy import stat ...

  3. Mysql 知识(2)

    1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一 ...

  4. JAVA中request.getParameterMap()用法笔记

    一. 根据Java规范:request.getParameterMap()返回的是一个Map类型的值,该返回值记录着前端(如jsp页面)所提交请求中的请求参数和请求参数值的映射关系.这个返回值有个特别 ...

  5. freemaker基础语法

      1.freemarker中Request,Session的用法:java块:request.getSession().setAttribute("qq","http: ...

  6. Mysql Innodb 性能参数设置 https://www.rathishkumar.in/2017/01/how-to-allocate-innodb-buffer-pool-size-in-mysql.html

    参考原文: https://www.rathishkumar.in/2017/01/how-to-allocate-innodb-buffer-pool-size-in-mysql.html 查看系统 ...

  7. docker-composer

    1.安装docker-composer   参考官方 安装1.20.1 sudo curl -L https://github.com/docker/compose/releases/download ...

  8. Andriod Studio adb 安装应用

    原文链接:https://blog.csdn.net/u014608640/article/details/51833304 下面的命令安装.重新安装和卸载应用程序. 安装:adb -s HT9BYL ...

  9. WebDriverException:Element is not clickable at point - selenium执行过程中遇到的相关报错

    Element is not clickable at point (x, y) 这段可以忽略:本文来自 https://www.cnblogs.com/lozz/p/9947430.html 引起这 ...

  10. vmware虚拟机桥接模式不能上网

    方法/步骤     首先我的主机的有线连接是正常的,如下:   但是我的虚拟机的网络连接模式为桥接模式,但是却上不了网,如下:   我们来确认下,我的虚拟机的网络模式,如下:   设置全部都是对的,但 ...