前端react基础基础学习 (一)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/marendu/article/details/100091390

前端react基础基础学习 (一)

1.安装

npm i -g create-react-app

2.创建项目骨架

create-react-app

react 组件创建方式

1.箭头函数的方式

/ 第一种创建react组件的方式，箭头函数, 调用的时候，可以直接使用xml语法 <App 在这里通过属性和值的方式来传递参数，如: id={123} />

const App = (props) => {
  // 注意这里如果是多行，必须用 小括号 小括号 小括号
  return (
    <div id="app">
      <h1>Hello {props.id} {props.name}</h1>
      {dateEle}
    </div>
  )
}

2.class的方式

第二种创建react组件的方式，使用es6的class, 继承 React.Component

// 在调用的时候，实际上就不再使用函数式的来执行函数，而是new了一个实例出来，所以在获取参数的时候，需要使用this.props.xxxx

class App extends React.Component {
  render() {
    const {
      id,
      name
    } = this.props
    return (
      <div id="app">
        <h1>hello {id} {name}</h1>
      </div>
    )
  }
}

3.插值

<div data-id={id} >
    {/* 在jsx的语法中，如果想要再插入js, 就需要加{} */}
    <h1>你好，{name}, {125 * 2}</h1>
  </div>

4.引入用improt 导出用export

目录结构

子组件放在components目录下，每个组件就是一个文件夹，在下方创建js；

在components下创建一个index.js 用来导出所有组件，

export { default as Header } from './Header'
export { default as List } from './List'
export { default as MyInput } from './MyInput'

引入时，

import {
    Header,
    Todolist,
    Todoitem
} from './components'

时，

import {
    Header,
    Todolist,
    Todoitem
} from './components'