create-react-app 教程2 创建一个自定义的组件

紧接上文

如果我们要创建一个自定义的组件来使用可以这样做

在src下创建components/Button

在Button目录下创建 Button.css 和Button.js

Button.js内容

  

   

    

     

    
    

     

      import React ,{Component} from 'react'
     
    
   

    

     

    
    

     

      import './Button.css'
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      class Button extends Component {
     
    
   

    

     

    
    

     
  render() {
     
    
   

    

     

    
    

     
    return <div className="Button">按钮组件</div>
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      export default Button
     
    
  
 

Button.css内容

  

   

    

     

    
    

     

      .Button{
     
    
   

    

     

    
    

     
  padding: 20px;
     
    
   

    

     

    
    

     
  background-color: blue;
     
    
   

    

     

    
    

     
  color: #ffffff;
     
    
   

    

     

    
    

     

      }
     
    
  
 

在App.js中使用

  

   

    

     

    
    

     

      // 引入组件
     
    
   

    

     

    
    

     

      import Button from './components/Button/Button'
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      // 使用组件
     
    
   

    

     

    
    

     

      <Button/>
     
    
  
 

打开localhost:3000 查看效果

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/108882573