React系列入门教程 初步认识React

Posted 2021-04-26 web前端开发

1、前言

React 是一个用于构建用户界面的javascript库。

• 用做UI： 许多人把React当做MVC设计模式中的视图(view)，当把React成为你的技术掌握之后， 它可以很轻松应用于一个小功能的项目。

• 虚拟DOM：React用一个”虚拟DOM”实现了超高的性能，配合nodeJS也可以实现在服务端的渲染，不存在耗时的浏览器dom渲染。

• 数据流： React是一种减少引用数据流的实现方式，并且比传统的方式更容易实现数据绑定。

例子

我们有几个例子在：https://reactjs.org/。 这是第一个例子:

var HelloMessage = React.createClass({  render:
function() {   
 return <div>Hello {this.props.name}</div>; 
  }});
 React.render(  <HelloMessage name="John" />,  document.getElementById('container'));

此示例将“Hello  John!”呈现在页面上的容器里。

你会注意到我们使用类似html的语法;我们称之为JSX。 JSX不需要使用React，但是它使代码更可读，写它感觉像写HTML。

安装

开始的最快方法是从CDN提供JavaScript（也可以在cdnjs 和 jsdelivr):

<!-- 核心React库 -->
<script src="https://fb.me/react-0.13.3.js"></script>
<!--浏览器中的JSX变换器，在预编译JSX时删除。 -->
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

我们还制作了一个 入门工具包如果这是你第一次使用React，这可能是有用的。 它包括一个网页，其中包含使用React与实时代码的示例。

如果你想使用 bower, 这很简单：

bower install --save react

贡献

此存储库的主要目的是继续发展React核心，使其更快更容易使用。 如果你有兴趣帮助，那么继续阅读。 如果你不想帮助现在也没关系。 :)给我们任何有关使用React的反馈，我们将非常感谢。

创建一个关于React的副本

我们在使用react.js之前要先搭建nodeJs，因为要引用其中大量的库，或许是你已经熟悉的。

必备条件

• 你的node版本应该在v0.10.0+以上（或许能在低版本上运行，我们没有测试过） 

• 你应该熟悉npm，并且使用’sudo’以保证依赖包为全局安装 

• 你应该熟悉git 

构建

一旦你有了知识库的克隆，建立一份 react.js 真的很简单。

# grunt-cli is needed by grunt; you might have this installed alreadynpm install -g grunt-clinpm installgrunt build

在这一点上，你应该有一个构建/目录填充您需要使用React的所有内容。示例应该都可以工作。

Grunt

我们使用Grunt来自动化执行许多任务。运行 grunt -h 查看大部分完整的列表。 其中重要的知识点：

/*用PhantomJS创建并运行测试程序*/
grunt test
/*在你的浏览器上创建运行*/
grunt test 
--debug/*你可以运行一个程序的时候加上'--filter'获得更快的速度。*/
grunt fasttest 
--filter=ReactIdentity/*用ESLint保证高质量代码*/
grunt lint
/*销毁创建的目录*/
grunt clean

本节完~