React基础认识简单包会

言兮的酒

已于 2022-04-05 09:18:07 修改

阅读量475

点赞数

文章标签：前端

于 2022-04-04 11:45:00 首次发布

本文链接：https://blog.csdn.net/m0_67227657/article/details/123945481

版权

起源

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

综述

react安装并运行

1、安装脚手架

//安装脚手架
npm i -g create-react-app

2、创建项目

//创建项目
crerte-react-app myreact //项目名称

3、切换到项目

cd myreact

4、运行

npm start

react基本结构

安装vs插件

根据实际情况选择，第一个必选项。

了解jsx语法

JavaScript 与（html）结合，在javascript更好的写html模板

vscode 语法识别：

接下来就可以开始工作了

react的基本结构：

//创建App组件
function App() {
  //返回一段dom节点
  return (<div>
    <h1 className="myh">你好 react</h1>
  </div>)  
}
//导出app组件
export default App;

react的应用

在App.css中写样式

//导入css
import './App.css'
//定义一个数组
const arr = [
  <p key="a">你好1</p>,
  <p key="b">你好2</p>,
  <h1 key="c">开始学习吧</h1>
]
//定义一个行内样式
const st1 = {
  fontSize: "24px",
  color: "#f70"
}

//创建App组件
function App() {
  //返回一段dom节点
  return (<div>
    <h1 className="myh">你好 react</h1>
    {arr}
    <p style={st1}>样式</p>
  </div>)
}
//导出app组件
export default App;

//jsx语法 JavaScript与html结合
//在JavaScript更好的写html模板

//01 有且只有一个根节点
//02 class用className代替
//03 数组可以放html节点,数组自动展开
//04 {} 表示javascript
//05 样式自动展开
//06 {/* 注释内容 */}

各种渲染方式

const str ="你好react";
const msg ="还是<strong>html</strong>简单";
const list =["react","vue","angular","jquery"];
let flag =true;
const score=89;
function App(){
    return (<div>
        <h1>模板语法勒</h1>
        <p>01文本渲染</p>
        <p>{str}</p>
        <p>{2+3}</p>
        <p>{str.split('').reverse().join('')}</p>
        <p>02 html渲染</p>
        <p dangerouslySetInnerHTML={{__html:msg}}></p>
        <p>03条件渲染（三目运算符,&&）</p>
        <p>{score>=60?'及格':'再来一遍'}</p>
        {flag&&<p>开门，吃饭了</p>}
        <p>04列表渲染</p>        
        {list.map((item,index)=><p key={index}>{item}</p>)}
        </div>)
}
export default App;

事件

//创建App组件
function App() {
//函数
  function say(str){
    alert("我喜欢春天"+str)
  }
  //返回一段dom节点
  return (<div>
    <h1>事件</h1>
    <p>react 事件与js事件一致，需要驼峰写法</p>
    <button onClick={()=>{alert("我喜欢春天")}}>春天</button>
    <h1>函数调用</h1>
    <button onClick={say.bind(this,"微风")}>点击微风</button>
    <button onClick={say.bind(this,"狂风")}>点击狂风</button>
    <button onClick={()=>say("风")}>点击风</button>
  </div>)
}
//导出app组件
export default App;

了解bind函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bind</title>
</head>

<body>
    <script>
        function fun(a, b) {
            console.log(a, b, this);
        }
        fun(3, 4);
        var fn = fun.bind({
            name: "mumu"
        }, 5, 7);
        fn();
        //bind 由现有的函数创建一个新的函数
        //bind第一个参数是新函数的this,后面参数是现有fun的实参
    </script>
</body>

</html>

函数

// react 响应式数据state
// 导入React 和Component方法 imrc + TAB
import React, { Component } from 'react';

// 创建一个App类 基础了Component方法 ccc+Tab
class App extends Component {
  // 构造函数
  constructor(props) {
    // 执行父类方法
    super(props);
    // 响应式状态
    this.state = {  }
  }
  // 渲染方法
  render() { 
    // 返回一个节点
    return (<div>
      <h1>函数类</h1>
    </div>);
  }
}
 
export default App;

更新数据的方式：

// react 响应式数据state
// 导入React 和Component方法 imrc + TAB
import React, { Component } from 'react';

// 创建一个App类 基础了Component方法 ccc+Tab
class App extends Component {
  // 构造函数
  constructor(props) {
    // 执行父类方法
    super(props);
    // 响应式状态
    this.state = { num:1 }
  }
  // 更新num
  addNum(n){
    this.setState({num:this.state.num+n})
  }
  // 渲染方法
  render() { 
    // 返回一个节点
    return (<div>
      <h1>函数类</h1>
      <button onClick={()=>{
        //更新num值为原来的值加1
        this.setState({num:this.state.num+1})
      }}>{this.state.num}</button>
      <button onClick={ this.addNum.bind(this,2)}>{this.state.num}</button>
    </div>);
  }
}
 
export default App;

// 更新state状态 this.setState({key:valu})
// bind 创建一个新的函数，改变this
// state状态（数据）理解为vue里面的data

言兮的酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React基础认识简单包会

起源React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。综述react安装并运行1、安装脚手架//安装脚手架npm i -g create-react-app2、创建项目//创建项目crerte-react-app myreact //项目名称 ...
复制链接

扫一扫