30天入坑React ---------------day05 Data-Driven

最新推荐文章于 2024-06-19 17:51:56 发布
最新推荐文章于 2024-06-19 17:51:56 发布
阅读量249 收藏
点赞数 1
分类专栏： React React入门30天

这篇文章是30天React系列的一部分 。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

30天的React Mini-Ebook

数据驱动

在Github上编辑此页面

我们的应用程序中的硬编码数据并不完全理想。今天，我们将我们的组件设置为由数据驱动，以便访问外部数据。

通过这一点，我们编写了第一个组件并将它们设置为子/父关系。但是，我们还没有将任何数据绑定到我们的React组件。虽然在React中编写网站是一种更愉快的体验（我们认为），但我们还没有利用React的强大功能来显示任何动态数据。

让我们今天改变。

走向数据驱动

回想一下，昨天我们构建了包含标题和活动列表的时间轴组件的开头：

我们将演示分解为组件，最后使用静态JSX模板构建了三个独立的组件。每当我们对网站数据进行更改时，必须更新我们组件的模板并不是很方便。

相反，让我们给出用于显示的组件数据。让我们从<Header />组件开始。就目前而言，该<Header />组件仅显示元素的标题Timeline。这是一个很好的元素，能够在页面的其他部分重用它会很好，但标题Timeline对于每次使用都没有意义。

让我们告诉React我们希望能够将标题设置为其他内容。

介绍道具

React允许我们使用与组件相同的属性或属性，以与HTML相同的语法将数据发送到组件。这类似于将src属性传递给图像标记。我们可以考虑<img />标签的属性，因为prop我们正在设置一个名为的组件img。

我们可以在组件中访问这些属性this.props。让我们看看props行动吧。

回想一下，我们将<Header />组件定义为：

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">Timeline</span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

当我们使用<Header />组件时，我们将它放在我们的<App />组件中，如下所示：

<Header />

 

我们可以通过更新组件的使用来传递我们title作为prop的属性，<Header />将属性调用设置title为某个字符串，如下所示：

<Header title="Timeline" />

时间在我们的组件内部，我们可以title从类中的this.props属性访问此prop Header。Timeline我们可以用传入的属性替换它，而不是像在模板中那样静态地设置标题。

 

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="menuIcon">
          <div className="dashTop"></div>
          <div className="dashBottom"></div>
          <div className="circle"></div>
        </div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

我们还稍微更新了代码，以便更接近我们最终<Header />代码的样子，包括添加searchIcon一些元素来设置样式menuIcon。

现在我们的<Header />组件将显示我们在title调用组件时传入的字符串。例如，<Header />像我们这样调用我们的组件四次：

<Header title="Timeline" />
<Header title="Profile" />
<Header title="Settings" />
<Header title="Chat" />

四个<Header />组件的结果如下所示：

时间线

轮廓

设置

很漂亮，是吗？现在我们可以使用<Header />动态title属性重用该组件。

我们可以传递的不仅仅是组件中的字符串。我们可以传递数字，字符串，各种对象，甚至函数！我们将更多地讨论如何定义这些不同的属性，以便我们稍后可以构建组件api。

而不是静态设置内容和日期让我们采取Content组件并通过数据变量而不是文本设置时间轴内容。就像我们可以使用HTML组件一样，我们可以将多个props组件传递给组件。

回想一下，昨天我们定义了这样的Content容器：

class Content extends React.Component {
  render() {
    return (
      <div className="content">
        <div className="line"></div>

      {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
            Doug
          </div>

          <span className="time">
            An hour ago
          </span>
          <p>Ate lunch</p>
          <div className="commentCount">
            2
          </div>
        </div>

        {/* ... */}

      </div>
    )
  }
}

正如我们所做的那样title，让我们来看看props我们的Content组件需要什么：

  • 用户的头像图像
  • 活动的时间戳
  • 活动项目的文本
  • 评论数量

假设我们有一个表示活动项的JavaScript对象。我们将有一些字段，例如字符串字段（文本）和日期对象。我们可能有一些嵌套对象，比如a user和comments。例如：

const moment1 = {
  timestamp: new Date().getTime(),
  text: "Ate lunch",
  user: {
    id: 1,
    name: 'Nate',
    avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
  },
  comments: [
    { from: 'Ari', text: 'Me too!' }
  ]
}

就像我们将字符串标题传递给<Header />组件一样，我们可以获取此活动对象并将其直接传递给Content组件。让我们转换我们的组件，在其模板中显示此活动的详细信息。

为了将动态变量的值传递给模板，我们必须使用模板语法在模板中呈现它。例如：

class Content extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img
              alt={activity.text}
              src={activity.user.avatar} />
            {activity.user.name}
          </div>

          <span className="time">
            {activity.timestamp}
          </span>
          <p>{activity.text}</p>
          <div className="commentCount">
            {activity.comments.length}
          </div>
        </div>
      </div>
    )
  }
}

我们在render()名为destructuring的函数的第一行中的类定义中使用了一些ES6 。以下两行在功能上是等效的：

// these lines do the same thing
const activity = this.props.activity;
const {activity} = this.props;

解构允许我们以更短，更紧凑的方式节省打字和定义变量。

然后，我们可以通过将对象作为prop而不是硬编码字符串传递来使用此新内容。例如：

<Content activity={moment1} />

太棒了，现在我们的活动项目由一个对象驱动。但是，您可能已经注意到我们必须使用不同的注释多次实现此操作。相反，我们可以将一组对象传递给一个组件。

假设我们有一个包含多个活动项的对象：

 

const activities = [
  {
    timestamp: new Date().getTime(),
    text: "Ate lunch",
    user: {
      id: 1, name: 'Nate',
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: 'Ari', text: 'Me too!' }]
  },
  {
    timestamp: new Date().getTime(),
    text: "Woke up early for a beautiful run",
    user: {
      id: 2, name: 'Ari',
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: 'Nate', text: 'I am so jealous' }]
  },
]

我们可以<Content />通过传递多个活动而不是仅仅一个来重新表达我们的用法：

<Content activities={activities} />

但是，如果我们刷新视图，则不会显示任何内容！我们需要先更新我们的Content组件以接受多个活动。正如我们之前所了解的，JSX实际上只是由浏览器执行的JavaScript。我们可以在JSX内容中执行JavaScript函数，因为它将像我们的其他JavaScript一样由浏览器运行。

让我们将活动项目JSX移动map到我们将为每个项目运行的函数的函数内部。

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        {activities.map((activity) => {
          return (
            <div className="item">
              <div className="avatar">
                <img
                  alt={activity.text}
                  src={activity.user.avatar} />
                {activity.user.name}
              </div>

              <span className="time">
                {activity.timestamp}
              </span>
              <p>{activity.text}</p>
              <div className="commentCount">
                {activity.comments.length}
              </div>
            </div>
          );
        })}

      </div>
    )
  }
}

现在我们可以将任意数量的活动传递给我们的数组，Content组件将处理它，但是如果我们现在离开组件，那么我们将有一个相对复杂的组件处理包含和显示活动列表。像这样离开它真的不是React方式。

ActivityItem

在这里，编写一个组件以包含显示单个活动项目的意义，然后Content我们可以转移责任，而不是构建一个复杂的组件。这也将使测试，添加功能等更容易。

让我们更新我们的Content组件以显示组件列表ActivityItem（我们将在下一步创建）。

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        {activities.map((activity) => (
          <ActivityItem
            activity={activity} />
        ))}

      </div>
    )
  }
}

这不仅更简单，更容易理解，而且可以更轻松地测试这两个组件。

使用我们新鲜的Content组件，让我们创建ActivityItem组件。由于我们已经为此创建了视图，因此ActivityItem我们需要做的就是从Content组件的模板中复制它作为自己的模块。

class ActivityItem extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      <div className="item">
        <div className="avatar">
          <img
            alt={activity.text}
            src={activity.user.avatar} />
          {activity.user.name}
        </div>

        <span className="time">
          {activity.timestamp}
        </span>
        <p>{activity.text}</p>
        <div className="commentCount">
          {activity.comments.length}
        </div>
      </div>
    )
  }
}

最后是我的实践代码:

文档目录

创建文件

  1. Timeline.css
  2. NewTimeline.html
  3. UpdateTimeline.html

最后在浏览器打开以上的html代码即可运行

作者本人的代码封装的很好,值得学习

PS: 当然,你也要去配置react环境才行   :)

Timeline.css


.notificationsFrame {
  z-index: 2;
  width: 100%;
  top: 20px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  font-family: 'Open Sans', Helvetica, sans-serif;
  margin-bottom: 40px;
}
 .notificationsFrame.show-menu {
  transform: translate3d(150px, 0, 0);
}

 .notificationsFrame .searchInput {
  border: 10px solid red;
  box-sizing: border-box;
  position: absolute;
  top: 13px;
  right: 55px;
  width: 200px;
  height: 34px;
  border-radius: 17px;
  border: none;
  background: #fff;
  padding: 0 17px;
  font-size: 13px;
  color: #666;
  transition: all 0.3s ease-in-out;
  transform: translateX(15px);
  opacity: 0;
  pointer-events: none;
}

 .notificationsFrame .searchInput:focus {
  outline: none;
}

 .notificationsFrame .searchInput.active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

 .notificationsFrame .header {
  position: relative;
  height: 60px;
  background: #5f98cd;
  padding-top: 0;
}

 .notificationsFrame .header .menuIcon {
  position: absolute;
  width: 29px;
  height: 15px;
  top: 23px;
  left: 20px;
  cursor: pointer;
}

 .notificationsFrame .header .menuIcon:hover .dashTop,
 .notificationsFrame .header .menuIcon:hover .dashBottom,
 .notificationsFrame .header .menuIcon:hover .circle {
  background: #fff;
}

 .notificationsFrame .header .menuIcon .dashTop {
  position: absolute;
  width: 20px;
  height: 3px;
  top: 0;
  left: 0;
  background: #b2daff;
  border-radius: 3px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

 .notificationsFrame .header .menuIcon .dashBottom {
  position: absolute;
  width: 20px;
  height: 3px;
  top: 0;
  left: 0;
  background: #b2daff;
  border-radius: 3px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 29px;
  top: auto;
  bottom: 0;
}

 .notificationsFrame .header .menuIcon .circle {
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 4px;
  top: -2px;
  right: 0;
  background: #b2daff;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

 .notificationsFrame .header .title {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding-top: 20px;
}

 .notificationsFrame .header .searchIcon {
  position: absolute;
  z-index: 3;
  font-size: 21px;
  color: #fff;
  top: 18px;
  right: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

 .notificationsFrame .header .searchIcon:hover {
  color: #fff;
}

 .notificationsFrame .content {
  position: relative;
  height: 100%;
  overflow: hidden;
}

 .notificationsFrame .content .line {
  position: absolute;
  top: 0;
  left: 40px;
  bottom: 0;
  width: 3px;
  background: #ebebeb;
}

 .notificationsFrame .content .item {
  position: relative;
  z-index: 2;
  margin: 20px 30px 30px 70px;
  display: block;
  /*border-radius: 50%;
   border: 5px solid #ecf0f1;
   box-sizing: border-box;
   position: absolute;
   height: 20px;
   width: 20px;
   background: #fff;
   border: 2px solid #5F98CD;
   box-shadow: 0 0 0 3px #fff;*/
}

 .notificationsFrame .content .item:hover {
  color: #5f98cd;
  cursor: pointer;
}

 .notificationsFrame .content .item .circle {
  box-sizing: border-box;
  position: absolute;
  height: 11px;
  width: 11px;
  background: #fff;
  border: 2px solid #5f98cd;
  box-shadow: 0 0 0 3px #fff;
  border-radius: 6px;
  top: 0;
  left: -20px;
}

 .notificationsFrame .content .item .avatar {
  position: absolute;
  height: 40px;
  width: 40px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  left: -49px;
}

 .notificationsFrame .content .item .avatar img {
  width: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

 .notificationsFrame .content .item .time {
  display: block;
  font-size: 11px;
  line-height: 11px;
  margin-bottom: 2px;
}

 .notificationsFrame .content .item p {
  font-size: 15px;
  line-height: 20px;
  margin: 0px 40px 0px 0px;
  font-family: 'Open Sans', Lora, Times, no-serif;
}

 .notificationsFrame .content .item p b {
  font-weight: 600;
}

 .notificationsFrame .content .item .right {
  position: absolute;
  right: 5px;
  font-size: 11px;
  top: 11px;
}

 .notificationsFrame .content .item .commentCount {
  position: absolute;
  right: 15px;
  font-size: 12px;
  top: 11px;
}

 .notificationsFrame .content .item .commentCount:after {
  content: "\f075";
  font-family: FontAwesome;
  position: absolute;
  font-size: 20px;
  color: #ebebeb;
  top: -50%;
  left: 100%;
  margin-left: 10px;
  z-index: 3;
}

 .notificationsFrame .content .item .commentCount:hover:after {
  color: lightblue;
}

 .notificationsFrame .footer {
  position: relative;
  background: #fff;
  margin: auto;
  height: 30px;
  border-top: 1px solid #eee;
  width: 100%;
  border-radius: 10px;
}

 .notificationsFrame .footer button {
  background: #eee;
  position: absolute;
  width: 100%;
  right: 0px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  border: 0;
}

 .notificationsFrame .footer button i {
  margin: 0 10px;
}

2.NewTimeline.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello world</title>
    <link href='Timeline.css' rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Script tags including React -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
    class Header extends React.Component {
        render() {
            return (
                <div className="header">
                    <div className="menuIcon">
                        <div className="dashTop"></div>
                        <div className="dashBottom"></div>
                        <div className="circle"></div>
                    </div>


                    <span className="title">
                    {/* Timeline */}
                        {this.props.title}
                    
                    </span>

                    <input
                        type="text"
                        className="searchInput"
                        placeholder="Search ..." />

                    <div className="fa fa-search searchIcon"></div>
                </div>
            )
        }
    }
    const moment1 = {
        timestamp:new Date().getTime(),
        text:"Ate lunch",
        user:{
            id: 1,
            name: 'Nate',
            avatar:"http://www.croop.cl/UI/twitter/images/doug.jpg"
        },
        comments: [
            {from:'Ari', text:'Me too!'}
        ]
    }
    class Content extends React.Component{
        render(){
            // these lines do the same thing
            // const activity = this.props.activity;
            //const {activity}= this.props; 

            //{}对象作为 activities
            const {activities}= this.props; // ES6 destructuring
            return (
                <div className="content">
                    <div className="line"></div>
                {/* Timeline item */}
                {/* 使用map是将数组转化为map 
                *使用地图重新格式化阵列中的对象(activity) 叫obj也可以
                *对每一个对象进行操作
                */}
                {activities.map((activity) =>{
                    return(
                        <div className="item">
                        <div className = "avatar">
                            <img
                            alt={activity.text}
                            src={activity.user.avatar} />
                            {activity.user.name}
                        </div>

                        <span className = "time">
                        {activity.timestamp}
                        </span>

                        <p>{activity.text}</p>

                        <div className="commentCount">
                        {activity.comments.length}
                        </div>
                     </div>
                    );
                })}
                    {/* ... */}
            </div>

            )
        }
    } 
    //使用一个包含多个活动项的对象
    const activities = [
        {
            timestamp:new Date().getTime(),
            text:"Ate lunch",
            user:{
            id: 1,name: 'Nate',
            avatar:"http://www.croop.cl/UI/twitter/images/doug.jpg"
            },
        comments: [{from:'Ari', text:'Me too!'}]
        },
        {
            timestamp:new Date().getTime(),
            text:"Woke up early for a beautiful run",
            user:{
            id: 2,name: 'Ari',
            avatar:"http://www.croop.cl/UI/twitter/images/doug.jpg"
            },
        comments: [{ from: 'Nate', text: 'I am so jealous'}]
        },
    ]
      class App extends React.Component {
        render() {
             return (
                 <div className="notificationsFrame">
                    <div className="panel">
                     {/* content goes here */}
                        <Header  title="Timeline1"/>
                        <Header  title="Profile"/>
                        <Header  title="Settings"/>
                        <Header  title="Timeline1"/>
                        <Content activities = {activities}/>
                    </div>
                 </div>
             )
            }
        }
      var mount  = document.querySelector('#app');
      ReactDOM.render(<App />, mount);
  </script>
</body>

</html>

3.UpdateTimeline.html

<!-- 让我们更新我们的Content组件以显示组件列表ActivityItem-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello world</title>
    <link href='Timeline.css' rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Script tags including React -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
    class Header extends React.Component {
        render() {
            return (
                <div className="header">
                    <div className="menuIcon">
                        <div className="dashTop"></div>
                        <div className="dashBottom"></div>
                        <div className="circle"></div>
                    </div>


                    <span className="title">
                    {/* Timeline */}
                        {this.props.title}
                    
                    </span>

                    <input
                        type="text"
                        className="searchInput"
                        placeholder="Search ..." />

                    <div className="fa fa-search searchIcon"></div>
                </div>
            )
        }
    }
    const moment1 = {
        timestamp:new Date().getTime(),
        text:"Ate lunch",
        user:{
            id: 1,
            name: 'Nate',
            avatar:"http://www.croop.cl/UI/twitter/images/doug.jpg"
        },
        comments: [
            {from:'Ari', text:'Me too!'}
        ]
    }
    class Content extends React.Component{
        render(){
            const {activities}= this.props; // ES6 destructuring
            return (
                <div className="content">
                    <div className="line"></div>
                {/* Timeline item */}
                {activities.map((activity) =>
                    return(
                        <ActivityItem 
                            activity = {activity}
                        />
                    ))}
                    {/* ... */}
            </div>

            )
        }
    } 
    class ActivityItem extends React.Component{
        const {activity} = this.props;//ES6 destructuring
        render(){
            return (
                <div className="item">
                        <div className = "avatar">
                            <img
                            alt={activity.text}
                            src={activity.user.avatar} />
                            {activity.user.name}
                        </div>

                        <span className = "time">
                        {activity.timestamp}
                        </span>

                        <p>{activity.text}</p>

                        <div className="commentCount">
                        {activity.comments.length}
                        </div>
                     </div>
            )
        }
    }
    //使用一个包含多个活动项的对象
    const activities = [
        {
            timestamp:new Date().getTime(),
            text:"Ate lunch",
            user:{
            id: 1,name: 'Nate',
            avatar:"http://www.croop.cl/UI/twitter/images/doug.jpg"
            },
        comments: [{from:'Ari', text:'Me too!'}]
        },
        {
            timestamp:new Date().getTime(),
            text:"Woke up early for a beautiful run",
            user:{
            id: 2,name: 'Ari',
            avatar:"http://www.croop.cl/UI/twitter/images/doug.jpg"
            },
        comments: [{ from: 'Nate', text: 'I am so jealous'}]
        },
    ]
      class App extends React.Component {
        render() {
             return (
                 <div className="notificationsFrame">
                    <div className="panel">
                     {/* content goes here */}
                        <Header  title="Timeline1"/>
                        <Header  title="Profile"/>
                        <Header  title="Settings"/>
                        <Header  title="Timeline1"/>
                        <Content activities = {activities}/>
                    </div>
                 </div>
             )
            }
        }
      var mount  = document.querySelector('#app');
      ReactDOM.render(<App />, mount);
  </script>
</body>

</html>

本周，我们使用React props概念更新了由数据驱动的组件。在下一节中，我们将深入研究有状态组件。

学习REACT正确的方法

React和朋友的最新，深入，完整的指南。

下载第一章

下一章：

状态(State)

https://blog.csdn.net/qq_35812380/article/details/83011062

本教程系列的完整源代码可以在GitHub repo上找到，其中包括所有样式和代码示例。

如果您在任何时候感到困难，还有其他问题，请随时通过以下方式与我们联系：

 

学习构建真正的React应用程序

想了解如何在生产应用程序中使用React？点击下面的电子邮件，我们将通过电子邮件向您发送PDF文件，引导您在React中逐步构建应用程序 - 从空文件夹到工作应用程序。

名字

 

电子邮件地址

  发送我的PDF

没有垃圾邮件，很容易取消订阅。

 

资源

其他产品

保持联系

  • Morgan Pierson • 2 years ago

    I agree with Floyd. It seems like you kind of skip the webpack portion of setting up this react app, which results in a lack of any sort of visual confirmation that my code is correct.

    Reply

     

小李科技
关注
专栏目录
哈士奇观狂神说-SpringMVC所记笔记
Bug_Dogg的博客
03-12 336
哈士奇观狂神说-SpringMVC所记笔记
30天入坑React ---------------day30 More Resources
小李科技
11-12 321
This post is part of the series 30 Days of React. In this series, we're starting from the very basics and walk through everything you need to know to get started with React. If you've ever wanted...
WHAT - React 学习系列（六）- Managing state
weixin_58540586的博客
06-19 1013
React and Managing state.
OA协同办公系统-day01
qq_43058317的博客
10-01 626
文章目录前言1.技术2.数据库表3. 搭建ssm环境：总结 前言 1.技术 1.使用技术： 主体架构： Spring+springMVC+Mybatis（处理业务技术） Redis： 缓存（把我们经常使用的数据放入redis）减轻db压力（商城项目） Shiro： 权限框架（根据用户登录角色完成菜单导航）处长 主任 科员。 Echars： 图表工具，数据统计. Ueditor:图文混排 论坛【富文本】 阿里巴巴的druid数据源： 稳定 高效 世界上最好的数据源技术 页面主体：bootstarp.
2021-07-02 swift大礼包
一个帅气潇洒的豆子
07-02 6408
全面的Swift学习资料整理_walkerwqp的博客-CSDN博客 全面的Swift学习资料整理 ...
Rust-weekly-2019-05-09
weixin_34356555的博客
05-10 140
awesome-nodejs
ccf19881030的专栏
10-12 2280
awesome-nodejsContentsPackagesMad scienceCommand-line appsFunctional programmingHTTPDebugging / ProfilingLoggingCommand-line utilitiesBuild toolsHardwareTemplatingWeb frameworksDocumentationFilesystemControl flowStreamsReal-timeImageTextNumberMathDateURLDa
A002-185-2502-李林
m0_50973829的博客
01-03 2945
作业A001-185-2502-李林 课程名称 软件需求分析与建模 班级 18软件工程5班 教导教师 董瑞生 李林 1814080902502 日期 2020.12.15 目录 作业内容目录一、个人查找档总结Requirements baseline（需求基线） 一、个人查找档总结 Requirements baseline（需求基线） ...
Building global event-driven applications
weixin_46812959的博客
11-23 396
hello. hello and welcome to this session building global event driven applications. my name is marcia villalba. i'm part of the developer relations teams for the s team in a les and i've been doing s os since it's early beginning in production. so early 20
Reactive Design Patterns
09-07
Unlike traditional enterprise applications that enforce highly-structured pathways for data and procedures, Reactive applications are built around loosely-coupled, asynchronous components that 'react'...
51-2 万字长文，深度解读端到端自动驾驶的挑战和前沿
AIgraphX
02-19 2962
自动驾驶社区见证了采用端到端算法框架的快速增长，这些方法利用原始传感器输入来生成车辆运动规划，而不是专注于检测和运动预测等单个任务。我们对250多篇论文进行了全面分析，深入研究了几个关键挑战，包括多模态、可解释性、因果混淆、稳健性和世界模型等，还讨论了大模型和视觉预训练的当前进展，以及如何将这些技术纳入端到端的自驾框架。
Python应用开发——30天学习Streamlit Python包进行APP的构建（4）
此星光明博客
05-30 792
嘿，Streamlit 人！我很荣幸今天能够有机会为“30 天学 Streamlit”挑战来做这个实操教程！要是用这个 Streamlit 应用，只需要在文本输入框中复制粘贴进一个 YouTube 链接即可。总的来说，我们已经见识到了如何创建一个 Streamlit 应用，通常首先是明确和确定需求问题。然后我们设计一个解决方案将问题拆解为细粒度的步骤，然后我们在 Streamlit 应用中逐步实现。此时我们同样需要决定用户需要输入的数据或者信息、处理用户输入的方式方法，才能产出满意的结果。
【Bard vs. GPT-4】谷歌一雪前耻！全新PaLM 2反超GPT-4，办公全家桶炸裂升级，Bard史诗进化
热门推荐
AI天才研究院
05-12 1万+
在人工智能领域，自然语言处理一直是一个备受关注的领域。近日，谷歌发布了全新的PaLM 2，这一新技术一经问世，就引起了广泛的关注。PaLM 2是谷歌在自然语言处理领域的一项重要突破。它不仅可以用于文本生成，还可以用于文本分类、问答系统等方面。与此同时，PaLM 2还具有极强的语言理解能力，可以理解语言中的上下文关系，从而更好地进行文本分析和处理。与此同时，PaLM 2的发布也意味着谷歌已经成功地一雪前耻。
基于Java语言的蓝牙遥控器设计源码，支持键盘、鼠标、影音遥控器
10-05
该项目为基于Java语言的蓝牙遥控器设计源码，包含539个文件，涵盖307个Java源文件、120个XML配置文件、34个PNG图片文件、16个Gradle构建文件、12个Git忽略文件、9个文本文件、6个JAR包文件、5个JSON配置文件、5个JPG图片文件。该遥控器支持键盘、鼠标和影音控制功能，适用于多种场合。
数据手册-74HC573-datasheet.zip
10-05
数据手册-74HC573-datasheet.zip
苏州科技大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
c++的概要介绍与分析
最新发布
10-05
关于C++的资源描述和项目源码，以下是一些关键信息： 资源描述 C++是一种广泛应用于开发高性能应用程序的编程语言，既有高级语言的特性，也有低级语言的效率。以下是C++学习资源的简要描述： 在线课程：如优达学城提供的C++中级课程，以及北京大学提供的C++程序设计和C++程序设计进阶课程，这些课程适合从零开始系统学习C++，涵盖从基础到高级的编程内容。 书籍：如《C++ Primer》、《Effective C++》和《C++标准库》等，这些书籍详细介绍了C++语言的基本概念和编程技术，适合作为自学或课堂教学的参考资料。 在线社区：如CSDN博客和Stack Overflow等，这些社区提供了丰富的C++编程教程、示例代码和问题解决方案，是学习和交流C++编程技术的重要平台。 开发工具：如Visual C++（VC）等集成开发环境（IDE），提供了编译器、调试器和其他工具，方便开发者进行Windows平台上的C++应用程序开发。 项目源码 由于项目源码通常包含大量的代码文件和资源文件，且涉及版权和知识产权问题，因此无法在此直接提供完整的项目源码。不过，以下是一些获取C++项目源码的
锻压成型机_三维3D设计图纸.zip
10-05
锻压成型机_三维3D设计图纸.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值