80 lines
2.6 KiB
Markdown
80 lines
2.6 KiB
Markdown
---
|
|
id: 5a24c314108439a4d403614a
|
|
title: Moving Forward From Here
|
|
localeTitle: Avanzando desde aquí
|
|
challengeType: 6
|
|
isRequired: false
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
Felicitaciones! Terminaste las lecciones sobre React y Redux. Hay un último elemento que vale la pena señalar antes de continuar. Normalmente, no escribirás aplicaciones React en un editor de código como este. Este desafío le da una idea de cómo se ve la sintaxis si está trabajando con npm y un sistema de archivos en su propia máquina. El código debe tener un aspecto similar, excepto por el uso de instrucciones de <code>import</code> (estos detienen todas las dependencias que se le proporcionaron en los desafíos). La sección "Administración de paquetes con npm" cubre npm con más detalle.
|
|
Finalmente, escribir el código React y Redux generalmente requiere alguna configuración. Esto puede complicarse rápidamente. Si está interesado en experimentar en su propia máquina, la aplicación
|
|
<a id='CRA' target ='_blank' href='https://github.com/facebookincubator/create-react-app'>Create React App</a> viene configurada y lista para funcionar.
|
|
Alternativamente, puede habilitar Babel como un preprocesador de JavaScript en CodePen, agregar React y ReactDOM como recursos externos de JavaScript, y trabajar allí también.
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Registre el mensaje <code>'Now I know React and Redux!'</code> a la consola.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: El mensaje ¡ <code>Now I know React and Redux!</code> debe estar registrado en la consola.
|
|
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
|
|
console.log('Now I know React and Redux!');
|
|
```
|
|
|
|
</section>
|