React脚手架、组件基础总结

React脚手架的使用

React脚手架意义

1、脚手架是开发现代Web应用的必备。
2、充分利用web pack、Babel、ESLint等工具辅助项目开发。
3、零配置无需手动配置繁琐的工具即可使用。
4、关注业务，而不是工具配置。

React脚手架初始化项目

1、初始化项目：命令：npx create-react-app my-app。(npx是npmv5.2.0引入的一条命令)
2、启动项目：在项目根目录执行命令npm start。

在脚手架中使用React

1、导入react和react-dom两个包。

import React from 'react'
import ReactDOM from 'react-dom'

2、调用React.createElement( ）方法创建react元素。
3、调用React DOM.render( )方法渲染react元素到页面中。

项目的默认目录

React组件基础

模块化和组件化的区别

• 模块：向外提供特定功能的js程序, 一般就是一个js文件，达到复用代码的目的。当应用的js都以模块来编写的, 这个应用就是一个模块化的应用。
• 组件：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，组件是一个资源的集合，不仅仅包括js文件。当应用是以多组件的方式实现, 这个应用就是一个组件化的应用。

组件的两种创建方式

函数组件

      使用函数（或箭头函数）创建的组件叫做函数组件。
● 函数名称必须以大写字母开头。react以此来区分组件和普通的react元素。使用函数名作为组件标签名
● 函数组件必须有返回值，表示该组件的结构
● 如果返回值是null，表示不渲染任何内容

// 普通函数创建组件
function Hello() {
   
  console.log(this) // undefined，在严格模式下，禁止this指向全局对象
  return (
    <h1>hello</h1>
  )
}
ReactDOM.render(<Hello></Hello>, document.getElementById('root'))

// 使用箭头函数创建组件
const Hello = () => <div>函数组件哦</div>;

类组件

      使用ES6的class创建的组件叫做类组件。
● 类名必须以大写字母开头
● 类组件应该继承React.Component父类，从而可以使用父类中的属性和方法
● 类组件必须提供render()方法
● render()方法必须有返回值，表示组件的结构。如果不想渲染任何内容，也要返回null

class Hello extends React.Component {
   
  render() {
   
    return (
      <div>这是类组件</div>
    )
  }
}
ReactDOM.render(<Hello/