• React的深入解密一


      React起源于Facebook 的内部项目,用来架设 Instagram 的网站,并于2013年5月开源。由于工作学习需要,我花了一些功夫学习了React,并小有收获,最近我抽空整理了下文档,在此与大家分享,望一起学习进步。

    React 是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建UI,很多人认为React是MVC中的V。根据官方api中的方法,我们可以用以下命令创建单页面应用程序:

    npm install -g create-react-app
    create-react-app project
    cd project
    npm start

    创建React应用程序不处理后端逻辑或数据库; 它只是创建一个前端构建管道,所以你可以使用它与任何后端你想要的。它使用webpackBabelESLint在引擎盖下,只是为你配置他们。

    接下来,我们就开始准备安装React了。在这里有两种包管理工具可以使用,一个是npm,另外一个是Yarn。

    要安装React with Yarn,请运行:

    yarn init
    yarn add react react-dom

    要使用npm安装React,请运行:

    npm init
    npm install --save react react-dom

    Yarn可能会更加好用一点。

      完成安装之后呢,我还建议我们使用Babel,这能够让我们在JavaScript代码中使用ES6和JSX。ES6是一组现代JavaScript特性,能够使得开发更加容易,而JSX则是对React非常有效的JavaScript语言的扩展。如果你不知道如何配置Babel,那么Babel setup instructions解释了如何在许多不同的生成环境配置Babel。再说一句我在编写代码的时候使用了webpack打包器。有兴趣的童鞋可以去看看https://webpack.js.org。接下来我们可以开始使用React了!我先举个例子:

    1 import React from 'react';
    2 import ReactDOM from 'react-dom';
    3 
    4 ReactDOM.render(
    5   <h1>Hello, world!</h1>,
    6   document.getElementById('root')
    7 );

    此代码呈现为具有id的DOM元素,root因此您需要<div id="root"></div>在HTML文件中的某个位置。同样,您可以在使用任何其他JavaScript UI库编写的现有应用程序内部的DOM元素内部渲染React组件。

      至此,正式开始了React的深入之路。之后我将会整理出常用的代码,和一些关键知识点。

      我在这里收集了几个React的CDN供大家方便使用。

    开发版:

    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

    精简,生产版本

    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  • 相关阅读:
    面向对象设计的原则里氏代换原则
    阅读源码的一些错误观念
    gdb的一个bug Internal error: 【pc 0xxxxxxx】 in read in psymtab, but not in symtab
    STL中mem_fun和mem_fun_ref的用法
    每天写出好代码的5个建议
    /dev/null /dev/zero/
    SQL Server 2008 对 TSQL 语言的增强
    JQuery 应用JQuery.groupTable.js(二)
    jquery 实现iframe 自适应高度
    JQuery 应用JQuery.groupTable.js
  • 原文地址:https://www.cnblogs.com/wshtml5/p/sfmz.html
Copyright © 2020-2023  润新知