React基础语法学习

React 前端之家
前端之家收集整理的这篇文章主要介绍了React基础语法学习，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

React主要有如下3个特点：

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

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

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

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

  1. <!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更新视图） 

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <Meta charset="UTF-8">
  5.     <title>React第二个例子</title>
  6.     <script type="text/javascript" src="react.js"></script>
  7.     <script type="text/javascript" src="react-dom.js"></script>
  8.     <script type="text/javascript" src="browser.min.js"></script>
  9. </head>
  10. <body>
  11.  
  12. <div id="example"></div>
  13.  
  14. <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>
  15.  
  16. </body>
  17. </html>

例子三（简单应用） 

  1. <!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实现

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <Meta charset="utf-8">
  5.     <title></title>
  6.     <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>
  7.   </head>
  8.   <body>
  9.     <span class="margginBox">
  10.       <span class="Box height400 width400">
  11.         <span class="label">
  12.           margin
  13.         </span>
  14.         <span class="top height50 bgred">
  15.           top
  16.         </span>
  17.         <span class="borderBox">
  18.           <span class="left bgred">
  19.             left
  20.           </span>
  21.           <span class="Box height300 ">
  22.             <span class="label">
  23.               border
  24.             </span>
  25.             <span class="top height50 bggreen">
  26.               top
  27.             </span>
  28.             <span class="paddingBox">
  29.               <span class="left bggreen">
  30.                 left
  31.               </span>
  32.               <span class="Box height200 ">
  33.                 <span class="label">
  34.                   padding
  35.                 </span>
  36.                 <span class="top height50 bgyellow">
  37.                   top
  38.                 </span>
  39.                 <span class="elementBox">
  40.                   <span class="left bgyellow">
  41.                     left
  42.                   </span>
  43.                   <span class="Box height100 ">
  44.                     <span class="label">
  45.                       element
  46.                     </span>
  47.                     <span class="widthdashed">
  48.                     </span>
  49.                     <span class="heightdashed">
  50.                     </span>
  51.                     <span class="measureBox">
  52.                       <span class="right">
  53.                         height
  54.                       </span>
  55.                     </span>
  56.                     <span class="bottom height50">
  57.                       width
  58.                     </span>
  59.                   </span>
  60.                   <span class="right bgyellow">
  61.                     right
  62.                   </span>
  63.                 </span>
  64.                 <span class="bottom height50 bgyellow">
  65.                   bottom
  66.                 </span>
  67.               </span>
  68.               <span class="right bggreen">
  69.                 right
  70.               </span>
  71.             </span>
  72.             <span class="bottom height50 bggreen">
  73.               bottom
  74.             </span>
  75.           </span>
  76.           <span class="right bgred">
  77.             right
  78.           </span>
  79.         </span>
  80.         <span class="bottom height50 bgred">
  81.           bottom
  82.         </span>
  83.       </span>
  84.     </span>
  85.   </body>
  86. </html>

效果如下

ReactNative版实现 

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  */
  5. 'use strict';
  6. import React,{
  7.   AppRegistry,Component,StyleSheet,Text,View
  8. } from 'react-native';
  9.  
  10. class DongFang extends Component {
  11.   render() {
  12.     return (
  13.         <View style={[BoxStyles.margginBox]} ref="lab1">
  14.           <View style={[BoxStyles.Box,BoxStyles.height400,BoxStyles.width400]}>
  15.             <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>
  16.               <Text style={BoxStyles.yellow}>top</Text></View>
  17.             <View style={[BoxStyles.borderBox]}>
  18.               <View style={[BoxStyles.left,BoxStyles.bgred]} >
  19.                 <Text style={BoxStyles.yellow}>left</Text></View>
  20.               <View style={[BoxStyles.Box,BoxStyles.height300]}>
  21.                 <View style={[BoxStyles.top,BoxStyles.bggreen]}>
  22.                   <Text style={BoxStyles.yellow}>top</Text></View>
  23.                 <View style={[BoxStyles.paddingBox]}>
  24.                   <View style={[BoxStyles.left,BoxStyles.bggreen]} >
  25.                     <Text style={BoxStyles.yellow}>left</Text></View>
  26.                   <View style={[BoxStyles.Box,BoxStyles.height200]}>
  27.                     <View style={[BoxStyles.top,BoxStyles.bgyellow]}>
  28.                       <Text style={BoxStyles.yellow}>top</Text></View>
  29.                     <View style={[BoxStyles.elementBox]}>
  30.                       <View style={[BoxStyles.left,BoxStyles.bgyellow]} >
  31.                         <Text style={BoxStyles.yellow}>left</Text></View>
  32.                       <View style={[BoxStyles.Box,BoxStyles.height100]}>
  33.                         <View style={[BoxStyles.label]}>
  34.                           <Text style={BoxStyles.white}>element</Text></View>
  35.                         <View style={[BoxStyles.widthdashed]} ></View>
  36.                         <View style={[BoxStyles.heightdashed]} ></View>
  37.                         <View style={[BoxStyles.measureBox]} >
  38.                           <View style={[BoxStyles.right]}>
  39.                             <Text style={[BoxStyles.yellow]}>height</Text></View>
  40.                         </View>
  41.                         <View style={[BoxStyles.bottom,BoxStyles.height50]}>
  42.                           <Text style={BoxStyles.yellow}>width</Text></View>
  43.                       </View>
  44.                       <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>
  45.                     </View>
  46.                     <View style={[BoxStyles.bottom,BoxStyles.bgyellow]}>
  47.                       <Text style={BoxStyles.yellow}>bottom</Text></View>
  48.                     <View style={[BoxStyles.label]}>
  49.                       <Text style={BoxStyles.white}>padding</Text></View>
  50.                   </View>
  51.                   <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>
  52.                 </View>
  53.                 <View style={[BoxStyles.bottom,BoxStyles.bggreen]}>
  54.                   <Text style={BoxStyles.yellow}>bottom</Text></View>
  55.                 <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>
  56.               </View>
  57.               <View style={[BoxStyles.right,BoxStyles.bgred]}>
  58.                 <Text style={BoxStyles.yellow}>right</Text></View>
  59.             </View>
  60.             <View style={[BoxStyles.bottom,BoxStyles.bgred]}>
  61.               <Text style={BoxStyles.yellow}>bottom</Text></View>
  62.             <View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View>
  63.           </View>
  64.         </View>
  65.     );
  66.   }
  67. }
  68.  
  69. const BoxStyles = StyleSheet.create({
  70.   height50:{
  71.     height: 50,},height400:{
  72.     height: 400,height300:{
  73.     height: 300,height200:{
  74.     height: 200,height100:{
  75.     height: 100,width400:{
  76.     width: 400,width300:{
  77.     width: 300,width200:{
  78.     width: 200,width100:{
  79.     width: 100,bgred: {
  80.     backgroundColor:'#6AC5AC',bggreen: {
  81.     backgroundColor: '#414142',bgyellow: {
  82.     backgroundColor: '#D64078',Box: {
  83.     flexDirection: 'column',flex: 1,position: 'relative',label: {
  84.     top: 0,left: 0,paddingTop: 0,paddingRight: 3,paddingBottom: 3,paddingLeft: 0,position: 'absolute',backgroundColor: '#FDC72F',top: {
  85.     justifyContent: 'center',alignItems: 'center',bottom: {
  86.     justifyContent: 'center',right: {
  87.     width: 50,justifyContent: 'space-around',left: {
  88.     width: 50,heightdashed: {
  89.     bottom: 0,top: 0,right: 20,borderLeftWidth: 1,borderLeftColor: '#FDC72F',widthdashed: {
  90.     bottom: 25,right: 0,borderTopWidth: 1,borderTopColor: '#FDC72F',yellow: {
  91.     color: '#FDC72F',fontWeight:'900',white: {
  92.     color: 'white',margginBox:{
  93.     position: 'absolute',top: 100,paddingLeft:7,paddingRight:7,borderBox:{
  94.     flex: 1,justifyContent: 'space-between',flexDirection: 'row',paddingBox:{
  95.     flex: 1,elementBox:{
  96.     flex: 1,measureBox:{
  97.     flex: 1,justifyContent: 'flex-end',alignItems:'flex-end',container: {
  98.     flex: 1,justifyContent: 'center',backgroundColor: '#F5FCFF',welcome: {
  99.     fontSize: 20,textAlign: 'center',margin: 10,instructions: {
  100.     textAlign: 'center',color: '#333333',marginBottom: 5,});
  101.  
  102. AppRegistry.registerComponent('DongFang',() => DongFang);

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作