react开发1分钟入门

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

安装完毕后把下面的代码替换app.js 运行npm run start

import logo from './logo.svg';
import React from 'react';

import './App.css';

const style={
	fontSize:20,
	color:'red'
}
const i=2;


function HelloWorld(props){
	
	return <div>
	<h1>{props.message}</h1>
	<h2>{props.methods}</h2>
	</div>
	
}


function FormattedDate(props) {
  return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
}
 
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
		date: new Date(),
		name:"wanglijun"
	
	};
  }
 
  componentDidMount() {
	 console.log(this);
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
	
  }
 
  componentWillUnmount() {
	  console.log(this);
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
       
        <FormattedDate date={this.state.date} />
		<p>{this.props.name}</p>
      </div>
    );
  }
}

class HelloMessage extends React.Component { 
  constructor(props) {
      super(props);
      this.state = {value: 'Hello Runoob!'};
      this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(event) {
	  console.log(event);
    this.setState({value: event.target.value});
  }
  render() {
    var value = this.state.value;
    return <div>
            <input type="text" value={value} onChange={this.handleChange} /> 
            <h4>{value}</h4>
           </div>;
  }
}


class Content extends React.Component {
  render() {
    return  <div>
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
            <h4>{this.props.myDataProp}</h4>
            </div>;
  }
}
class HelloMessage2 extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'Hello Runoob!'};
      this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  render() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
}

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(e,name){   //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
				<a href="https://reactjs.org" onClick={(e)=>{this.preventPop(e,this.state.name)}}>Click</a>
            </div>
        );
    }
}


class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
 
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
 
  handleChange(event) {
    this.setState({value: event.target.value});
  }
 
  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择您最喜欢的网站
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="gg">Google</option>
            <option value="rn">Runoob</option>
            <option value="tb">Taobao</option>
            <option value="fb">Facebook</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}


class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };
 
    this.handleInputChange = this.handleInputChange.bind(this);
  }
 
  handleInputChange(event) {
	  debugger
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
 
    this.setState({
      [name]: value
    });
  }
  
  
 
  
 
  render() {
    return (
      <form>
        <label>
          是否离开:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          访客数:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}


 class MyComponent extends React.Component {
    handleClick() {
      // 使用原生的 DOM API 获取焦点
      this.refs.myInput.focus();
	  console.log(this.refs);
    }
    render() {
      //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
      return (
        <div>
          <input type="text" ref="myInput" />
		  <input type="text" ref="myInput2" />
          <input
            type="button"
            value="点我输入框获取焦点"
            onClick={this.handleClick.bind(this)}
          />
        </div>
      );
    }
  }


function App() {
  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 style={style}>
		设置style的样式
		 
		
		</p>
		<h1>{i == 1 ? 'True!' : 'False'}</h1>
		<h2>{i+i}</h2>
		<HelloWorld message="hello" methods="say"/>
		<Clock name="wangxiansheng"/>
		<Clock name="wangnvshi"/>
		<Popper/>
		
		<HelloMessage/>
		<HelloMessage2/>
		<FlavorForm/>
		<Reservation/>
		<MyComponent/>
		
		
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

让我们看看效果

你将学到

react的安装

react元素渲染

react jsx

react 组件

react State

react Props

react 事件处理 

react 列表和keys

react 组件APi

react 组件生命周期

react AJAX

react 表单与事件 

react refs