React学习第一周

2019-11-25 260 阅读1分钟

React学习第一周

React 使用 JSX 来替代常规的 JavaScript。JSX 全称为 javascript + xml。JSX具有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

 Vue.component('Hello',{
    data () {
      return {
        msg: 'Hello React '
      }
    }
    template: '<div> {{ msg }} </div>'
  })

React组件 React组件分为两种：函数式组件和类组件。

类组件：

export default class ClassComp extends Component {
  render() {
    return (
      <Fragment>
        <p> 类组件 </p>
      </Fragment>
    )
  }
}

函数式组件：

const FunctionComp = props => <div>
  函数式组件
</div>

注意事项：

命名规范：组件起名用要大驼峰命名法
React中样式是没有独立作用域的

React样式添加

行内样式
类名形式用 classname 来绑定
样式组件 styled-components