react模板语法

一、React是什么?

React是一个将数据渲染为HTML视图的开源JavaScript库。

二、为什么要使用React

1·原生JavaScript操作DOM繁琐、效率低
2·使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排。
3·原生JavaScript没有组件化编码方案,代码复用率低。

三、React特点

1·采用组件化模式、声明式编码,提高开发效率及组件复用率。
2·在React Native中可以使用React语法进行移动端开发。
3·使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

四、生成一个react项目构架

react模板语法_第1张图片

01.安装:

npm i -g create-react-app

02.创建myreact项目:

create-react-app myreact

03.看是不是淘宝镜像

npm config get registry

在这里插入图片描述

如果不是淘宝用这个:

npm config set registry https://registry.npm.taobao.org/

04运行:npm start(自动跳转)

五、jsx语法

方便js中书写html模板,javascript与html混合写法

  • 只有个根节点
  • {} js表达式
  • {/* 注释内容*/}
  • className定义类名
  • 样式对象会自动展开
  • 数组可以包含html ,并自定展开

React的注意事项:

  • 一般采用import的方式引入React,React首字母规定大些,因为jsx会默认使用大写的React

  • 会根据尖括号(<)来判断是一个html,根据花括号({)来判断是一个js js中的保留字 关键字会进行转化

  • class=>className for=>htmlFor react相邻的jsx元素,react元素,必须被一个标签包裹 <>

  • style标签 必须是一个对象 style={{}} //{}表示js里面的{}表示是一个对象 注释 要用{}包裹

  • dangerouslySetInnerHTML 危险的,解析html用innerHtml的方式把内容塞进元素中

  • 可以在页面中使用三元运算
    事件方法 之前的οnclick=> onClick …

<div dangerouslySetInnerHTML={{_html:"你好"}}></div>

六、react的组件

组件的优点:

  • 方便复用
  • 方便维护
  • 方便重构

组件的定义可分为2种:

  1. 函数声明组件
function App(){
    return <div> ... </div>
}
export default App;
  1. 类声明组件
import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}
export default App

函数声明组件与类声明组件区别:

  • 函数组件通常展示,类组件通常做为容器
  • 类组件可以有state,管理数据用类组件,函组件没有state
  • 函组件没有this,类组件 有this
  • 函数组件没有生命周期,类组件有生命周期

七、模板语法

  • 条件渲染:
    不能使用if结构做条件判断
    使用三元运算符做条件判断

<body>
    <!-- 1.创建容器 -->
    <div id="container"></div>
    <script type="text/babel">
        let age = 30;
        //  书写jsx模板语法
         const div = <div>
                        {/*在jsx模板语法中不能使用if结构做条件判断*/}
                        {/*
{if(age>=18){'已成年'}else{'未成年'}}
*/
} {/*使用三元运算符做条件判断*/} <div>{age>=18 ? '已成年' : '未成年'}</div> <hr /> <div>{age>=18 ?<h2>已成年</h2> : <h3>未成年</h3>}</div> </div> ReactDOM.render(div,document.querySelector('#container')) </script> </body> </html>
  • 列表的渲染
    在遍历数组时,key需要绑定在遍历的直接子元素上

react模板语法_第2张图片

  • 文本渲染:{}
dangerouslySetInnerHTML={{__html:变量名}}

你可能感兴趣的:(React,react.js,javascript,前端)