乘风破浪React—01React初体验

React的起源

React起源于facebook公司工程师开发时的一个bug,三个消息提示图标右上角的数字显示实时未读消息的数目,过多的操作容易产生问题。

工程师很轻易的排查并解决的bug,但是他们不满足于这个小问题的解决,开始思考出现这种错误背后的原因:

1、传统开发存在问题
  • 过多关注操作界面的细节,同时需要借助jQuery来操纵大量原生DOM
  • 数据是分散的,不利于管理维护
2、解决方法
  • 组件化划分
  • 以jsx维护UI样式
  • 数据集中管理,state来储存组件内部状态,发生变化时再重新渲染页面
3、React特点
  • 声明式编程:UI=F(state)
    F就是render函数
    • 命令式编程:描述详细路径,例如:一步一步执行for循环
    • 声明式编程:告知目的地,例如:map函数直接告诉程序想要什么
  • 组件化开发
  • 多平台适配

React开发依赖

1、依赖三个库
  • react:核心库,提供核心函数、类
  • react-dom:根据端(web/native)不同,渲染为不同的组件
  • babel:将jsx语法解析为js语法,将es6语法解析为js5语法

在这里插入图片描述

开始只有react库, 后来为了区分web和native,将web和native的核心代码从react中分离出来成为react-dom

  • web端:react-dom会将jsx最终渲染成真实dom,显示在浏览器中
  • native端:react-dom将jsx渲染成原生控件(比如安卓中的Button和IOS中的UIButton)
2、引入三个库

方式一:html文档头引入三个库

    <!-- 安装依赖 -->
    <!-- crossorigin允许远程跨域版本的错误信息在本地也显示出来 -->
    <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>

方式二:本地下载react包并引入
方式三:使用npm包管理工具安装react脚手架


React初体验

开发如下小页面:h2标签展示文字Hello World,点击按钮改变文本,Hello World变为Hello React
在这里插入图片描述

1、babel使用

需要配置script标签属性为type="text/babel"才可以识别jsx语法

<script type="text/babel"></script>
2、react-dom使用

使用react-dom库中ReactDOM.render函数,将编写的React组件挂载到页面上
第一个入参为:React组件,使用jsx语法
第二个入参为:要挂载到的DOM容器,注意是以替换方式挂载,原来<div id="app"></div>内容会被替换掉
第三个入参为:回调函数,可选,可有可无

<body>
    <div id="app"></div>

    <script type="text/babel">
      let message = "Hello World";

      const handleBtnClick = () => {
        message = "Hello React";
      };

      ReactDOM.render(
        <div>
          <h2>{message}</h2>
          <button onClick={handleBtnClick}>改变文本</button>
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>

存在问题:点击按钮,message改变,但是页面不会重新渲染,所以需要使用react库来管理数据

3、react使用

引入React.Component类作为组件App的父类

  • App类继承父类的render方法,该方法返回一个jsx语法写的html标签,与ReactDOM.render配合使用
  • App类继承父类的setState方法,修改数据后启动页面重新渲染
    在这里插入图片描述

总结

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现点击商品跳转到详情页的功能,你可以使用React Router库来管理路由。首先,你需要在你的应用程序中安装React Router,然后在你的代码中导入它。 然后,你可以创建一个商品列表组件,这个组件会显示所有的商品。在这个组件中,你可以使用React Router的Link组件创建每个商品的链接,这个链接会在被点击时跳转到对应的商品详情页。例如: ```jsx import { Link } from "react-router-dom"; function ProductList({ products }) { return ( <div> {products.map(product => ( <div key={product.id}> <h2>{product.name}</h2> <p>{product.description}</p> <Link to={`/products/${product.id}`}>View details</Link> </div> ))} </div> ); } ``` 这个Link组件会渲染成一个a标签,当它被点击时,React Router会在应用程序的URL中添加商品ID,例如"/products/123",并加载相应的商品详情组件。 接下来,你需要在你的应用程序中定义路由规则,以告诉React Router应该在哪些URL上加载哪些组件。这可以在应用程序的根组件中完成,例如: ```jsx import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; function App() { return ( <Router> <Switch> <Route path="/products/:productId"> <ProductDetails /> </Route> <Route path="/"> <ProductList products={...} /> </Route> </Switch> </Router> ); } ``` 这个例子中,我们定义了两个路由规则,一个是匹配"/products/:productId"的,另一个是匹配根路径"/"的。当URL匹配到这些规则时,React Router会加载相应的组件。 希望这可以回答你的问题!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值