学习React
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。
安装脚手架
安装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的版本
nvm install 18.2.0
nvm use 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'))
得到页面
这种方式写代码太复杂了，看看有没有简单的方法。
下面的部分代码是参考了React的官方教程编写的
这里是使用JSX构建页面
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);
页面
这里是官方讲解的组件&Props部分
代码：
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'))
这次的学习先到这里，我们后面继续学习React的一些其他的操作和高级用法。
3258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
