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>

 

posted @ 2017-02-23 16:52  sfmz  阅读(548)  评论(2编辑  收藏  举报