Simply use create-react-app to run a react

create-react-app: a zero-configuration command tool officially provided by Facebook

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

 

Installation and configuration process:

• Install Nodejs and npm, recommend node version >= 6, npm version >= 3
• Before the npm command installs the required library, first point it to the Taobao mirror, that is, download from the Taobao mirror, which is faster than downloading from the official website

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

   
• Install create-react-app

  npm install -g create-react-app

   
• Create project

  create-react-app my-app

   
• start up

  above sea level start

   
• If the startup is successful, it will automatically open the browser to enter the home page, namely: http://localhost:3000 

Use webstorm during testing

 

A small demo:

First create a React App project with webstorm, then modify App.js, you can see the effect directly in the browser

 

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;

 

The above example comes from: http://www.ruanyifeng.com/blog/2015/03/react.html