React基础语法学习

最新推荐文章于 2023-12-06 17:57:24 发布
最新推荐文章于 2023-12-06 17:57:24 发布
阅读量4.3k 收藏
点赞数
分类专栏： React 文章标签： css xml ui dom diff
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whuhan2013/article/details/51742730
版权

React主要有如下3个特点：

  • 作为UI（Just the UI）
  • 虚拟DOM（Virtual DOM）:这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法
  • 数据流（Date Flow）单向数据流

学习React需要掌握哪些知识？

  • JSX语法 类似XML
  • ES6相关知识
  • 前端基础 CSS+DIV JS

例子一
（简单组件和数据传递） 使用this.props 指向自己的属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第一个例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    var HelloMessage=React.createClass(
            {
                render:function(){
                    return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是东方耀</h1>;
                    //这是注释  React.createElement
                }
            }
    );

    ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example'));




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

例子二（通过this.state更新视图） 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第二个例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>

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

<script type="text/babel">
    var Timer=React.createClass(
            {
      /*初始状态*/
            getInitialState:function(){
      return {secondsElapsed:0};
    },

    tick:function(){
      this.setState({secondsElapsed:this.state.secondsElapsed+1});
    },

    /*组件完成装载*/
    componentDidMount:function(){
      this.interval=setInterval(this.tick,1000);
    },
    /*组件将被卸载   清除定时器*/
    componentWillUnmount:function(){
        clearInterval(this.interval);
    },
    /*渲染视图*/
    render:function(){
        return(
                <div> Seconds Elapsed:{this.state.secondsElapsed} </div>
        );
    }

    }
    );




    React.render( <Timer /> ,document.getElementById('example'));


</script>

</body>
</html>

例子三（简单应用） 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第三个例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>

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

<script type="text/babel">

    var ShowEditor=React.createClass(
            {
                getInitialState:function(){
                  return {value:'你可以在这里输入文字'};
                },

                handleChange:function(){
                  this.setState({value:React.findDOMNode(this.refs.textarea).value});
                },

                render:function(){
                    return (



                            <div>
                            <h3>输入</h3>
                                    <textarea style={{width:300,height:150,outline:'none'}}
                       onChange={this.handleChange}
                       ref="textarea"
                    defaultValue={this.state.value}

                />
    <h3>输出</h3>

            <div> {this.state.value} </div>

                            </div>

                    );

                }




            }

    );


    React.render(<ShowEditor />,document.getElementById('example'));



</script>

</body>
</html>

flexbox布局

伸缩项目的属性

1.order
定义项目的排列顺序，数值越小，排列越靠前，默认值为0，语法为：order：整数值
2.flex-grow
定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整
数值
3.flex-shrink
定义伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值
4.flex-basis
用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认
值为auto
5.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
6.align-self
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：align-self:auto
| flex-start | flex-end | center | baseline | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为
垂直方向的话，只有在不设置高度的情况下才能看到效果)

在React Native中使用flexbox

RN目前主要支持flexbox的如下6个属性：
1.alignItems
用来定义伸缩项目在交叉轴上的对齐方式，语法为： alignItems:flex-start（默认值） | flex-end |
center | stretch
2.alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：alignSelf:auto |
flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的
话，只有在不设置高度的情况下才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
4.flexDirection
指定主轴的方向 flex-direction:row| row-reverse | column（默认值） | column-reverse
5.flexWrap
6.justifyContent

BOX实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .height50 {
        height: 50px;
      }
      .height400 {
        height: 400px;
      }
      .height300 {
        height: 300px;
      }
      .height200 {
        height: 200px;
      }
      .height100 {
        height: 100px;
      }
      .width400 {
        width: 400px;
      }
      .bgred {
        background-color: #6AC5AC;
      }
      .bggreen {
        background-color:  #414142;
      }
      .bgyellow {
        background-color: #D64078;
      }
      .box {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        color: #FDC72F;
        line-height: 1em;
      }
      .label {
        top: 0;
        left: 0;
        padding: 0 3px 3px 0;
        position: absolute;
        background-color: #FDC72F;
        color: white;
        line-height: 1em;
      }
      .top {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
      }
      .bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .right {
        width: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .left {
        width: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .heightdashed {
        position: absolute;
        right: 20px;
        height: 100%;
        border-left: 1px solid #FDC72F;
      }
      .widthdashed {
        position: absolute;
        left: 0px;
        width: 100%;
        bottom: 24px;
        border-top: 1px solid #FDC72F;
      }
      .margginBox {
        position:absolute;
        top: 100px;
        padding-left:7px;
        padding-right:7px;
      }
      .borderBox {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .paddingBox {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .elementBox{
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .measureBox {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    </style>
  </head>
  <body>
    <span class="margginBox">
      <span class="box height400  width400">
        <span class="label">
          margin
        </span>
        <span class="top height50 bgred">
          top
        </span>
        <span class="borderBox">
          <span class="left bgred">
            left
          </span>
          <span class="box height300  ">
            <span class="label">
              border
            </span>
            <span class="top height50 bggreen">
              top
            </span>
            <span class="paddingBox">
              <span class="left bggreen">
                left
              </span>
              <span class="box height200  ">
                <span class="label">
                  padding
                </span>
                <span class="top height50 bgyellow">
                  top
                </span>
                <span class="elementBox">
                  <span class="left bgyellow">
                    left
                  </span>
                  <span class="box height100  ">
                    <span class="label">
                      element
                    </span>
                    <span class="widthdashed">
                    </span>
                    <span class="heightdashed">
                    </span>
                    <span class="measureBox">
                      <span class="right">
                        height
                      </span>
                    </span>
                    <span class="bottom  height50">
                      width
                    </span>
                  </span>
                  <span class="right bgyellow">
                    right
                  </span>
                </span>
                <span class="bottom  height50 bgyellow">
                  bottom
                </span>
              </span>
              <span class="right bggreen">
                right
              </span>
            </span>
            <span class="bottom  height50 bggreen">
              bottom
            </span>
          </span>
          <span class="right bgred">
            right
          </span>
        </span>
        <span class="bottom  height50 bgred">
          bottom
        </span>
      </span>
    </span>
  </body>
</html>

效果如下

这里写图片描述

ReactNative版实现 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class DongFang extends Component {
  render() {
    return (
        <View style={[BoxStyles.margginBox]}  ref="lab1">
          <View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}>
            <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>
              <Text style={BoxStyles.yellow}>top</Text></View>
            <View style={[BoxStyles.borderBox]}>
              <View style={[BoxStyles.left,BoxStyles.bgred]} >
                <Text style={BoxStyles.yellow}>left</Text></View>
              <View style={[BoxStyles.box,BoxStyles.height300]}>
                <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}>
                  <Text style={BoxStyles.yellow}>top</Text></View>
                <View style={[BoxStyles.paddingBox]}>
                  <View style={[BoxStyles.left,BoxStyles.bggreen]} >
                    <Text style={BoxStyles.yellow}>left</Text></View>
                  <View style={[BoxStyles.box,BoxStyles.height200]}>
                    <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}>
                      <Text style={BoxStyles.yellow}>top</Text></View>
                    <View style={[BoxStyles.elementBox]}>
                      <View style={[BoxStyles.left,BoxStyles.bgyellow]} >
                        <Text style={BoxStyles.yellow}>left</Text></View>
                      <View style={[BoxStyles.box,BoxStyles.height100]}>
                        <View  style={[BoxStyles.label]}>
                          <Text style={BoxStyles.white}>element</Text></View>
                        <View style={[BoxStyles.widthdashed]} ></View>
                        <View style={[BoxStyles.heightdashed]} ></View>
                        <View style={[BoxStyles.measureBox]} >
                          <View style={[BoxStyles.right]}>
                            <Text style={[BoxStyles.yellow]}>height</Text></View>
                        </View>
                        <View style={[BoxStyles.bottom,BoxStyles.height50]}>
                          <Text style={BoxStyles.yellow}>width</Text></View>
                      </View>
                      <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>
                    </View>
                    <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}>
                      <Text style={BoxStyles.yellow}>bottom</Text></View>
                    <View style={[BoxStyles.label]}>
                      <Text style={BoxStyles.white}>padding</Text></View>
                  </View>
                  <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>
                </View>
                <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}>
                  <Text style={BoxStyles.yellow}>bottom</Text></View>
                <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>
              </View>
              <View style={[BoxStyles.right,BoxStyles.bgred]}>
                <Text style={BoxStyles.yellow}>right</Text></View>
            </View>
            <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}>
              <Text style={BoxStyles.yellow}>bottom</Text></View>
            <View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View>
          </View>
        </View>
    );
  }
}

const BoxStyles = StyleSheet.create({
  height50:{
    height: 50,
  },
  height400:{
    height: 400,
  },
  height300:{
    height: 300,
  },
  height200:{
    height: 200,
  },
  height100:{
    height: 100,
  },
  width400:{
    width: 400,
  },
  width300:{
    width: 300,
  },
  width200:{
    width: 200,
  },
  width100:{
    width: 100,
  },
  bgred: {
    backgroundColor:'#6AC5AC',
  },
  bggreen: {
    backgroundColor: '#414142',
  },
  bgyellow: {
    backgroundColor: '#D64078',
  },
  box: {
    flexDirection: 'column',
    flex: 1,
    position: 'relative',
  },
  label: {
    top: 0,
    left: 0,
    paddingTop: 0,
    paddingRight: 3,
    paddingBottom: 3,
    paddingLeft: 0,
    position: 'absolute',
    backgroundColor: '#FDC72F',
  },
  top: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottom: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  right: {
    width: 50,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  left: {
    width: 50,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  heightdashed: {
    bottom: 0,
    top: 0,
    right: 20,
    borderLeftWidth: 1,
    position: 'absolute',
    borderLeftColor: '#FDC72F',
  },
  widthdashed: {
    bottom: 25,
    left: 0,
    right: 0,
    borderTopWidth: 1,
    position: 'absolute',
    borderTopColor: '#FDC72F',
  },
  yellow: {
    color: '#FDC72F',
    fontWeight:'900',
  },
  white: {
    color: 'white',
    fontWeight:'900',
  },
  margginBox:{
    position: 'absolute',
    top: 100,
    paddingLeft:7,
    paddingRight:7,
  },
  borderBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  paddingBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  elementBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  measureBox:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems:'flex-end',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('DongFang', () => DongFang);

这里写图片描述

Ricardo.M.Jiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React基础学习视频（下）.zip
08-07
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 中，把一切东西都看成组件，而且所有组件有其状态。...下篇包括：JSX 语法及特点介绍、React 属性和状态详解、React 相关开发工具
React基础语法总结
qq_56989560的博客
06-10 2972
React基础语法总结
react小记/基本语法/reactjs整理(持续更新)
ispaomoya博客
10-31 373
react小记/基本语法/reactjs整理(持续更新)
React基础语法
qq_52099965的博客
11-09 1182
React 基础语法
react基本语法总结？
weixin_47450807的博客
05-09 1472
1、js和jsx有什么区别，为什么要使用jsx // ①jsx的使用 <script type="text/babel"> const VDOM = <h1 id='title'>hell,react</h1> ReactDOM.render(VDOM, document.getElementById('test')) </script> ②js的使用 <script type="text/javascript">
React Native基础视频教程
12-11
01.JavaScript基础 02.ECMAScript 新功能 03.React 基础 04.React 路由 05React Native基础知识 06.React Native进阶 07.R React Native高级 08ECMAScript 2105(es6) 09React Native视频教程-项目实战
React学习
02-10
React学习 2021年1月 1.React开发简书项目从零基础入门到实战 2. React全家桶+ AntD共享单车后台管理系统开发 差不多一个月时间，学语法，201217-210117 两个项目+ interview4 / react面试看完 React原始之类的 2021...
React基础08. 改写ES5语法成React, 输入即改变的网页Input实作
08-31
[React_JS][ES6][前端教學]_React基礎#08._改寫ES5語法成React,_輸入即改變的網頁Input實作
linjunc#react-study#React 入门学习（一）-- 基础知识以及 jsx语法1
07-25
声明式编码，组件化编码React 的一些主要优点？它提高了应用的性能可以方便在客户端和服务器端使用由于使用 JSX，代码的可读性更好使用React，编写 UI
React 之 基础与核心语法
玄鱼殇
03-25 1409
React 之 基础与核心语法
day1--react基础语法
coder_66l的博客
04-07 790
react基础语法
React Native基础语法
qq_36828822的博客
01-09 931
JSX语法 RN使用JSX语法来构建页面。JSX并不是一门新的开发语言，而是Facebook技术团队提出的一种语法方案，即一种可以在JS代码中使用HTML标签来编写JS对象的语法糖，所以JSX本质上还是JS。 在React和RN应用开发中，不一定非要使用JSX，也可以使用JS进行开发。不过，因为JSX在定义上类似HTML这种树型结构，所以使用JSX可以极大地提高阅读和开发效率，减少代码维护的成本。 在React开发中，React的核心机制之一就是可以在内存中创建虚拟DOM元素，进而减少对实际DOM的操作从而
react基本语法
qq_43180019的博客
12-08 1066
一，组件的使用 1.1组件的声明 有俩种写法 写法一：在components组件中新建Home. js 文件 import React,{Component} from "react"; //声明组件的类 class Home extends Component{ render(){ return <div>我是Home组件</div> } } export default Home; 写法二：在components组件中新建Cart.
React基础语法整理
最新发布
Start的小笔记
12-06 1976
<h4>当前信息{JSON.stringify(person)}</h4>
RN 入门(二)—基础知识
zcmain的专栏
12-19 3108
文章目录生命周期Mounting-装载1.1 constructor1.2 `UNSAFE_componentWillMount`1.3 render1.4 componentDidMountUpdating-更新2.1 `UNSAFE_componentWillReceiveProps`2.2 `UNSAFE_componentWillUpdate`2.3 componentWillUpdate...
React语法(N)
weixin_68658847的博客
04-21 955
React语法(N)
React教程（由浅到深）
web$-小白
07-02 3813
1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>`接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
学习react应该怎么学习
04-05
2. 学习React基础：学习React的组件、生命周期、状态管理等基础知识。 3. 学习React路由：了解React Router的基础知识，学习如何实现单页应用。 4. 学习Redux：了解Redux的基本概念、工作原理和使用方法，掌握在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值