这里写自定义目录标题
- 学习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-demo
Creating 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 1m
Initialized a git repository.
Installing template dependencies using npm...
added 54 packages in 7s
Removing template package using npm...
removed 1 package in 3s
Created git commit.
Success! Created react-demo at D:\dev_project\react-demo
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd react-demo
npm start
Happy 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 = null
const 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'))
