这里写自定义目录标题

学习React

学习React

安装react的脚手架

npm i create-react-app -g

通过脚手架创建demo

D:\dev_project>create-react-app react-demo
You are running Node 11.1.0.
Create React App requires Node 14 or higher.
Please update your version of Node.

说我的node版本太低了，重新换一个node版本，我的node版本是通过nvm控制的，nvm的版本是1.1.7

升级node到18.2.0的版本

安装脚手架

C:\Windows\system32>npm i create-react-app -g
npm ERR! Unexpected token '.'

查了一下资料，别人说是nvm的版本太低导致的问题，我重新安装了一下nvm到1.1.10的版本。

重新安装了nvm，升级到1.1.10的版本，再安装就没问题了。

D:\dev_project>create-react-app react-demoCreating a new React app in D:\dev_project\react-demo.Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...added 1416 packages in 1mInitialized a git repository.Installing template dependencies using npm...added 54 packages in 7s
Removing template package using npm...removed 1 package in 3sCreated git commit.Success! Created react-demo at D:\dev_project\react-demo
Inside that directory, you can run several commands:npm startStarts the development server.npm run buildBundles the app into static files for production.npm testStarts the test runner.npm run ejectRemoves this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd react-demonpm startHappy hacking!

执行npm start
能看到这样一个页面
在这里插入图片描述

把src文件夹内的文件全部删除
自己新建一个index.js

import React from 'react'
import ReactDom from 'react-dom'const element = React.createElement('h1',{id:'el'},'Hello React');ReactDom.render(element,document.getElementById('root'))

从上面的代码我们能看到我们使用react创建了h1标签元素。

我们再学习创建几个元素：

<div class="list"><h1>水果</h1><ul><li>苹果</li><li>橘子</li></ul>
</div>

写出来的代码如下：

import React from 'react'
import ReactDom from 'react-dom'const element = React.createElement('div',{className:'list'},[React.createElement('h1',null,'水果'),React.createElement('ul',null,[React.createElement('li',null,'苹果'),React.createElement('li',null,'橘子'),]),]);ReactDom.render(element,document.getElementById('root'))

得到页面
在这里插入图片描述
这种方式写代码太复杂了，看看有没有简单的方法。

import React from 'react'
import ReactDom from 'react-dom'const name = 'Jack'const element = <h1>Hello, {name}</h1>ReactDom.render(element,document.getElementById('root'))

得到页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'function combineName(person){return person.firstName + ' ' + person.lastName;
}
const Jack_Ma = {firstName: 'Jack',lastName:'Ma',
}
const name = 'Jack'
const element = (<h1>Hello,{combineName(Jack_Ma)}</h1>)
ReactDom.render(element,document.getElementById('root'))

页面
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'function combineName(person){return person.firstName + ' ' + person.lastName;
}function getGreeting(person){if(person){return <h1>Hello, {combineName(Jack_Ma)}</h1>}else{return <h1>Hello,Strange</h1>}
}const Jack_Ma = {firstName: 'Jack',lastName:'Ma',
}const Tony = nullconst name = 'Jack'const element = getGreeting(Jack_Ma)const element2 = getGreeting(Tony)ReactDom.render([element,element2],document.getElementById('root'))

页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'function tick(){const element = (<div><h1>Hello, Jack</h1><h2>It is {new Date().toLocaleTimeString()}.</h2></div>);ReactDom.render(element,document.getElementById('root'))
}
setInterval(tick,1000);

页面
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'function Welcome(props){return <h1>Hello,{props.name}</h1>
}const element = <Welcome name="Jack"></Welcome>;ReactDom.render(element,document.getElementById('root'))

页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'
class Welcome extends React.Component{render(){return <h1>Hello,{this.props.name}</h1>;}
}
const element = <Welcome name="Jack1"></Welcome>;
ReactDom.render(element,document.getElementById('root'))

页面
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'class Welcome extends React.Component{render(){return <h1>Hello,{this.props.name}</h1>;}
}function App(){return (<div><Welcome name="JAck1"></Welcome><Welcome name="JAck2"></Welcome><Welcome name="JAck3"></Welcome></div>)
}
const element = App();
ReactDom.render(element,document.getElementById('root'))

页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'class Welcome extends React.Component{render(){return <h1>Hello,{this.props.name}</h1>;}
}class App extends React.Component{render(){return (<div><Welcome name="Jack1"></Welcome><Welcome name="Jack2"></Welcome><Welcome name="Jack3"></Welcome><Welcome name="Jack4"></Welcome></div>)}
}
const element = <App></App>;ReactDom.render(element,document.getElementById('root'))

页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'class Clock extends React.Component {constructor(props){super(props);this.state = {date:new Date()}}componentDidMount(){this.timerID=setInterval(()=>this.tick(),1000)}componentWillUnmount(){clearInterval(this.timerID);}tick(){this.setState({date:new Date()})}render(){return (<div><h1>Hello,world!</h1><h1>It is {this.state.date.toLocaleTimeString()}.</h1></div>)}
}
const element = <Clock></Clock>
ReactDom.render(element,document.getElementById('root'))

页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'class Clock extends React.Component {constructor(props){super(props);this.state = {date:new Date()}}componentDidMount(){this.timerID=setInterval(()=>this.tick(),1000)}componentWillUnmount(){clearInterval(this.timerID);}tick(){this.setState({date:new Date()})}render(){return (<div><h1>Hello,world!</h1><h1>It is {this.state.date.toLocaleTimeString()}.</h1></div>)}
}function App(){return (<div><Clock></Clock><Clock></Clock><Clock></Clock></div>)
}
const element = App();
ReactDom.render(element,document.getElementById('root'))

页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'class Toggle extends React.Component {constructor(props){super(props)this.state = {isToggleOn:true}this.handleClick = this.handleClick.bind(this);}handleClick(){this.setState(state =>({isToggleOn:!state.isToggleOn}));}render(){return (<button onClick={this.handleClick}>{this.state.isToggleOn?'ON':'OFF'}</button>)}
}
const element = <Toggle></Toggle>;
ReactDom.render(element,document.getElementById('root'))

页面：
在这里插入图片描述
点击后：

代码：

import React from 'react'
import ReactDom from 'react-dom'function WarningBanner(props){if(!props.warn){return null;}return (<div className='warning'>Warning!</div>)
}class Page extends React.Component {constructor(props){super(props);this.state = {showWarning:true};this.handleToggleClick = this.handleToggleClick.bind(this)}handleToggleClick(){this.setState(state =>({showWarning:!state.showWarning}));}render(){return (<div><WarningBanner warn={this.state.showWarning}></WarningBanner><button onClick={this.handleToggleClick}>{this.state.showWarning?'Hide' : 'Show'}</button></div>)}
}
const element = <Page></Page>;
ReactDom.render(element,document.getElementById('root'))

在这里插入图片描述
代码：

import React from 'react'
import ReactDom from 'react-dom'
const numbers = [1,2,3,4,5];
const listItems = numbers.map((number)=>
<li>{number}</li>)
const element = <ul>{listItems}</ul>;
ReactDom.render(element,document.getElementById('root'))

页面：
在这里插入图片描述

代码：

import React from 'react'
import ReactDom from 'react-dom'function NumberList(props){const numbers = props.numbers;const listItems = numbers.map((number)=><li key={number.toString()}>{number}</li>);return (<ul>{listItems}</ul>);
}
const numbers = [1,2,3,4,5,6];
const element = <NumberList numbers={numbers}></NumberList>;
ReactDom.render(element,document.getElementById('root'))