¿Cuál será mi camino paso a paso para aprender react.js No tengo ningún conocimiento de JavaScript?

Ponerse en marcha con React a veces puede ser abrumador. O, al menos, esto es lo que dice la gente. El consenso parece ser que la dificultad para ponerse en marcha se debe principalmente a las siguientes realidades u obstáculos.

  1. La información disponible no está escrita para desarrolladores promedio.
  2. Las actualizaciones masivas al lenguaje JavaScript [1] en 2015, y las posibles actualizaciones futuras que se usan activamente hoy, han enturbiado el agua. es decir, aprender ES6 y ES * y React al mismo tiempo puede implicar una montaña de cambios cuando viene de ES3 y el script incluye.
  3. Reaccionar es en realidad una abstracción bastante pequeña que generalmente está presente como un engranaje en un sistema de muchas otras partes móviles complejas. Grokking las partes y reaccionar al mismo tiempo es un asunto complicado. Creo que la mayoría de los desarrolladores están de acuerdo:

Prerrequisitos

Analicemos algunos requisitos previos. Los pasos uno y dos requerirán que tenga algunas opciones de HTML y JavaScript. Estos pasos se centran en aprender React sin aprender cómo construir una aplicación React real.

Cuando llegue al paso tres, necesitará una buena comprensión de Node, npm, ES6 (incluidos los módulos ECMAScript y Webpack, systemJS o Browserify) y Babel. Si carece de una comprensión básica de cada uno de estos, le sugiero que repase los conceptos básicos antes de pasar al paso tres. Si gasta el dinero en los recursos de aprendizaje que mencioné anteriormente, ponerse al día no debería ser demasiado difícil, dado que la mayoría de estos recursos también proporcionan transmisiones de pantalla de Node, npm, Webpack, SystemJS, ES6 y Babel.

Ahora, antes de que te quejes y llores, date cuenta de que estas tecnologías son la barrera mínima de entrada con la mayoría de las soluciones de la competencia (es decir, Angular 2, Ember y Aurelia). Si cree que aprender estas partes adicionales no vale su tiempo, me gustaría sugerirle que haga una copia de seguridad de React y eche un vistazo a vue.js, riot.js o mithril (es decir, descargue un archivo de script (ish), inclúyelo en la página HTML y listo! Después de todo, es posible que no necesite React, o que necesite aprenderlo. Y lo último que quiere hacer es usar React cuando algo más simple sea suficiente.

Sembrando ideas de reacción

Me gustaría plantar algunas ideas amplias de React (sin ningún orden en particular) en su cabeza antes de marearse y sentirse abrumado. Todo esto puede ser un galimatías en este momento, pero leerlos lo ayudará a conectar algunos puntos en el futuro.

  1. Los componentes de reacción son virtuales (es decir, escritos en JS) hasta que se procesan (es decir, render() ) en el DOM virtual que, a su vez, actualiza el DOM real con la menor cantidad de cambios necesarios. La idea es que las interacciones DOM implícitas (es decir, las interacciones jQuery DOM) se evitan y se entregan a un DOM abstraído (es decir, el DOM virutal).
  2. ¡React cumple con los méritos y el valor de los componentes web hoy! (es decir, estructurar su aplicación en un árbol de elementos / componentes de un solo propósito menos los estándares de componentes web).
  3. React no quiere que escribas HTML. Quiere que escribas JSX dentro de archivos JavaScript. Incluso quiere que tus estilos se escriban en JS. La forma Reaccionar comienza con JS y termina con JS. Es JS todo el camino hacia abajo. No tiene que ser así, pero eso es lo que se presenta en los documentos React.
  4. React no usa un motor de plantillas, usa JSX. Piense en JSX como un tipo de HTML mágico sin cadenas escrito en JavaScript que requiere un paso de compilación. Sí, JSX es opcional, pero la alternativa es escribir funciones minuciosamente detalladas. JSX es más fácil de leer y escribir en un archivo JavaScript. Solo recuerde que debe transformarse en funciones de JavaScript antes de ejecutarse en el navegador.
  5. El impulso detrás de React no radica en su enfoque en la interfaz de usuario o el DOM virtual. El valor de React se encuentra en el hecho de que proporciona las herramientas necesarias para crear un árbol (es decir, composición) de componentes donde los datos fluyen de manera sensata (es decir, flujo de datos reactivo unidireccional). Esa es la salsa secreta!
  6. Un elemento React es igual a un elemento HTML. Un componente React puede ser mínimamente un solo elemento React / HTML, pero cuando se utiliza el término componente, debe considerarlo como una agrupación de elementos React que forman una región distinta de su IU. Por ejemplo, un componente de inicio de sesión. Un componente de inicio de sesión no es un elemento. Hay varios elementos que forman un componente de inicio de sesión.
  7. Reaccionar “Props” se comparan con las propiedades HTML. Se utilizan para pasar declarativamente la configuración a componentes y componentes secundarios. Los accesorios no deberían ser mutados, para eso es para lo que se entiende el “estado”.
  8. Reaccionar “estado” es el mecanismo para hacer frente a un componente de cambios de datos únicos con el tiempo. Si le gusta una foto (o no), entonces esa foto debe saber que le ha gustado (o no) y contener ese estado.
  9. Te sorprenderá lo que parecen elementos HTML esparcidos a través de tus archivos JavaScript. No olvide que estos elementos HTML / React se transforman en JavaScript para que un navegador pueda analizar el código React. JSX va de esto: a esto (tenga en cuenta que la función createElement reemplaza a JSX):
  10. Si bien es posible tener componentes tontos o sin estado, el objetivo de React es crear componentes con estado que contengan componentes secundarios sin estado que se basan en el estado primario superior (es decir, datos). Por lo tanto, React es más que la V en MVC. También es la C en la mayoría de los casos. El componente más superior a menudo se denomina componente controlador porque aquí es donde se administra el estado. Considere la explicación de los documentos React: un patrón común es crear varios componentes sin estado que solo representan datos, y tener un componente con estado sobre ellos en la jerarquía que pasa su estado a sus hijos a través de accesorios. El componente con estado encapsula toda la lógica de interacción, mientras que los componentes sin estado se encargan de representar los datos de manera declarativa.

A medida que aprenda, vuelva a estas ideas para ver si lo que digo se vuelve más significativo.

Paso 1: Comprenda por qué Facebook creó React

Este es el paso más importante que estarás tentado a omitir. No lo hagas Antes de salir y tratar de entender qué es exactamente React, primero debes esforzarte por entender por qué es.

Paso 1.a – Ver: Aplicaciones JS en Facebook o Introducción a React.js

Paso 1.b – Lea: ¿Por qué creamos React?

Paso 1.c – Ver: Pete Hunt: Reaccionar: repensar las mejores prácticas

Paso 2: Obtenga la React Gist, antes de llegar a la API

Este paso sentará el modelo mental fundamental para Reaccionar. Lea este material sabiendo que el siguiente paso completará los detalles que faltan.

Paso 2.a – Lea (pero omita si es demasiado básico): Introducción a React.js para personas que saben lo suficiente jQuery para sobrevivir

Paso 2.b – Lee: ReactJS para personas estúpidas

Paso 2.c – Leer: la Guía de inicio rápido de React

Paso 2.e: si te sientes valiente, lee: Eliminar la complejidad de la interfaz de usuario o Por qué reaccionar es impresionante

Paso 3: Aprenda los fundamentos de React, es decir, cómo usar la API

Es hora de estirar esos dedos y jugar con algo de código. En este paso, debe esforzarse por obtener los conceptos fundamentales a través de la comprensión del código real (es decir, aprender a escribir código React y saber lo que está haciendo).

Este es el paso en el que todo se descompondrá si no tiene conocimiento sobre Notde, npm, ES6 (incluidos los módulos ECMAScript y webpack, systemJS o Browserify) y Babel.

Paso 3.a – Lea: Aprenda Raw React – sin JSX, sin Flux, sin ES6, sin Webpack … luego considere leer la segunda y la tercera parte también.

Paso 3.b – Mira: Comenzando con React.

Paso 3.c – Mira: React.js: Primeros pasos. Esto está un poco desactualizado, pero vale una hora de su tiempo. Mire y digiera los conceptos discutidos.

Paso 3.d – Observa: Comprender reaccionar. Esto también está un poco desactualizado, pero vale la pena una hora de su tiempo. Mire y digiera los conceptos discutidos. Luego lea el tutorial oficial de React.

Paso 4: compila una aplicación

Este es el paso en el que toma todo su conocimiento de React y agrega algunos jugadores adicionales para hacer una aplicación real.

Paso 4.a – Lea: Todas las mini guías oficiales a partir de “Mostrar datos”.

Paso 4.b – Mira: Construyendo un Wiki con React y Firebase

Paso 4.c – Lea: Flujo para personas estúpidas

Paso 4.d – Ver: crear aplicaciones con React y Flux

Paso 4.e – Mira: crea una aplicación de microblogging con Flux y reacciona

Paso 4.f – Ver: crear una aplicación en tiempo real con React, Flux, Webpack y Firebase

Paso 5: Ve a construir algo

Mucha gente se saltará la formación de una cantidad fundamental de conocimiento y simplemente comenzará a construir algo por el simple hecho de aprender. Personalmente, creo que esto es una pérdida de tiempo. Después de todo, ¿es más eficiente hundirse, luego aprender a no ahogarse, aprender a nadar y luego ir a nadar? Si siguió los pasos anteriores, ha aprendido a nadar y debería estar listo para construir algo.

Al construir, debe tener en cuenta los siguientes recursos:

  • kits de inicio
  • integraciones de editor
  • reaccionar-herramientas
  • reactcheatsheet.com

Notas al pie

[1] Empresa de diseño web Jaipur, empresas de desarrollo web en Jaipur, empresas de primer nivel en Jaipur, empresa de desarrollo de aplicaciones Android Jaipur, mejor empresa de SEO en Jaipur, empresa de desarrollo de software Jaipur

Te sugiero que comiences con las escuelas W3 y trates de entender JavaScript vainilla.

Y una vez que eres bueno con eso, puedes comenzar con reaccionar. Para ReactJS, te recomendaría que mires a egghead, entiendas cómo funcionan las cosas y una vez que estés bien con eso,

Create-react-app es la mejor manera de comenzar a desarrollar rápidamente una aplicación. Es una versión increíble de Facebook para comenzar.

Personalmente, le sugeriría que desarrolle una aplicación de muestra mientras mira egghead, para conocer ReactJS y cómo funcionan las cosas aquí.

Feliz pirateo 🙂

Primero debe aprender HTML básico , CSS, Javascript, w3schools es un buen recurso.
Entonces puedes entender y aprender Reaccionar.