72 lines
2.6 KiB
Markdown
72 lines
2.6 KiB
Markdown
|
---
|
||
|
|
id: 5a24c314108439a4d403614a
|
||
|
|
title: Moving Forward From Here
|
||
|
|
challengeType: 6
|
||
|
|
isRequired: false
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: Avançando daqui
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> Parabéns! Você terminou as lições de React e Redux. Há um último item que vale a pena apontar antes de seguir em frente. Normalmente, você não escreve aplicativos React em um editor de código como este. Este desafio lhe dá uma ideia de como é a sintaxe se você estiver trabalhando com o npm e um sistema de arquivos em sua própria máquina. O código deve ser semelhante, exceto pelo uso de instruções de <code>import</code> (essas são todas as dependências que foram fornecidas para você nos desafios). A seção "Gerenciando Pacotes com npm" abrange o npm em mais detalhes. Finalmente, escrever código React e Redux geralmente requer alguma configuração. Isso pode ficar complicado rapidamente. Se você estiver interessado em experimentar em sua própria máquina, o <a id="CRA" target="_blank" href="https://github.com/facebookincubator/create-react-app">aplicativo Create React</a> vem configurado e pronto para ser usado. Como alternativa, você pode ativar o Babel como um pré-processador JavaScript em CodePen, adicionar React e ReactDOM como recursos externos de JavaScript e trabalhar lá também. </section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions"> Registre a mensagem <code>'Now I know React and Redux!'</code> para o console. </section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: A mensagem <code>Now I know React and Redux!</code> deve ser registrado no console.
|
||
|
|
testString: 'assert(editor.getValue().includes("console.log("Now I know React and Redux!")") || editor.getValue().includes("console.log(\"Now I know React and Redux!\")"), "The message <code>Now I know React and Redux!</code> should be logged to the console.");'
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</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')
|
||
|
|
// );
|
||
|
|
|
||
|
|
// change code below this line
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|