REACT的学习心得二：本地如何使用react创建项目和react属性

最新推荐文章于 2022-07-21 17:06:31 发布

苍煜

最新推荐文章于 2022-07-21 17:06:31 发布

阅读量322

点赞数

分类专栏： react web前端文章标签： react 组件事件

本文链接：https://blog.csdn.net/qq_41694906/article/details/101291934

版权

web前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

1:利用vscode编译工具打开创建的项目（index.html是入口文件）

4：react绑定属性（class和style）

1：class：class改为classname

2：在render中定制变量，然后再div中展示变量

3:直接在return中遍历数组

5：react事件和方法

1：定义方法和调用方法

2：在调用过程中传入参数（改变this的三种指向方法）

1:利用vscode编译工具打开创建的项目（index.html是入口文件）

在vscode中运行项目

2： react项目目录：

React是React的核心库

ReactDOM是与虚拟DOM相关的功能

import App from './App' :引入App组件

ReactDOM.render(<App />, document.getElementById('root'));把App组件渲染到root节点上

3：创建组件（{}可以绑定数据）

1：创建

1：工厂无状态函数

2：es6的class

2：引用和调用：

1：引用：

2：调用：

3:Props和State的区别

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

class WebSite extends React.Component {
  constructor() {
      super();

      this.state = {
        name: "菜鸟教程",
        site: "https://www.runoob.com"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}



class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);
</script>

</body>
</html>

4：绑定数据和绑定对象

4：react绑定属性（class和style）

1：class：class改为classname

2：style：

3：for换成htmlfor

4：react引入图片

1：引入本地图片

2：引入远程图片

5：循环数组

1：数组中是标签

2：在render中定制变量，然后再div中展示变量

3:直接在return中遍历数组

5：react事件和方法

1：定义方法和调用方法

2：在调用过程中传入参数（改变this的三种指向方法）

1：在调用时通过bind绑定this

run(){

alert(this.state.name)

}

2：在构造函数中指定

在构造函数中：this.run = this.run.bind(this)

3:通过箭头函数

run= () => {

alert(this.state.name)

}

3:改变state的值

1：静态改变

2：动态改变参数值

苍煜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
REACT的学习心得二：本地如何使用react创建项目和react属性

目录1:利用vscode编译工具打开创建的项目（index.html是入口文件）2： react项目目录：3：创建组件（{}可以绑定数据）1：创建1：工厂无状态函数2：es6的class2：引用和调用：1：引用：2：调用：3:Props和State的区别4：绑定数据和绑定对象4：react绑定属性（class和style）1：class：clas...
复制链接

扫一扫