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>