1. React介绍 React开发环境搭建 React第一个程序

最新推荐文章于 2024-03-21 02:02:59 发布

jerome_s

最新推荐文章于 2024-03-21 02:02:59 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： React入门 React HelloWorld React开发环境搭建

本文链接：https://blog.csdn.net/jerome_s/article/details/52928711

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

什么是 React

React 是 Facebook 发布的 JavaScript 库，以其高性能和独特的设计理念受到了广泛关注。

React的开发背景

Facebook需要解决的问题：构建数据不断变化的大型应用。

数据变化

1. 大量DOM操作（方案：自动DOM操作）

2. 逻辑极其复杂（方案：状态对应内容）

React的应用场景

复杂场景下的高性能

重用组件库，组件组合

React的特点

1. 简单

2. 声明式

React的核心是组件，组件化的开发思路，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。

提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。

降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。

降低代码复杂度：直观的语法可以极大提高可读性。

React的发展过程

2013年6月，Facebook官方发布React

2013年9月，React热度开始上涨

2015年3月，React Native发布

开发工具

Sublime Text 3

安装Sublime Text 3插件：

1. 安装插件管理工具 packagecontrol（参考官网安装介绍）

在Sublime Text3的命令行（View > Show Console）下输入：

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

然后回车执行

安装插件方式，选择Install Package

然后输入具体的插件就可以

2. 安装Emmet：输入Emmet进行安装

3. 安装babel-sublime

支持ES6， React.js, jsx代码高亮

输入babel-sublime进行安装

配置：打开菜单view， Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel)，选择babel为默认 javascript 打开syntax

4. JsFormat 格式化 js 代码：输入JsFormat 进行安装

开发环境

安装React的Chrome插件“ React Developer Tools ”方便进行调试，安装完成审查元素的时候可以看到React的选项卡

用React编写第一个程序Hello, World

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>Hello, World</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello, world!</h1>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

参考

极客学院

慕课网

阮一峰React入门

书：《ECMAScript 6入门》

极客学院文档

react中文

Sublime Text 3 搭建 React.js 开发环境

代码

查看代码

资料

react-15.3.1.zip

jerome_s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1. React介绍 React开发环境搭建 React第一个程序

什么是 React React 是 Facebook 发布的 JavaScript 库，以其高性能和独特的设计理念受到了广泛关注。React的开发背景 Facebook需要解决的问题：构建数据不断变化的大型应用。数据变化 1. 大量DOM操作（方案：自动DOM操作） 2. 逻辑极其复杂（方案：状态对应内容）React的
复制链接

扫一扫