03-React入门的基本用法以及注意事项

React入门的基本用法已经注意事项

这几天一心在研究react，有时候也是一直在坑中，慢慢摸爬滚打中，过来的，我遇见的坑，也更大家一起分享一下。

第一个问题，就是为什么会这样子写import React, { Component } from ‘react’;

• import React, { Component } from 'react'这写法其实是可以等价于class App extends React.Component{ }
  • 我们就来分享一下，为什么要这样子
  • import {Component} from 'react' 就是等价于下面两行代码

   import React from 'react'
   const Component = React.Component
  

第二个问题，就是在render() {} 里面写 return 值的时候，不能加单引号

• 因为 render() {}这里面是JSX语法
• 在react中return中不能加单引号 return '<div>hello</div>'这个就是错误的写法, 正确的写法return <div>hello</div>
• 在return () 里面的最外层必须要弄一个<div></div> 包裹着 不然会报错的
  • 我们如何就是不想要最外面的div包裹着，我们怎么办呢？
    • 我们可以在头部加去import React,{Component,Fragment} from 'react' 就是加入Fragment占位符就可以了

      render(){
       return (
         <Fragment>
           <div>
             <input/>
             <button>提交</button>
           </div>
         
           <ul>
             <li>学习Vue</li>
             <li>学习React</li>
           </ul>
         </Fragment>
       )
      }
      

• return () 加一个括号()， 可以多行写html的代码

第三个问题，就是JSX语法中，如果我们要使用自己创建的组件，必须是大写字母开头

• import APP './APP'; 这个是正确的写法 ，如果是小写的话，JSX是不识别自定义组件的
• 自己定义了组件，但是你必须导出才能生效export default APP,这个才是可以生效的

今天就到这些吧，接下来，我会把坑，和注意事项都会跟大家一起分享，有可能我说的也是有问题的，欢迎大家，一起来谈论最优方案！一起学习，一起进步！