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