简单使用create-react-app运行一个react

create-react-app：Facebook官方提供的一个零配置命令工具

参考：https://github.com/facebookincubator/create-react-app?utm_source=javascriptweekly&utm_medium=email

 

安装及配置过程：

• 安装Nodejs和npm，建议node版本>=6，npm版本>=3
• npm命令安装所需的库之前，首先使其指向淘宝镜像，即从淘宝镜像下载，这样比从官方下载要快

  npm config set registry https://registry.npm.taobao.org

   
• 安装create-react-app

  npm install -g create-react-app

   
• 创建项目

  create-react-app my-app

   
• 启动

  npm start

   
• 如果启动成功，会自动打开浏览器进入首页，即：http://localhost:3000 

测试过程中使用webstorm

 

一个小demo：

首先用webstorm创建一个React App工程，然后修改App.js，在浏览器里直接可以看到效果

 

import React, { Component } from 'react';
import logo from './logo.svg';
//import './App.css';


let HelloMessage = React.createClass({
    render: function() {
        return <h1>Hello {this.props.haha}</h1>;
    }
});

let NotesList = React.createClass({
    render: function() {
        return (
            <ol>
                {
                    React.Children.map(this.props.children, function (child) {
                        return <li>{child}</li>;
                    })
                }
            </ol>
        );
    }
});

let MyTitle = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired,
    },

    render: function() {
        return <h1> {this.props.title} </h1>;
    }
});

let MyComponent = React.createClass({
    handleClick: function() {
        this.refs.myTextInput.focus();
    },
    render: function() {
        return (
            <div>
                <input type="text" ref="myTextInput" />
                <input type="button" value="Focus the text input" onClick={this.handleClick} />
            </div>
        );
    }
});

let LikeButton = React.createClass({
    getInitialState: function() {
        return {liked: false};
    },
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        let text = this.state.liked ? 'like' : 'haven\'t liked';
        return (
            <p onClick={this.handleClick}>
                You {text} this. Click to toggle.
            </p>
        );
    }
});

let Input = React.createClass({
    getInitialState: function() {
        return {value: 'Hello!'};
    },
    handleChange: function(event) {
        this.setState({value: event.target.value});
    },
    render: function () {
        let value = this.state.value;
        return (
            <div>
                <input type="text" value={value} onChange={this.handleChange} />
                <p>{value}</p>
            </div>
        );
    }
});

var Hello = React.createClass({
    getInitialState: function () {
        return {
            opacity: 1.0
        };
    },

    componentDidMount: function () {
        this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            });
        }.bind(this), 100);
    },

    render: function () {
        return (
            <div style={{opacity: this.state.opacity}}>
                Hello {this.props.name}
            </div>
        );
    }
});

/*var UserGist = React.createClass({
    getInitialState: function() {
        return {
            username: '',
            lastGistUrl: ''
        };
    },

    componentDidMount: function() {
        $.get(this.props.source, function(result) {
            var lastGist = result[0];
            if (this.isMounted()) {
                this.setState({
                    username: lastGist.owner.login,
                    lastGistUrl: lastGist.html_url
                });
            }
        }.bind(this));
    },

    render: function() {
        return (
            <div>
                {this.state.username}'s last gist is
                <a href={this.state.lastGistUrl}>here</a>.
            </div>
        );
    }
});*/

class App extends Component {
  render() {
        let sayHello = <HelloMessage haha="Jack Lee"/>
        let names = ['Alice', 'Emily', 'Kate'];
        let arr = [
          <h1>Hello world!</h1>,
          <h2>React is awesome</h2>,
            <HelloMessage haha="John" />
        ];
        let data = 123;
        return (
          <div className="App">
              <h4><font color="red">{sayHello}</font></h4><br/><hr/>
              Hello, {names}!<br/><hr/>
              {arr}<br/><hr/>
              <NotesList>
                  <span>hello</span>
                  <span>world</span>
              </NotesList><br/><hr/>
              <MyTitle title={data} /><br/><hr/>
              <MyComponent /><br/><hr/>
              <LikeButton /><br/><hr/>
              <Input/><br/><hr/>
              <Hello name="world"/><br/><hr/>
          </div>
        );
  }
}

export default App;

 

以上例子来源于：http://www.ruanyifeng.com/blog/2015/03/react.html