¿Cómo se puede aprender React y Redux durante el fin de semana? Aprendiendo y Estudiando para siempre

Puedes seguir esta Gist para comenzar con React. Está en ES5, pero puede saltar fácilmente a es6, una vez que esté al tanto de todos los nuevos conceptos de es6.

¿Qué es reaccionar js?

Una biblioteca de JavaScript para crear interfaces de usuario rápidas, reutilizables y fáciles de mantener.

¿Por qué reaccionar js?

Cómo aprender 5 nuevos idiomas.
Quiero aprender Data Science. Terminé mi graduación en la cadena de comercio. ¿Soy elegible para el curso?
¿Cuáles son algunos trucos de 5 minutos que puedo aprender para mejorar mis habilidades de Photoshop?
¿Cuáles son algunos sitios excelentes para que los escritores aprendan sobre diferentes estilos de escritura?
Soy estudiante de medicina Quiero aprender muchas otras cosas: codificación, piano, filosofía, lectura. ¿Cómo puedo hacerlas todas sin afectar mis calificaciones?

Fácil de implementar en proyecto existente.
La representación es rápida debido al concepto de dom virtual.
React implementa un flujo de datos unidireccional que reduce la placa de caldera.

y puede saber mucho más visitando https://facebook.github.io/react/

Vamos a comenzar con pequeñas lecciones sobre cómo usar react.js

Lección 1

Muestra el texto “Hola mundo” usando el componente reaccionar.

var HelloWorld = React.createClass ({
render: function () {
return (

Hello World

);

}
});

/ * renderiza una instancia de HelloWorld en un nodo dom específico * /
ReactDOM.render (, document.getElementById (‘container’));

Puntos :

La primera letra del nombre del componente debe estar en mayúsculas, de lo contrario no se procesará.
Este es el estilo jsx de escritura de componentes de reacción, para saber más sobre jsx visite https://facebook.github.io/react…
El componente debe implementar la función de render.
Render puede incluso devolver nulo o falso.
La función de representación devuelve elementos React, no elementos DOM reales (hay una diferencia entre estos dos. Simplemente considere reaccionar como una representación virtual de DOM real).
No podemos devolver varios elementos / componentes desde la función de render. Debe devolver solo un elemento / componente padre.

/ * lanzará un error * /

var HelloWorld = React.createClass ({
render: function () {
regreso (

Hola mundo

Hola

);

}
});

ReactDOM.render (, document.getElementById (‘container’));

/ * debe ser usado de esta manera * /

var HelloWorld = React.createClass ({
render: function () {
regreso (

Hola mundo

Hola

);

}
});

ReactDOM.render (, document.getElementById (‘container’));

Debe saber

var element = React.createElement (HelloWorld) / * devuelve react element * /
var el = / * estilo JSX, y también devolver el elemento de reacción * /

/ * llamará a la función de constructor de componentes y devolverá la instancia de componente * /
ReactDOM.render (elemento, domNodeToMountOn)

También recuerde, los elementos de reacción son simplemente la representación virtual de DOM real.

Lección 2

Muestre el texto “hola mundo” usando los accesorios si se aprueban, de lo contrario use el predeterminado.

var HelloWorld = React.createClass ({
getDefaultProps: function () {
regreso {
valor: “hola mundo predeterminado”
}
}

render: function () {
return (

{this.props.value}

);

}
});

ReactDOM.render (, document.getElementById (‘container’));

Puntos :

Los apoyos son inmutables.
Podemos definir la validación en props. ¡¡Curioso !!, lo sabremos más tarde.
Los objetos no son más que objetos simples de javascript, que actúan como configuración del componente.
Los apoyos fluyen de una manera en React: de padres a hijos (en su mayoría).

Lección 3

Muestre el texto “hola mundo” en el renderizado y cambie a “hola” una vez que haga clic.

var HelloWorld = React.createClass ({
getInitialState: function () {
regreso {
valor: ‘Hola Mundo’
}
}

_changeText: function () {
this.setState ({value: ‘Hello’});
}

render: function () {
regreso (

{this.state.value}

)
}

});

ReactDOM.render (, document.getElementById (‘container’));

Puntos :

En reaccionar tenemos atributos html como camelCase (por ejemplo, “onClick”).
El estado es mutable, por lo que se prefiere su uso mínimo.
Al llamar a this.setState se volverá a representar el dom / componente, pero de una manera más inteligente.
Use this._changeText, para llamar una vez que se haga clic. Si se usa this._changeText (), lo llamará inmediatamente una vez que se haya montado el componente.
this.setState no muta inmediatamente el estado, por lo que usar this.state después de this.setState solo devolverá el estado anterior.
Nuevamente, el estado es un objeto javascript demasiado simple, que actúa como fuente de datos.
this.setState no se ejecuta de forma síncrona, se agrupan en la cola

Lección 4

Muestre el texto “hola mundo” en el renderizado, y arroje una advertencia de validación si no es una cadena o está vacío

var HelloWorld = React.createClass ({
propTypes: {
valor: React.PropTypes.string.isRequired
}

getDefaultProps: function () {
regreso {
clave: “hola mundo por defecto”
}
}

render: function () {
return (

{this.props.value}

);

}
});

ReactDOM.render (, document.getElementById (‘container’));

Puntos:

Aunque esto mostrará ‘5’ en la pantalla, aparecerá una advertencia en la consola.

Lección 5

Enviar formularios en el componente reaccionar

var AppForm = React.createClass ({

getInitialState: function () {
regreso {
msg: “”
}
}

ayudante: {
postToServer: function (url, jsonData) {
var self = esto;

$ .ajax ({
url: url,
tipo de datos: ‘json’,
caché: falso,
datos: jsonData,
método: ‘POST’,
éxito: función (respuesta) {
self.setState ({msg: response.key});
}
error: función (xhr, estado, err) {
self.setState ({msg: ‘Algo salió mal’})
}
});

}
}

_enSubmit: function (e) {
e.preventDefault ();

var value = ReactDOM.findDOMNode (this.refs.name) .value;
this.helper.postToServer.apply (this, [‘/ submitdetails’, {name: value}]);

}

render: function () {
regreso (

{this.state.msg}

);

}
});

ReactDOM.render (, document.getElementById (‘container’));

Lección 6

Característica básica de sugerencia automática.

var AutoSuggest = React.createClass ({

getInitialState: function () {
regreso {
resultados: []
}
}

ayudante: {

fetchResults: function (url, searchTerm) {
var self = esto;

$ .ajax ({
url: url + ‘? search =’ + searchTerm,
caché: falso,
tipo de datos: ‘json’,
método: ‘GET’,
éxito: función (respuesta) {
self.setState ({resultados: respuesta});

}
error: función (xhr, estado, err) {
self.setState ({resultados: []});
}

})
}
}

_onSearchChange: function (e) {
término var = e.target.value;
this.helper.fetchResults.apply (this, [‘/ countries’, term]);
}

render: function () {
volver (

);
}

});

var SearchItems = React.createClass ({

render: function () {
regreso (

{item.name}

})}

);
}

});

ReactDOM.render (, document.getElementById (‘container’));

Lección 7

Comprensión del ciclo de vida de los componentes de reacción.

var LifeCycle = React.createClass ({
getInitialState: function () {
regreso {
valor: “valor inicial”
}
}

componentWillMount: function () {
console.log (‘el componente se montará’);
}

componentDidMount: function () {
/ * puede realizar una solicitud ajax aquí o puede hacer alguna interacción con el navegador * /

console.log (‘el componente se montó’);
}

componentWillUpdate: function () {
console.log (‘componente se actualizará’);
}

componentDidUpdate: function () {
console.log (‘componente se actualizó’);
}

componentWillUnmount: function () {
console.log (‘componente se desmontará’);
}

_changeState: function () {
this.setState ({valor: ‘valor cambiado’});
}

render: function () {
regreso (

{this.state.value}

);
}

});

var Child = React.createClass ({

componentWillReceiveProps: function () {
console.log (‘el componente recibirá nuevos accesorios’);
}

render: function () {
retorno nulo
}

})

ReactDOM.render (, document.getElementById (‘container’));

Puntos:

Conozca más sobre el ciclo de vida de los componentes aquí https://facebook.github.io/react/docs/component-specs.html#lifecycle-method

Lección 8

Uso de clases y estilos en componentes de reacción.

var HelloWorld = React.createClass ({

inlineStyle: {
color verde’,
marginLeft: ‘50% ‘,
tamaño de fuente: ’24px’,
fontWeight: ‘bold’
}

render: function () {
regreso (

Hey

);
}

});

ReactDOM.render (, document.getElementById (‘container’));

Lección 9

Calendario básico en reaccionar.

var Calendar = React.createClass ({
render: function () {
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec ‘];

return (

);
}
});

var WeekDays = React.createClass ({
render: function () {
var weekDays = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’];

return (

{weekDay}

;
})}

);
}
});

var Days = React.createClass ({
ayudante: {
getMonthDays: function (year, month, backlogDays) {
this.setUrl (año, mes);

var totalDays = new Date (year, month + 1, 0) .getDate ();
var prevMonthDays = new Date (year, month, 0) .getDate ();

días var = [];
para (var i = prevMonthDays – backlogDays; i <= prevMonthDays; i ++)
days.push ({day: i, prev: true});

para (var i = 1; i <= totalDays; i ++)
days.push ({day: i, prev: false});

días de regreso;
}

emptyDays: función (año, mes, backlogDays) {
var prevMonthDays = new Date (year, month, 0) .getDate ();
var dayOfMonth = new Fecha (mes == 0? año – 1: año, mes == 0? 11: mes – 1, prevMonthDays – backlogDays) .getDay ();
dayOfMonth = (dayOfMonth == 0)? 7: dayOfMonth;

var emptyDays = [];
para (var i = 1; i <dayOfMonth; i ++)
emptyDays.push (i);

devuelve los dias vacios;
}

setUrl: función (año, mes) {
window.location.href = ‘#’ + year + ‘#’ + month;
}

}

render: function () {
var días = this.helper.getMonthDays (this.props.year, this.props.month, this.props.backlogDays);
var emptyDays = this.helper.emptyDays (this.props.year, this.props.month, this.props.backlogDays);

return (

;
})}

{
days.map (function (item) {
devuelve item.prev?

{item.day}

{item.day}

;

})}

)

}
});

var Month = React.createClass ({
getInitialState: function () {
var value = window.location.href.split (‘#’);

regreso {
mes: parseInt (valor [2]) || (nueva fecha ()). getMonth (),
año: parseInt (valor [1]) || (nueva fecha ()). getFullYear ()
}

}

getDefaultProps: function () {
regreso {
backlogDays: 1
}
}

eventos locales: {
prevOnClick: function () {
this.setState ({month: this.state.month == 0? 11: this.state.month – 1});
if (this.state.month == 0) this.setState ({year: this.state.year – 1});
}

nextOnClick: function () {
this.setState ({month: this.state.month == 11? 0: this.state.month + 1});
if (this.state.month == 11) this.setState ({year: this.state.year + 1});
}

monthOnChange: function (month) {
var months = this.props.months;
this.setState ({month: months.indexOf (month)});
}

yearOnChange: función (año) {
this.setState ({year: year});
}
}

render: function () {
var months = this.props.months;
var self = esto;

regreso (

Mes seleccionado – {meses [this.state.month]}

{months.map (función (mes) {
return

{month}

})}

Año seleccionado – {this.state.year}

{[2012, 2013, 2014, 2015, 2016, 2017, 2018] .map (función (año) {
return

{year}

})}

{meses [this.state.month]}
{this.state.year}

)
}

});

ReactDOM.render (, document.getElementById (‘calendar’));