React入门(一) State详解
React入门(一) State详解
我们都是程序员,废话不多说马上开始!
一、 Demo创建/下载
两种方法创建新的React APP
1. github下载
- 下载git地址.
- 解压-打开
- npm install
- npm start
- y(3000端口任务在运行是否愿意运行在别的端口上?)
2. 自己的命令行创建
- 找到自己心仪的文件夹 (全英文)
- 用命令行打开并抵达心仪文件夹
- npx create-react-app my-app
- cd my-app
- npm start
注意
npx在第一行不是一个错字 - 它是一个包转发工具,附带npm 5.2+。
创建的时候已经默认运行过(npm install )可以直接start
然后把 src/app.js的文件内容先改一下
import React, {
Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={
logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<p>
修改文件夹 <code>src/App.js</code> 保存时候之后自动加载.
</p>
</header>
</div>
);
}
}
export default App;
Ctrl + C
Ctrl + V
二、State是什么?
英文翻译是状态。
其实也可以理解为状态,一段文字中的某个值改变了,也可以理解为状态改变了。
看一个简单的例子
把 src/app.js的文件内容先改一下
import React, {
Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state={
Text:'我是state'}
render() {
return (
<div className="App">
<header className="App-header">
<img src={
logo} className="App-logo" alt="logo" />
<p>
State输出:{
this.state