学习react教程

最新推荐文章于 2024-11-10 20:23:33 发布
最新推荐文章于 2024-11-10 20:23:33 发布
阅读量102 收藏
点赞数
文章标签： git javascript ui ViewUI
原文链接：http://www.cnblogs.com/guanqiweb/p/10267604.html
版权

网址收藏: React官网，React的Github，React的中文文档

1.react是什么？

React起源于Facebook的内部项目，因为该公司对市场上所有的Javascript MVC框架都不满意，决定自己写一套，用来架设Instargm的网站。做完以后，发现很好用，就在2013年5月开源。

2.安装react

  • 全局安装react脚手架工具npm install create-react-app -g
  • 安装阮一峰老师的教程 git clone git@github.com:ruanyf/react-demos.git下载下来

3.react特性

重点：组件，状态
核心： 状态

4.语法。

4.1 html模板

<!DOCTYPE html>
<html>
  <head>
    <!-- 这是核心js -->
    <script src="../build/react.js"></script>
    <!-- 这是处理虚拟dom相关的js -->
    <script src="../build/react-dom.js"></script>
    <!-- 这是把JSX语法转换为js语法 （注意：JSX就是可以把html写在js里面。） -->
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- 这里加type就是告诉游览器，这里使用的是JSX语法模板。 -->
    <script type="text/babel">
      //这里写
    </script>
  </body>
</html>

4.2 ReactDOM.render()

React最基本的方法，用于把模板转换成html语言，并且插入指定的节点。

例如：

ReactDOM.render(
    <h2>Welcome to React World!</h2>,
    document.getElementById('myapp')
)

4.3 JSX语法

JSX是可以在js中写html，遇到html标签（例如：<）就用html解析，遇到代码块（例如：{）就用javascript规则解析。

例如：

<!DOCTYPE html>
<html>
  <head>
    <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>
    <div id="food"></div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];
      var foods = ['meal','sala','milk'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name, index) {
            return <div key={index}>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
      ReactDOM.render(
        <div>
        {
          foods.map(function (food, index) {
              return <div key={index}>I like eat {food}!</div>
          })
        }
        </div>,
        document.getElementById('food')
      )
    </script>
  </body>
</html>

4.4 组件 React.createClass()

React允许将代码封装成组件(component)，然后把它当成html标签插入到网页中。React.createClass()就是可以创建一个组建类。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var LikeFood = React.createClass({  //创建组件类
        render: function() {
          return <p>I like eat <mark>{this.props.name}</mark></p>;
        }
      });

      ReactDOM.render(
        <LikeFood name="Apple"/>,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

4.5 this.props.children

this.props对象的属性与组件的属性基本上是一致的，特殊在于this.props.children属性，它表示组件的所有子节点。

注意： this.props.children有三个可能，如果当前组件没有子节点，就是显示undefined;如果有一个子节点，数据类型就是object；如果有多个子节点，就是array，所以要小心。
但React提供了一个方法遍历所有子节点，React.Children,通过this.props.children来遍历。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
        var FoodList = React.createClass({
            render: function() {
            return (
                <ul>
                {
                    React.Children.map(this.props.children,function (child) {
                    return <li>{child}</li>;
                    })
                }
                </ul>
            )
            }
        })

        ReactDOM.render(
            <FoodList>
            <span>Hello,</span>
            <span>I like eat</span>
            <span>Apple!</span>
            </FoodList>,
            document.getElementById('foods')
        )
    </script>
  </body>
</html>

4.6 PropTypes

组件的属性可以接受任何值，如字符串，数字，数组，对象，函数，但是需要一种机制来验证使用组件提供的参数是否符合要求，PropTypes就是用来验证这个的。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var str = 123;
      var MyNum = React.createClass({
        propTypes: {
          num: React.PropTypes.number.isRequired,
        },

        render: function() {
          return <h2>{this.props.num}</h2>
        }
      });

      ReactDOM.render(
        <MyNum num={str} />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

补充：还可以添加默认值。'

getDefaultProps: function() {
    return {
    num: 1818
    }
}

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var str;
      var MyNum = React.createClass({
        getDefaultProps: function() {
            return {
                num: 1818
            }
        }
        propTypes: {
          num: React.PropTypes.number.isRequired,
        },

        render: function() {
          return <h2>{this.props.num}</h2>
        }
      });

      ReactDOM.render(
        <MyNum num={str} />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

4.7 获取真实的DOM节点

组件并不是真的dom节点，只是存在内存中的数据结构，叫做虚拟DOM(virtual)。当它插入到文档以后，才会变成真实的DOM。

所有的DOM变动，先是在虚拟DOM上发生变动，然后再在实际发生变动的部分，反映在真实的DOM，这种叫做DOM diff,它可以极大提高网页的性能表现。

有时需要从组件获取真实的DOM的节点，这个时候就要用到ref属性。

注意：React还支持许多事件，更多请访问事件。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
        var MyFoods = React.createClass({
          showContent: function() {
            this.refs.myFoodInput.focus();
          },
          render: function() {
            return (
              <div>
                <input type="text" ref="myFoodInput" />
                <input type="button" value="自动聚焦" onClick={this.showContent} />
              </div>
            )
          }
        })

        ReactDOM.render(
          <MyFoods />,
          document.getElementById('foods')
        )

    </script>
  </body>
</html>

4.8 this.state 状态管理

组件免不了要和用户互动，React的一大创新就是把组件看成是一个状态机，一开始有个初始状态，然后用户互动，导致状态变化，从而重新出发渲染UI。

注意： getInitialState 方法用于定义初始状态，但同时它是一个对象，这个可以通过this.state属性读取。

当用户点击组件，导致状态发生变化，this.setState 方法就会修改状态值，每次修改完，会自动调用this.render方法，再次渲染组件。

this.props和this.state都是描述组件的特性，但是不同的是this.props是指一旦定义好了，就不再发生变化的特性，而this.state是会随着用户互动而产生变化的特性。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var FoodButton = React.createClass({
        getInitialState: function() {
          return {food: false};
        },
        callClick: function(event) {
          this.setState({food: !this.state.food});
        },
        render: function() {
          var text1 = this.state.food ? 'like eat apple' : 'hate eat apple';
          return (
            <p onClick={this.callClick}>
              You {text1}!  
            </p>
          );
        }
      });

      ReactDOM.render(
        <FoodButton />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

4.9 表单

用户在表单填入的内容，属于用户和组件之间的互动，所以不能用this.state，而要定义一个onChange事件的回调函数，通过event.target.value读取用户的值。

注意：textarea,select,radio都属于这种情况。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">

      var Food = React.createClass({
        getInitialState: function() {
          return {val: 'Welcome to React!'};
        },
        hanChange: function(event) {
          this.setState({val:event.target.value});
        },
        render: function() {
          var val = this.state.val;
          return (
            <div>
              <input type="text" value={val} onChange={this.hanChange} />
              <p>{val}</p>  
            </div>
          );
        }
      })
      ReactDOM.render(<Food />,document.getElementById('food'))
    </script>
  </body>
</html>

4.10 组件的生命周期

React中组件的生命周期分为三个状态，Mounting是已经插入真实DOM，Updating是正在被重新渲染，Unmounting是已移出真实DOM。

每个状态都有两种处理函数，will函数是进入状态之前，did函数是进入状态之后，三种状态共计五种函数。

注意：组件的样式style不能写成<div style={opacity: this.state.opacity}>，要写成<div style={{opacity: this.state.opacity}}>。

因为React组件样式是个对象，所以第一个大括号表示Javascript语法，第二个大括号表示样式对象。

五种函数
  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentWillUpdate(object prevState, object prevState)
  • componentWillUnMount()

例如：第二种，在已插入真实DOM之后触发。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">
      var Food = React.createClass({
        getInitialState: function() {
          return {
            opacity: 0
          }
        },
        componentDidMount: function() {
          this.timer = setInterval(function() {
            var opacity = this.state.opacity;
            opacity += .05;
            if (opacity > 1) {
              opacity = 0;
            }
            this.setState({
              opacity: opacity
            })
          }.bind(this),100);
        },

        render: function() {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello, {this.props.title}
            </div>
          );
        }
      });

      ReactDOM.render(
        <Food title="apple"/>,
        document.getElementById('food')
      )
    </script>
  </body>
</html>

4.11 Ajax的使用

组件的数据来源一般都是通过Ajax请求从服务器获取，可以使用componentDidMount()方法设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">
      var ClientGits = React.createClass({
        getInitialState: function() {
          return {
            id: '',
            addr: ''
          };
        },
        componentDidMount: function() {
          $.get(this.props.source,function (result) {
            var gits = result[0];
            this.setState({
              id: gits.id,
              addr: gits.git_pull_url
            });
          }.bind(this));
        },

        render: function() {
          return (
            <div>
              UserId is <a href='#userId'>{this.state.id}</a>, Git Address is <a href={this.state.addr}>{this.state.addr}</a>!
            </div>
          );
        }
      });

      ReactDOM.render(
        <ClientGits source="https://api.github.com/users/octocat/gists" />,
        document.getElementById('food')
      )
    </script>
  </body>
</html>

注意：上面采用了jquery的Ajax，还可以采用其他的库。我们甚至可以把Promise对象传入组件。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="projects"></div>
    <script type="text/babel">
        var Projects = React.createClass({
          getInitialState: function() {
            return {
              loading: true,
              error: null,
              data: null
            };
          },

          componentDidMount() {
            this.props.promise.then(
              value => this.setState({loading: false, data: value}),
              error => this.setState({loading: false, error: error})
            )
          },

          render: function() {
            if (this.state.loading) {
              return <span>Loading...</span>;
            } else if (this.state.error != null) {
              return <span>Error:{this.state.error.message}</span>;
            } else {
              var res = this.state.data.items;
              var resList = res.map(function (res,index) {
                return (
                  <li key={index}><a href={res.html_url} target="_blank">{res.name}</a>({res.stargazers_count} stars)<br/>{res.description}</li>
                );
              });
              return (
                <main>
                  <h1>Github上最受欢迎的JS项目</h1>
                  <ul>{resList}</ul>
                </main>
              );
            }
          }
        });

        ReactDOM.render(
          <Projects promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
          document.getElementById('projects')
        )
    </script>
  </body>
</html>

转载于:https://www.cnblogs.com/guanqiweb/p/10267604.html

anqiao6759
关注
React 教程
12-14
学习React教程的过程中，你可以通过在线编辑器实践这些实例，实时查看运行效果，这将有助于加深对React概念的理解。随着学习深入，你还将接触到状态管理、生命周期方法、事件处理、表单控件、路由等更多高级主题，...
React资料配合B站尚硅谷教程
04-19
通过结合这个React资料包和B站尚硅谷的教程，你可以系统地学习React的基础知识和高级特性。 本资料包可能包含了以下内容： 1. **React基础**：这部分通常会讲解React的核心概念，如JSX、状态管理、props、生命周期...
React 入门实例教程
一个有趣、有料、有内涵的地方!
12-13 1172
文章来源：阮一峰的博客http://www.ruanyifeng.com/blog/2015/03/react.html 现在最热门的前端框架，毫无疑问是 React 。 上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaS
第十节，使用promise操作ajax
daily886的博客
04-27 1034
Document <!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，而 react-dom package 中包含 ReactDOM
JS中的Promise的then方法
qq_38173996的博客
04-26 3591
Promise.prototype.then回调里面的返回值，是通过一个变量/私有API保存的，不是return出来的，想接收/包装返回值得在Promise状态完成了之后通知执行回调函数。 我再简单的举例，一个简单的异步任务如何拿到值： var foo = (callback) => { //通过回调函数拿值 setTimeout(function () {
React Native入门学习笔记三（JSX语法）
编程圈子-谢厂节的博客
06-23 8927
参考示例： https://github.com/ruanyf/react-demosdemo2 简单数组遍历var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> })
promise深入了解
风火一回，一生不毁
05-27 1080
Pormise深入了解import React from "react";export default class Footer extends React.Component{ constructor(props){ super(props) this.state = { flag : 0, result:''
React教程（详细版）
热门推荐
Ronychen的博客
03-19 20万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
尚硅谷教程React视频.txt
10-08
下面将从React的基础概念、特性以及如何通过尚硅谷教程学习React等方面进行详细介绍。 ### React基础知识 #### 什么是React React是Facebook开发的一个用于构建用户界面的JavaScript库，主要用于构建单页面应用...
React Native学习教程之自定义NavigationBar详解
01-20
在React Native中，开发人员经常需要为应用创建自定义的导航栏(NavigationBar)，以便实现特定的设计需求或功能。在早期版本的React Native中，NavigationIOS提供了内置的NavigationBar，但在一般的Navigation实现中...
ES6 Promise对象和then()的用法
wunianisme的博客
06-01 9997
Promise 对象 概述 是异步编程的一种解决方案。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 状态 Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。 Promise 对象只有：从 pending 变为 fulfilled 和从 pending...
Promise 的then 与 async await 写法相互转化
卓原的进化之旅
05-04 2万+
本来一直是用then来对promise进行处理的 , 今天在用react-native-stroge的时候发现作者很推崇async await的写法 于是研究了一下,把自己的代码替换了. 下面进入正题 在使用的时候,我存值时是这么写的: // 存值 createData(title, successBack, errorBack) { // 使用key保...
微信小程序中的JavaScript之promise.then的用法
速冻的博客
10-16 1万+
promise 嗯 被用于异步执行 总的来说异步 就是可以不按默认顺序执行代码 嗯 就好比 在医院 护士负责为3个病人治疗 把系统比作医护人员的话 她默认是先给第一个病人打针 等盐水滴完 拔针 止血后 才给第二个病人打针 所以在第一个病人挂点滴时 第二个病人和第三个病人都要等着 以下使用代码来作比较 var mess = new function () { ...
android studio 把unversioned文件加入git
weixin_42504805的博客
11-06 226
在上下文菜单中选择"Add to VCS" -> "Git"。在项目视图中，右键点击你想要添加的未版本化的文件或文件夹。例如，如果你有一个未版本化的文件叫做。打开Android Studio。是你想要添加的文件的相对路径。
在vscode中如何利用git 查看某一个文件的提交记录
Sherry Tian的博客
11-07 315
在vscode中如何利用git 查看某一个文件的提交记录，当你希望查看之前的提交时，可以利用这个方法快速找到之前修改过的代码。
Git推送报错Authentication failed
Dechin的博客
11-08 288
问题背景 在某一次的Git推送时，配置好commit信息之后，执行push操作的时候出现了这样的一个报错信息： $ git push fatal: could not read Username for 'https://gitee.com': terminal prompts disabled fatal: could not read Username for 'https://gitee....
GIT GUI和 GIT bash区别
还在活水泥的未来包工头
11-05 507
它提供了一个命令行界面（CLI）来使用 Git，支持常规的 Git 命令和 Bash 命令（如 ls, cd, rm 等）。总的来说，Git GUI 是一个方便的图形化工具，适合轻量级和日常的 Git 操作；而 Git Bash 则是一个强大的命令行工具，适合开发者进行深入的 Git 操作和自动化脚本。Git GUI 和 Git Bash 都是与 Git 版本控制工具相关的用户界面，但它们有不同的功能和用途。功能范围 提供常见的 Git 操作，简化复杂操作 完全支持所有 Git 命令和操作，功能全面。
lineageos-19 仓库群遍历,打印第一条git log
最新发布
_
11-10 40
lineage
深入学习React：构建现代Web应用教程
这篇React教程涵盖了React的基本概念和核心特性，适合初学者和有经验的开发者进一步提升对React的理解。React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适用于构建单页应用（SPA）。在本教程中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值