React之入门第（一）篇创建项目项目结构预览项目启动基本语法 react 中的类名是 className 而非

创建项目

npx create-react-app 项目名称

项目结构预览

入口文件（index.js）

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

项目启动

npm run start

基本语法

react 中的类名是 className 而非 class

2. js需要写在{ }中

注意：这里遍历用的 map，如果用 forEach 是没有效果，我们需要有一个返回值给到外层的 { }

jsx 不能存在if语句，可写 三元运算 或 逻辑与(&&)运算符

条件渲染组件

const flag = true

function App() {
  return (
    <div className="App">
      {/* 条件渲染标签/组件 */}
      {flag ? <span>this is span</span> : null}
    </div>
  )
}
export default App

注意：if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

样式书写

行内样式 - style

<div style={{color: 'red'}}>红色字体</div>

注意：外层 { } 是用来写 js 的，里面的 { } 是样式， red 一定要打引号，否则当成变量处理

行内对象样式 - style

const styleObj = { color: 'green' } 

function App () { 
    return ( 
        <div className="App"> 
            <h2 style={styleObj}>绿色字体</h2> 
        </div> 
     ) 
}

export default App

类名样式 - className

// App.js

import './App.css'

function App () {
  return (
    <div className="app">
      <h2 className="blue">蓝色字体</h2>
    </div>
  )
}

export default App

// App.css

.blue{
    color: blue;
}

动态绑定类名

import './App.css'

const showGreen = true

function App () {
  return (
    <div className="app">
      <h2 className={showGreen ? 'greenName' : ''}>绿色字体</h2>
    </div>
  )
}

export default App

// App.css

.greenName{
    color: green;
}

使用{ } 写 js

jsx表达式只能有一个父元素

function App () {
  return (
	  <>
	     <div className="app"></div>
       <div className="box"></div>
	  </>
  )
}

export default App

注意事项

return 里面不能有两个节点，若非要两个就用一个空的 div 包裹一下或者直接写个空的容器
jsx中的属性名采用驼峰命名法

组件名首字母一定要大写，在 react 中，一个函数就是一个组件

function HelloReact () {
    return <div>这是一个函数组件</div>
}

function App () {
    return (
        <div className="App">
            <HelloReact />
        </div>
    )
}

export default App

注意事项

当写的 html 只有一个节点时，就可以 return 时不加括号
函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
以上可以换个写法，函数放到 { } 中调用，返回给 { }

function HelloReact () {
    return <div>这是一个函数组件</div>
}

function App () {
    return (
        <div className="App">
            {
                HelloReact()
            }
        </div>
    )
}

export default App

类组件

// 引入React
import React from 'react'

// 定义类组件
class Hello extends React.Component {
  render () {
    return <div>这是我的第一个类组件!</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <Hello />
      <Hello></Hello>
    </div>
  )
}
export default App

类组件注意事项

类名称也必须以大写字母开头
类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

绑定事件

function HelloReact () {
    const handler = (e) => {
        console.log(e, '按钮被点击');
    }

    return (
        <div className="App">
            <button onClick={handler}>点我</button>
        </div>
    )
}

注意

on + 事件名称 = { 事件处理程序 } ，比如：<div onClick={ onClick }></div>
on 后面的单词采用驼峰写法，比如：onMouseEnter、onFocus

传递额外参数


import React from "react"

const TestComponent = () => {
  const list = [
    {
      id: 1001,
      name: 'react'
    },
    {
      id: 1002,
      name: 'vue'
    }
  ]
  const onDel = (e, id) => {
    console.log(e, id)
  }
  return (
      <ul>
        {list.map(item =>（
           <li key={item.id}>
                {item.name}
                <button onClick={(e) => onDel(e, item.id)}>x</button>
           </li>
        ))}
      </ul>
  )
}

function App () {
  return (
    <div>
      <TestComponent />
    </div>
  )
}


export default App

类组件的事件绑定


import React from "react"
class CComponent extends React.Component {
  // class Fields
  clickHandler = (e, num) => {
    // 这里的this指向的是正确的当前的组件实例对象 
    // 可以非常方便的通过this关键词拿到组件实例身上的其他属性或者方法
    console.log(this)
  }

  clickHandler1 () {
    // 这里的this 不指向当前的组件实例对象而指向undefined 存在this丢失问题
    console.log(this)
  }

  render () {
    return (
      <div>
        <button onClick={(e) => this.clickHandler(e, '123')}>click me</button>
        <button onClick={this.clickHandler1}>click me</button>
      </div>
    )
  }
}

function App () {
  return (
    <div>
      <CComponent />
    </div>
  )
}

export default App

外部组件

安装组件 ES7 React/Redux/GraphQL/React-Native snippets

可用快捷键 rafc或者 rsc 来迅速创建一个函数组件
也可以用 rfcp 迅速创建一个函数组件，这个有多个类型限制

安装组件 Reactjs code snippets