2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								---
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								id: 5a24c314108439a4d403614a
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								title: Moving Forward From Here
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								challengeType: 6
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								isRequired: false
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								forumTopicId: 301434
							 | 
						
					
						
							
								
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								localeTitle: 从这里前进
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								---
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								## Description
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								<section id='description'>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
										
									
								 | 
							
							
								恭喜你完成了 React 和 Redux 的所有课程!在继续前进前,还有一点值得我们注意。通常,我们不会在这样的编辑器中编写 React 应用代码。如果你在自己的计算机上使用 npm 和文件系统,这个挑战可让你一瞥 React 应用的语法之貌。除了使用<code>import</code>语句(这些语句引入了各挑战中提供的所有依赖关系),其代码看起来类似。“管理包(含 npm)”这一节更详细地介绍了 npm。
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								最后,写 React 和 Redux 的代码通常需要一些配置,且很快会变得复杂起来。如果你想在自己的机器上尝试写代码,点击链接
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								<a id='CRA' target ='_blank' href='https://github.com/facebookincubator/create-react-app'>创建 React App </a>可获取已配置好的现成代码。
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								另一种做法是在 CodePen 中启用 Babel 作为 JavaScript 预处理器,将 React 和 ReactDOM 添加为外部 JavaScript 资源,在那里编写应用。
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								</section>
							 | 
						
					
						
							
								
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								## Instructions
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								<section id='instructions'>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								把<code>'Now I know React and Redux!'</code>这一消息输出到控制台。
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								</section>
							 | 
						
					
						
							
								
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								## Tests
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								<section id='tests'>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								```yml
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								tests:
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								  - text: <code>Now I know React and Redux!</code>这一消息应输出到控制台。
							 | 
						
					
						
							
								
									
										
										
										
											2020-02-18 01:40:55 +09:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								    testString: getUserInput => assert(/console\s*\.\s*log\s*\(\s*('|"|`)Now I know React and Redux!\1\s*\)/.test(getUserInput('index')));
							 | 
						
					
						
							
								
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								```
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								</section>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								## Challenge Seed
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								<section id='challengeSeed'>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								<div id='jsx-seed'>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								```jsx
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// import React from 'react'
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// import ReactDOM from 'react-dom'
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// import { Provider, connect } from 'react-redux'
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// import { createStore, combineReducers, applyMiddleware } from 'redux'
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// import thunk from 'redux-thunk'
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// import rootReducer from './redux/reducers'
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// import App from './components/App'
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// const store = createStore(
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								//   rootReducer,
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								//   applyMiddleware(thunk)
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// );
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// ReactDOM.render(
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								//   <Provider store={store}>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								//     <App/>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								//   </Provider>,
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								//   document.getElementById('root')
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// );
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								// 请在本行以下添加你的代码
							 | 
						
					
						
							
								
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								```
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								</div>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								</section>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								## Solution
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								<section id='solution'>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								```js
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								console.log('Now I know React and Redux!');
							 | 
						
					
						
							
								
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								```
							 | 
						
					
						
							
								
									
										
										
										
											2020-08-13 17:24:35 +02:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2020-09-07 16:11:48 +08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
								
									
								 | 
							
							
								</section>
							 |