React框架

最新推荐文章于 2024-04-12 01:51:32 发布

常蓬cium

最新推荐文章于 2024-04-12 01:51:32 发布

阅读量185

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/lh_changpeng/article/details/109046684

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

文章目录

react开始

React出版方:Facebook(脸书)
终端的分类:
- 1.原生App:
  - 就是用原生语言开发的(如安卓，ios)，性能最高，其它不如混合App
- 2.混合App:采用的原因是审核，维护
  - 就是原生(调用硬件) + H5(欠缺调用硬件的能力)
- 3.webApp 移动端
  - 性能差，界面不精致

react开始

概念

用于构建用户界面的javescript库

安装

cdn引入(需要引入2个)
- react.js 核心库
- react-dom.js 做webapp移动端，、react-native开发原生的
- babel.js es6转es5及转移jsx
老的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //引入cdn
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <div id="app"></div>
    <!--挂在元素--->
    <script type="text/javescript">
      	// 创建元素
         let el = React.createElement('h1',{id:"h1"},"hello")
         //等同于 <h1 id="h1">hello</h1> 
         //挂载元素
         ReactDom.render(el,document.querySelector("#app"))
    </script>
</body>
</html>

主流行的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主流行的写法</title>
    //引入cdn
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>	
    <div id="app">写在这里的东西不会被解析</div>
   	<script type="text/babel">//这块要改成text/babel，按照jsx解析	
  		 let el = <h1 id="h1"><p>hello<p></h1>	//这里可以解析p标签
  		 ReactDom.render(el,document.querySelector("#app"))
    </script>
</body>
</html>

JSX

jsx与JSON的区别

JSON
{
	"name":"zhangsan",
	"age":20,
	firends:["范冰冰"，"李冰冰"]
}
XML
<name>zhangsan</name>
<age>20</age>
<friends>
	<friend>范冰冰</friemd>
	<friend>李冰冰</friemd>
</friends>

解析变量用:{}
使用的注意：
- 1.不能用 if 需要用三目运算
- 2.不能渲染对象会报错
- 3.渲染数组会变成字符串，我们通过把字符串变成有标签的react元素
- 4.驼峰命名 class — className

react都是有组件构成

有状态组件有状态有生命周期 class

<div id="app"></div>
    <script type="text/babel">
        es6类 继承
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    num: 0,
                    str: "hello"
                }
            }
            render() {
                let { num, str } = this.state
                return <div>
                    <div>数字 ：{num}</div>
                    <div>字符串:{str}</div>
                </div>
            }
        }
        ReactDOM.render(<App />, document.getElementById("app"))

无状态组件函数组件只负责展示

 // 函数组件只能看 （只能显示状态）
            function App ({til,arr}) {
                return <div> 
                             <div> 我是函数组件  --- {til}  ---- </div>
                             <ul> {arr.map((item,i)=> <li key={i}>{item}</li>)}</ul>
                      </div>
            }
ReactDOM.render( <App til="哈喽" arr={['javascript','css',"html"]} /> ,document.getElementById("app"))

安装react项目(脚手架)

安装：npx create-react-app 项目名或npm i create-react-app -g,create-react-app 项目名
启动：npm start

常蓬cium

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React框架

文章目录react开始概念安装JSXreact都是有组件构成有状态组件有状态有生命周期 class无状态组件函数组件只负责展示安装react项目React出版方:Facebook(脸书)终端的分类:1.原生App:就是用原生语言开发的(如安卓，ios)，性能最高，其它不如混合App2.混合App:采用的原因是审核，维护就是原生(调用硬件) + H5(欠缺调用硬件的能力)3.webApp 移动端性能差，界面不精致react开始概念
复制链接

扫一扫