• 前端学习—React—初出茅庐


    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:15}} 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。

     

       

  • 相关阅读:
    个人阅读作业Week7
    个人博客作业week3——案例分析
    结对项目——高级四则运算检验器记录(168 & 187)
    个人博客作业week2——代码复审
    个人项目---四则运算题目生成器项目记录
    第一次博客作业
    JAVA编程入门
    计算机基础知识点总结
    Java数据类型总结1
    JAVA编程入门
  • 原文地址:https://www.cnblogs.com/mbailing/p/React.html
Copyright © 2020-2023  润新知