No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Tu primer proyecto con React

12/17
Recursos

Aportes 50

Preguntas 30

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Un aporte, espero les sirva.

Si ustedes observan cuando el profe Devars cambia entre directorios (carpetas), cuando pone el comando 鈥渃d鈥 luego se debe introducir el nombre del directorio, entonces para no escribir por completo el nombre del directorio ya sea porque es muy largo o por mayor productividad lo que se puede hacer es: poner el comando 鈥渃d鈥 seguido de las primeras iniciales del directorio y luego presionan la tecla Tab en su teclado, y listo la terminal reconoce a que directorio se refieren y los mueve hacia el.

Pero esto funciona para muchas otras cosas en la terminal, no solo para movernos entre directorios.
Jueguen con la terminal a que les auto-complete las palabras que quieren escribir. 馃槂

El comando:

npx create-react-app my-app

No me corr铆a lanzaba el siguiente error:

command not found: npx

Soluci贸n: despu茅s de una peque帽a b煤squeda descubr铆 que faltaba npm (Sistema de gesti贸n de paquetes por defecto para Node.js). Para instalarlo ejecuten:

sudo apt install npm

Al culminar la instalaci贸n reinicien su terminal y ejecuten el comando npx create鈥 y listo.

Espero le ayude a alguien cuya terminal lanze el mismo error.
Saludos :v

El link de las instrucciones para crear una nueva aplicaci贸n de React:
.

https://es.reactjs.org/docs/create-a-new-react-app.html

.

Script de creacion de proyecto en REact:

npx create-react-app nombre-app

Hola, he modificado el sitio web como reto personal. Aqu铆 les presento las modificaciones:

Este es el c贸digo JavaScript de 鈥淎pp.js鈥:

Excelente intro a React, yo no se nada de react o vue o esas cosas pero esta clase es una excelente intro para empezar a aprender de ellos.

No sirve de nada instalar las cosas si no las usamos

Tu primer proyecto con React 12/17

  • Aplicaci贸n con reactjs
  • ir a la documentaci贸n oficial de Reactjs para ver los comandos en terminal para crear una App y ejecutarlos en la terminal de nuestra distribuci贸n de Linux (los comandos son scripts)
  • cambiamos el nombre de nuestro archivo 鈥渕i-primer-app鈥
  • npx es una utilidad que viene con nodejs
  • nos movemos a la carpeta creada y visualizamos lo que contiene con ls -l
  • code . Para abrir el editor de c贸digo en la carpeta actual
  • En el explorador de archivos de VS podemos ver la carpeta 鈥減ublic鈥 donde se guarda la informaci贸n cuando se genera la App. En la carpeta 鈥渟rc鈥 est谩 el c贸digo de la App (JSX)
  • podemos abrir una terminal desde VS
  • ejecutamos 鈥渘pm start鈥 para iniciar la App
  • modificamos el texto y vemos como se modifica la App esto se logra gracias al Hot reloading
  • Live server y Reacjs tienen Hot reloading

Pasito a pasito se llega鈥

Ingresa a la pagina oficial

https://es.reactjs.org/

Ejecutar cada comando individualmente

npx create-react-app my-app

cd my-app

npm start

Clase 12 鈥 Tu primer proyecto con React


驴Para qu茅 sirve React.js?

  • Para crear interfaces en la web.

驴Qu茅 pasos debemos realizar para crear una aplicaci贸n con React.js?

  • Ir a la documentaci贸n de React.js.
  • Ir a la secci贸n 鈥淐rear una nueva aplicaci贸n鈥.
  • Abrir la terminal y ejecutar el comando npx create-react-app nombre-app
  • Nos movemos al directorio nombre-app con el comando cd.
  • En el directorio de la aplicaci贸n ejecutamos el comando npm start.

驴Cu谩ndo instalamos Node.js tambi茅n se instala NPX?

  • S铆.

驴Podemos escribir el nombre de la aplicaci贸n de React usando may煤sculas para separar palabras?

  • No, debemos usar guiones para separarlas.

驴Node.js ayuda a que las descargas necesarias para crear una aplicaci贸n en React.js funcionen correctamente?

  • S铆.

驴C贸mo podemos abrir Visual Studio Code desde la terminal de Ubuntu?

  • Con el comando 鈥渃ode .鈥.

驴En qu茅 lugar encontramos todo el c贸digo fuente de la aplicaci贸n de React.js?
o En el directorio src.

驴Podemos ejecutar el comando npm start desde la terminal de Visual Studio Code?

  • S铆.

驴Cu谩l es el archivo que podemos editar en la aplicaci贸n de React.js?

  • App.js

React

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
https://en.wikipedia.org/wiki/React_(JavaScript_library)

Por alguna raz贸n el comando npx create-react-app me tira un error, no s茅 si mi conexi贸n a internet es muy lenta pero parece que pasado un tiempo es incapaz de descargar los archivos y me tira algo como un error de fetch porque no se encontr贸 el archivo despu茅s del timeout de 30 segundos.

hoy :
react como hacer tu primera aplicacion
futuro : react aplicaciones 2025

Perfecto! vamos avanzando鈥

React listo!

Si te bota un error de 鈥[email protected]鈥 solo instala tar globalmente

npm install tar@6 -g

m谩s info aqu铆

Un aporte para aquellos que no tengan npm instalado, corran el comando:

sudo apt install npm

Ahora reconoce npx sin problema.

Que bonito siento que todos mis conocimientos se estan complementando

chicos para los que no les deja subir de vercion esta pagina tiene el paso a de como hacerlo para subira la lts v16 馃槂
https://www.digitalocean.com/community/tutorials/como-instalar-node-js-en-debian-9-es

excelente

Tu primer proyecto con React.js


驴Qu茅 es React.js?


ReactJS es una de las librer铆as m谩s populares de JavaScript para el desarrollo de aplicaciones m贸viles y web. Creada por Facebook, React contiene una colecci贸n de fragmentos de c贸digo JavaScript reutilizables utilizados para crear interfaces de usuario (UI) llamadas componentes.
.
Es importante se帽alar que ReactJS no es un framework de JavaScript. Esto porque s贸lo es responsable de renderizar los componentes de la capa de vista de una aplicaci贸n. React es una alternativa a frameworks como Angular y Vue, que permiten crear funciones complejas.
.

驴Qu茅 es NPX?


NPX significa Node Package Execute y viene con npm. Es un ejecutor de paquetes npm que puede ejecutar cualquier paquete que desee desde el registro npm sin siquiera instalar ese paquete. El npx es 煤til durante un paquete de uso 煤nico. NPX nos permite usar las herramientas de l铆nea de comandos de instalaci贸n locales sin necesidad de definir el script de ejecuci贸n de NPM y permitirnos realizar solo un script sin tener que instalarlo al local.
.

Ejecutar un React por medio de npx

  • Abrir la terminal de comandos.
  • Ejecutar el comando npx create-react-app 鈥減royectName鈥.
  • Aceptar la instalaci贸n del paquete de react.
  • Ejecutar cd 鈥減royectName鈥 para movernos a la carpeta d贸nde se instal贸 el paquete de React.
  • Ejecutar el comando npm start y aceptar los procesos para que el proyecto se ejecute en nuestro navegador.

Luego de instalar Synaptic, me aparecio un error que no me permitia continuar, dejo el video con el que pude solucionar:
Solucionar: E: No se pudo bloquear var/lib/dpkg/lock en Ubuntu 18.04
https://www.youtube.com/watch?v=QzzwI0QkmjA

驴Qu茅 es React?

React es una biblioteca de JavaScript para la construcci贸n de interfaces de usuario. Fue desarrollada por Facebook y se ha vuelto muy popular para construir aplicaciones web y m贸viles.
React utiliza un enfoque de componentes para construir aplicaciones, lo que significa que las aplicaciones se dividen en componentes individuales que se pueden reutilizar y combinar para crear una interfaz completa. React es conocido por ser eficiente y r谩pido, y se utiliza ampliamente en aplicaciones de alta complejidad y requisitos de rendimiento.

Primer proyecto React

Vamos a ver de que se trata este framework

Nunca utilizar solo un espacio, siempre colocar -

Muy bueno hasta ahora el curso, exelente el profe

Hola a todos!

Si no les permite instalar react al primer comando, utilicen este para habilitar la funcion:

sudo apt install npm

馃槃

Es increible que podamos aprender con React, ya pronto lo hare.

bien explicado la clase

Muchas gracias. Lo logr茅. Tuve que reiniciar 2 veces mi computadora. Pero al final lo logr茅. Aqu铆 la prueba.

Para abrir la terminal de manera m谩s eficiente pueden usar el comando Ctrl + Alt + T.

Uff pensando seriamente tomar un curso de React

Excelente clase

excelente esta clase.

excelente curso y muy bien explicado

React es el framework m谩s diverso (en t茅rminos de todas sus utilidades) y popular de JS, me encanta!

隆Hola!

Actualmente est谩n reescribiendo la documentaci贸n de React y tienen una secci贸n muy buena para aprender esta librer铆a de JavaScript. Aqu铆 te la dejo para que puedas darle una revisada. 馃槂

A seguir practicando


Ah铆 voy aprendiendo

React es una biblioteca de JavaScript de c贸digo abierto y se usa a menudo como V en MVC porque usa un DOM virtual de JavaScript, que es m谩s r谩pido que un DOM ordinario. Esto permite un modelo de programaci贸n m谩s simple que ofrece un mejor rendimiento.

React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Dise帽a vistas simples para cada estado en tu aplicaci贸n, y React se encargar谩 de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.

si no sabes react no te preocupes en este curso no llevaremos react

muy buen video con todos los paso a paso para hacer la practica

Gracias!