程序员开发实例大全宝库

网站首页 > 编程文章 正文

React学习教程(1)(react 入门教程)

zazugpt 2024-08-12 03:21:24 编程文章 27 ℃ 0 评论

1.1.1 React 是什么

狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架,广义来讲 React 不仅仅是 js 框架本身,更是一套完整的前端开发生态体系,这套体系包括:

  1. React.js

  2. ReactRenders: ReactDOM / ReactServer / ReactCanvas

  3. Flux 模式及其实现(Redux , Fluxxor)

  4. React 开源组件

  5. React Native

  6. GraphQl + Relay

任何技术都是一样,技术本身的核心不会太复杂,但是围绕这个主体会有很多依附的知识点形成了体系化的技术栈。 所以我们谈学习 React 并不仅仅是学习 React 本身,而是学习这套开发体系,整个技术栈, 我们也是围绕这个技术栈系统的讲解。

1.1.2 React 中的基本概念

我们先来认识一下 React 中的基本概念

React.js

React.js 是 React 的核心库,在应用中必须先加载核心库。

ReactDOM.js

ReactDOM.js 是 React 的 DOM 渲染器,React 将核心库和渲染器分离开了,为了在 web 页面中显示开发的组件,需要调用 ReactDOM.render 方法, 第一个参数是 React 组件,第二个参数为 HTMLElement。

JSX

JSX 是 React 自定义的语法,最终 JSX 会转化为 JS 运行于页面当中。

组件

组件是 React 中的核心概念,页面当中的所有元素都是通过 React 组件来表达, 我们将要写的 React 代码绝大部分都是在做 React 组件的开发。

VIRTUAL DOM

React 抽象出来的虚拟 DOM 树,虚拟树是 React 高性能的关键。

单向数据流:one-way reactive data flow

React 应用的核心设计模式,数据流向自顶向下

1.1.3 Hello React World

我也是性子急的人,按照技术界的惯例,在学习一个技术前,首先得说一句: “Hello World!”。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="http://facebook.github.io/react/js/react.js"></script>

<script src="http://facebook.github.io/react/js/react-dom.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

var Hello = React.createClass({

render: function() {

return <div>Hello {this.props.name}</div>;

}

});

ReactDOM.render(

<Hello name="World" />,

document.getElementById('example')

);

</script>

</body>

</html>



jsx 语法怎么和 HTML 写法一样?

答:是的,看上去一样, 但jsx 和 HTML 本质的不同是 jsx 直接在函数中写 xml 标签。在 1.2 节中,会详细介绍 jsx 以及和 HTML 做更多的对比。

看上去 React 除了 jsx 以外,并没有什么特殊的地方,不就是将模板字符串渲染到 DOM 中吗?你能告诉我 React 和其他框架有什么不同之处吗?

答:React的独到之处

相比其他前端框架,为什么 React 独树一帜,能够脱颖而出呢?

  1. 组件的组合模式

  2. 单向数据流的设计

  3. 高效的性能

  4. 分离的设计

Hello World 也并不能看出 React 的能力,你能先告诉我 React 能做些什么吗?

1)Web 端应用

Web 应用是 React 的出发点,我们可以通过 React 构建从简单的 TODOAPP 到大型的电商购物网站应用。 同时除了能够处理 HTML 以外, 在 Web 端, 我们同样可以通过 React 来实现数据可视化, 图表展现,甚至是游戏开发:

2)原生应用

除了 Web 端以外,我们可以使用同样的 jsx 语法构建 IOS 或者 Android 应用, 这要归功于 facebook 开源的 React Native。 基于 React Native , 我们将可以使用 jsx 来实现具有原生应用性能的 UI 运行于 IOS 和 android 中,同时我们也可以通过 NW.js 或者 Electron 来实现基于 React 的桌面应用。

3)服务端渲染

React 除了在 Web 和 Native 环境以外, 也可以通过 React 实现在服务器端渲染出 HTML。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表