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应用程序不处理后端逻辑或数据库; 它只是创建一个前端构建管道，所以你可以使用它与任何后端你想要的。它使用webpack，Babel和ESLint在引擎盖下，只是为你配置他们。

接下来，我们就开始准备安装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>

转载于:https://www.cnblogs.com/wshtml5/p/sfmz.html

React的深入解密一相关推荐

2.4K Star！450 个重磅前端开源项目合集推荐
大家好,我是你们的猫哥,还是那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 不知不觉,公众号:前端GitHub 和 GitHub 上的仓库 FrontEndGitHub 都已经更新并运营超过半年了呀, 前 ...
2K Star！超过 50 个专题、450 个好项目，大半年来推荐过的重磅项目合集
大家好,我是你们的猫哥,还是那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 不知不觉,公众号:前端GitHub 和 GitHub 上的仓库 FrontEndGitHub 都已经更新并运营超过半年了呀, 前 ...
React 源码剖析系列－解密 setState
this.setState() 方法应该是每一位使用 React 的同学最先熟悉的 API.然而,你真的了解 setState 么?先看看下面这个小问题,你能否正确回答. 引子 class Examp ...
React解密：React高阶组件是什么？
React中比较高大上的东西,高阶组件应该算是一个点,开发中也许写的不多,但是我们必须要直到高阶组件是什么,高阶组件能干什么? A higher-order component is a functi ...
React内使用DES加密解密
要先安装js包 ------ npm i crypto-js 新建一个加密/解密文件, 引入直接使用, 注意约定的秘钥为key import CryptoJS from 'crypto-js';con ...
react实现RSA加密解密、DES加密
前端实现RSA加密解密.DES解密,主要用到的包有jsencrypt.crypto-js 一.使用场景需要在本地存储一些标志位,安全问题用户登录密码的加密二.加密代码 RSA加密安装 npm ...
React解密：React中PureComponent和Component的区别是什么
提到PureComponent,应该并不是react与生俱来就有的,而应该是在15.3版本之后才出现的,主要是为了取代之前的PureRenderMixin.所以对于几年不怎么接触react的我来说,当 ...
react native学习与实践（3）使用加密解密库CryptoJS的sha256
CryptoJS的安装使用yarn 安装CryptoJS组件 yarn add crypto-js CryptoJS的使用示例,使用SHA-256 import sha256 from 'cryp ...
前端每周清单第 49 期：Webpack 4 Beta 尝鲜，React Windowing 与 setState 分析
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...

React的深入解密一

React的深入解密一相关推荐

最新文章

热门文章