1-从零开始学react-认识react&jsx&props&state

keyword

React, ReactDOM, React.createElement, ReactDOM.render, JSX, props, state

初识react

• react是构建用户界面的javascript库
• react是世界范围内应用最广泛的js库

react初用

1. 引入cdn (react核心库，react-dom库)
2. react.js：核心库，提供了如组件，虚拟dom。提供了方法，React.createElement(type, props, children)
3. react-dom.js dom库，提供了和浏览器交互的dom相关功能。如dom渲染
   提供了方法：ReactDOM.render(content, container, cb)。content要渲染的内容，container要渲染的元素容器，cb，渲染完成后回调函数，不常用。
4. 注意：react-dom依赖于react核心库。

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

5. 构建视图demo

// 创建要渲染的元素
const el = React.createElement(
 "h1",
   null,
   React.createElement("p", null, "this is p ele."),
   React.createElement("p", null, "this is p ele.")
 );
 // 视图渲染
 ReactDOM.render(el, document.querySelector("#app"), () => {
   console.log("回调成功");
 });

JSX初识

什么是jsx?
是基于javascript + xml 的一个语法扩展
为什么用jsx?
要创建元素，使用React.createElement可读性差，维护性也差。jsx语法增强要渲染元素的可读性可维护性
浏览器不识别jsx，怎么办？
引入babal.js将jsx转化为浏览器可以识别的js代码。

1. jsx使用步骤（cdn引入，script标签写上类型type=“text/babel”）
2. jsx demo

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="app"></div>

<script type="text/babel">
ReactDOM.render(
	<div>
		<header>这是头部内容</header>
		<main>这是内容哦</main>
	</div>,
	document.getElementById('app')
)
</script>

JSX进阶使用

不同类型变量输出结果

• 普通字符串 // 原样输出
• 数字 // 原样输出
• 布尔值 // 不输出
• null // 不输出
• undefined // 不输出
• 数组 // 逗号被忽略，输出多个文本
• 对象 // 直接报错，编译失败

表达式

• 三目表达式
• ||
• &&

数组使用

• 注意：数组中一定要写key，不建议用index为key

const arr = [1,2,3,4,5];
<ul>
	{
		arr.map(item => {
			return <li key={item}>{item}</li>
		})
	}
</ul>

JSX其他注意点

• jsx不是字符串
• jsx不是html
  • 类名不是class, 而是 className
  • style接收对象，不接收字符串。
• jsx中标签必须闭合，单标签也要闭合
• jsx中标签必须小写字母
• jsx输出的节点必须有一个父级节点包裹
• jsx如果不想包裹的父节点渲染出来，可以用React.Fragment标签

认识react脚手架

日常开发中，都会使用脚手架提高开发效率

1. 全局安装

npm i create-react-app -g
// 或者
yarn add create-react-app global

2. 创建项目
   -注意： 项目名称不要和一些库的名字重复

create-react-app <项目名称>

3. 项目运行

npm start
// or
yarn start

react组件化开发

类组件：

1. 必须继承自React.Component
2. 必须有render方法
3. render方法，必须返回要输出的节点内容

1. 创建组件

// App.js
import React, {Component} from 'react';
class App extends Component {
  render() {
    return (
      <div>
        hello, react
      </div>
    )
  }
}
export default App; 

2. 使用组件

// index.js
import App from './App';

 ReactDOM.render(
   <App />,
   document.getElementById('root')
 );

props使用

• props是父级组件传递给子组件的值

// 父组件index.js
const arr = [1,4,5,7,0]
 ReactDOM.render(
   <App name="小美" arr={arr} />,
   document.getElementById('root')
 );

// 子组件 App.js
class App extends Component {
  render() {
    return (
    // ⚠️此处可以取到父级传入的值
    const {name, arr} = this.props;
      <div>
        hello, react
      </div>
    )
  }
}

jsx中事件

• 事件名，小驼峰eg: onClick
• jsx中this默认undefined
• 怎么让this指向组件类呢？
  • 定义函数时候使用箭头函数
    • eg: <div onClick={() => {console.log(this)}}>
  • 在constructor时候绑定this
    • eg： this.handleFn = this.handleFn.bind(this);
  • 定义函数时候直接用箭头函数定义
    • eg: handleFn = () => {// do sth…}

state使用

组件内部的状态值。可以用setState({key: value}) 来修改，修改后会自动同步视图。
定义state有2种方式

// 1. 直接在类里写state
class Xx extends Component {
  state = {
  	active: true
  };
}

// 2. 在类的constructor里定义this.state
class Xx extends Component {
  constructor(props){
  	super(props);
  	this.state = {
		active: true
	}
  }
}

• demo

// App.js
class App extends Component {
  // 定义state的2种方式, 选择一种即可
  // 1. 直接在类里写state
  // state = {
  //   active: true
  // };
  
  // 2. 在类的constructor里定义state
  constructor(props){
  	super(props);
  	this.state = {
		active: true
	}
  }
  
  render() {
    return (
    	<div>
    		<button onClick={this.handleChange}>点我切换active</button>
    		<p>当前active状态是: {this.state.active ? 'true' : 'false'}</p>
    	</div>
    )
  }
	
  // 事件定义
  handleChange = () => {
	this.setState({
		active: !this.state.active
    })
  }
}

专栏系列快速链接

1-从零开始学react-认识react&jsx&props&state
2-从零开始学react-深入state，组件通讯，生命周期，受控组件
3-从零开始学react-其他api,初识hook
4-从零开始学react-hooks相关
5-从零开始学react - react-router-dom5
6-从零开始学react - redux相关
7-从零开始学react - 全家桶项目实战