reactjs 编写一个简单的图片轮播图

知识点总结

• 本地图片路径加载
• 组件的两种形式 方法组件 类组件
• prop state
• createClass 已废弃
• create-react-app 脚手架
• react 获取DOM 节点

文件结构

App.js 代码

import React, { Component } from 'react';
import './App.css';

//方法Btns组件
function Btns() {
  return (
    <ul id="btns">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  );
}

//方法Imgs 组件
function Imgs() {
  return (
    <ul id="imgs">
        <li><img alt="图片1" src={require('./images/banner1.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner2.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner3.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner4.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner5.jpg