构建项目
在命令行依次输入以下命令
1 2
| npx create-react-app react-redux
|
1 2
| npm install --save prop-types
|
创建文件
安装好后在 src/ 目录下新增三个文件:Header.js、Content.js、ThemeSwitch.js。
修改 src/Header.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| import React, { Component } from 'react' import PropTypes from 'prop-types'
class Header extends Component { render() { return ( <div> <h1>动手实现React-Redux</h1> </div> ) } }
export default Header;
|
修改 src/ThemeSwitch.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| import React, { Component } from 'react' import PropTypes from 'prop-types'
class ThemeSwitch extends Component { render() { return ( <div> <button>Red</button> <button>Blue</button> </div> ) } }
export default ThemeSwitch;
|
修改 src/Content.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| import React, { Component } from 'react' import PropTypes from 'prop-types' import ThemeSwitch from './ThemeSwitch'
class Content extends Component { render() { return ( <div> <p>React-Redux 的内容</p> <ThemeSwitch/> </div> ) } }
export default Content
|
修改 src/index.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Header from './Header'; import Content from './Content'; import PropTypes from 'prop-types';
class Index extends Component { render() { return ( <div> <Header/> <Content/> </div> ) } }
ReactDOM.render( <Index/>, document.getElementById('root') );
|
启动查看界面
如下所示: