Creando nuestra primera App Web con create-react-app (ReactJS)

En este tutorial, vamos a crear nuestro primer proyecto. Para ello, trabajaremos desde del terminal de Visual Studio Code (VSC). Aunque si no queréis instalar este IDE (cosa que os recomiendo encarecidamente), podéis utilizar la propia consola de Windows.

Cuando creamos un proyecto de React, y no disponemos de suficiente experiencia en esta tecnología nos puede suponer un terrible desafío debido a múltiples factores que actualmente se nos escapan debido a nuestra falta de conocimiento sobre esta tecnología. Algunos de estos factores pueden ser: ¿Qué dependencias necesitamos? ¿Qué configuración? etc.

Por todo ello, Facebook creó create-react-app, con la finalidad de abordar todos estos problemas ejecutando esta instrucción podemos crear un proyecto en tan solo un par de minutos.

Esta instrucción, nos auto generará una plantilla con una estructura ya predefinida idéntica para cualquier proyecto y sobre la que poder realizar nuestro proyecto. Por todo ello, es la forma más recomendable de inicializar un proyecto en ReactJS. Sin más preámbulos !Comenzamos¡

Abriendo un nuevo terminal en VSC

Si trabajamos desde el IDE VSC y queremos abrir un nuevo terminal vamos a Terminal > New Terminal o pulsamos la combinación de teclas CONTROL + SHIFT + Ñ

Situándonos en la ruta donde crearemos el proyecto

Y nos desplazamos hasta la ruta donde queramos crear nuestro proyecto en nuestro caso, vamos a crearlo sobre el escritorio. Por lo que vamos a esa ruta:

Creando el proyecto con create-react-app

Una vez situados en la ruta deseada, podemos crear un proyecto mediante el comando:

npx create-react-app my-app

Este comando creará el proyecto en la ruta seleccionada, instalará paquetes e inicializará el repositorio de git. El nombre de la aplicación en este caso es my-app aunque podría ser cualquier nombre que decidamos establecer.

Arrancando el proyecto

Si nos fijamos la propia instrucción que acabamos de ejecutar anteriormente nos da como sugerencia que cambiemos de directorio. Acabamos de crear el proyecto, pero no estamos situados sobre él. Para situarnos hacemos un cd my-app:

Si vamos a la ruta donde hemos creado el proyecto y abrimos el directorio my-app, podemos ver la estructura del proyecto que acabamos de crear con la instrucción anterior.

Una vez situados sobre el proyecto vamos a ejecutar la instrucción para inicializar/arrancar el proyecto para ello ejecutamos npm start:

Y una vez tenemos compilado satisfactoriamente el proyecto, se nos arrancará automáticamente en el navegador con la ruta del localhost. Tenemos la ruta localhost para local y en de nuestra red con una IP para que se puedan conectar los equipos que están dentro de nuestra red.

Y ya tenemos nuestro primer proyecto creado. La web oficial de ReactJS y a la que nos redirige el enlace de Learn React es: https://es.reactjs.org/

Create-react-app con instrucciones consecutivas

Realmente, podemos concatenar las 3 instrucciones juntas para ejecutarlas consecutivamente. Un ejemplo sería:

npx create-react-app my-app
cd my-app
npm start

Lo copiamos y pegamos en el terminal y conforme se vayan acabando las instrucciones pulsamos ENTER.

Abriendo el proyecto

Bien, una vez hemos creado el proyecto podemos abrirlo o bien desde File>Open Folder o bien arrastrado la carpeta al VSC.

Y seleccionamos la carpeta raíz del proyecto (es nuestro caso, my-app).

Si ahora volvemos a abrir un nuevo terminal, directamente se nos sitúa sobre la carpeta raíz del proyecto.

Uno de los beneficios que nos ofrece el trabajar con los terminales de VSC frente a utilizar la línea de comandos de Windows es que podemos tener varios terminales abiertos simultáneamente en una misma pestaña y poder gestionarlos simplemente cambiando de pestaña.

Bueno, esto a sido todo por este artículo, hemos visto como crear nuestra primera aplicación con React y finalmente como abrir el proyecto con VSC. Nos vemos en las siguientes clases. ¡Un saludo Reacter@s!

90 comentarios

  1. all the time i used to read smaller posts which as well clear their motive,
    and that is also happening with this paragraph which
    I am reading at this place.

  2. whoah this blog is magnificent i really like studying your articles.
    Stay up the great work! You know, lots of individuals are looking around for this information, you can help them greatly.

    my website … Maximum Recall Pills

  3. Hello, all the time i used to check weblog posts here early in the daylight, because i enjoy to learn more and
    more.

    My page … Arctos Air Conditioner

  4. Merely wanna remark on few general things, The website style and design is perfect, the content
    is rattling superb :D.

    Also visit my webpage: Wild Lean Keto Boost Reviews

  5. Some genuinely nice stuff on this site, I enjoy it.

    My web page; Moscatcher Mosquito Zapper [forum.adm-tolka.ru]

  6. Hello there, just became alert to your blog via Google, and found
    that it’s really informative. I’m going to watch out for brussels.
    I will appreciate should you proceed this in future. A lot of other folks will probably be benefited out of
    your writing. Cheers!

    Feel free to visit my web page :: Bio Shed Keto Slim

  7. Hey there! I simply want to give you a huge
    thumbs up for the excellent information you’ve
    got right here on this post. I’ll be coming back to your site for more soon.

    my blog post – Eagle CBD Reviews

  8. If you are going for best contents like me, just visit this site everyday for
    the reason that it gives feature contents, thanks

    Feel free to surf to my blog post … Optimum Keto Diet

  9. Very good blog post. I definitely love this site. Keep writing!

    my web blog – True Keto 1800 Pills

  10. Way cool! Some very valid points! I appreciate
    you penning this write-up and the rest of the site is also really good.

  11. If you wish for to obtain a good deal from this article then you have to apply these techniques to your won blog.

    Take a look at my web-site; Luiresse

  12. Have you ever considered writing an e-book or guest authoring on other sites?
    I have a blog based upon on the same subjects you
    discuss and would love to have you share some stories/information. I know my subscribers would
    enjoy your work. If you are even remotely interested, feel free to send me an e-mail.

    Also visit my webpage Luiresse Review

  13. Good blog you have here.. It?s difficult to find quality writing like yours these days.
    I seriously appreciate individuals like you!

    Take care!!

    My page: SynoGut Side Effects – http://www.fles.hlc.edu.tw,

  14. hey there and thank you for your information ? I have definitely picked up something new from right here.
    I did however expertise several technical issues using this web site, as I experienced to reload the web site many times previous to I could get
    it to load correctly. I had been wondering if your web hosting is OK?
    Not that I am complaining, but sluggish loading instances
    times will very frequently affect your placement in google and could damage your high quality score if ads and marketing with Adwords.
    Well I?m adding this RSS to my e-mail and could look out for a lot more of your respective interesting content.
    Make sure you update this again soon..

    Also visit my webpage – Keto Speed Diet

  15. Oh my goodness! Impressive article dude! Many thanks, However I am going through problems with your RSS.
    I don’t understand the reason why I can’t subscribe to it.

    Is there anybody else getting the same RSS issues? Anybody who knows the answer
    can you kindly respond? Thanx!!

    my web page – Sparkling Pure CBD Gummies

  16. Thanks to my father who shared with me on the topic of this website, this blog is actually amazing.

  17. Hello There. I found your blog using msn. This is an extremely
    well written article. I will make sure to bookmark it and come back
    to read more of your useful information. Thanks
    for the post. I’ll certainly comeback.

  18. I wanted to check up and let you know how really I appreciated discovering your web site today.
    I’d consider it a great honor to operate at my office and be able to utilize tips shared on your web-site and also
    get involved in visitors’ feedback like this. Should a position of guest article author
    become offered at your end, make sure you let me know.

    Also visit my webpage :: kedaikoperasi.com

  19. What’s up, after reading this remarkable article i am as well glad to share my familiarity here with
    mates.

    Also visit my web site – Eagle Hemp CBD

  20. Rattling nice style and superb articles, hardly anything else we need :
    D.

    Also visit my web-site; Niva CBD Gummies Pri

  21. I was recommended this website by my cousin. I am not sure whether this
    post is written by him as no one else know such detailed
    about my trouble. You’re wonderful! Thanks!

  22. Great blog here! Also your website loads up fast! What web host are
    you using? Can I get your affiliate link to your host? I wish my site loaded up as quickly
    as yours lol

  23. I read this paragraph completely about the resemblance
    of hottest and previous technologies, it’s amazing article.

    Feel free to visit my blog post … 192.190.225.244

  24. Hi to every body, it’s my first pay a quick visit of this blog; this webpage carries remarkable and really good
    stuff designed for readers.

    Stop by my web blog Libido Boost Male Enhancement Review

  25. I must thank you for the efforts you’ve put in penning this website.
    I really hope to view the same high-grade content from you in the future as well.

    In fact, your creative writing abilities has motivated me to get my own, personal blog now 😉

    My page Optimum Keto

  26. I’m really loving the theme/design of your weblog. Do you
    ever run into any web browser compatibility issues? A few of my blog readers have complained about my blog not operating correctly in Explorer but looks great in Chrome.
    Do you have any recommendations to help fix this
    issue?

  27. I seriously love your site.. Very nice colors & theme.
    Did you create this web site yourself? Please reply back as I’m planning to create
    my very own website and would love to know where
    you got this from or just what the theme is named.
    Kudos!

  28. Very superb visual appeal on this web site, I’d
    value it 10.

    My web-site; Artctic Box Air Conditioning

  29. I don’t even know how I ended up here, but I thought this post was
    great. I don’t know who you are but certainly you are going to a
    famous blogger if you aren’t already 😉 Cheers!

    my webpage: Biodermeux

  30. I have been surfing online more than three hours today, yet I never found any interesting article like yours.
    It is pretty worth enough for me. In my opinion, if all site owners and bloggers
    made good content as you did, the net will be a lot more
    useful than ever before.

    my web site – Viking XL Keto (bbs.yunweishidai.com)

  31. Really no matter if someone doesn’t know after that its
    up to other visitors that they will help, so here it takes place.

    My web page; Apple Cider Vinegar Keto Review

  32. Hello there, You’ve done a fantastic job. I’ll certainly digg it and personally suggest to my friends.

    I am confident they will be benefited from this web site.

  33. Peculiar article, exactly what I was looking for.

  34. Heya i am for the first time here. I came across this board
    and I find It really useful & it helped me out a lot.
    I hope to give something back and aid others like you aided me.

  35. Some really nice and useful info on this internet site, besides I think the design and style has excellent features.

    my blog :: forum.adm-tolka.ru

  36. Good write-up, I’m normal visitor of one’s web
    site, maintain up the nice operate, and It’s going to be a
    regular visitor for a long time.

    my web site – Botanical Farms CBD Gummies Review

  37. Hi it’s me, I am also visiting this website on a regular basis, this website is actually good and the viewers
    are really sharing nice thoughts.

    My web site … True Keto

  38. I simply wanted to thank you a lot more for your amazing web site you have produced
    here. Its full of ideas for those who are seriously interested in this particular subject,
    specifically this very post. Your all so sweet as
    well as thoughtful of others and reading the blog posts is a good delight if you ask me.
    And what generous surprise! Dan and I really have fun making use of your tips in what we have to do in a month’s time.
    Our listing is a distance long which means your tips are going to be put to great use.

    Feel free to surf to my page – Infinuity CBD

  39. This is the perfect blog for anyone who hopes to find
    out about this topic. You know so much its almost tough to argue with you (not that I personally would want to?HaHa).
    You certainly put a new spin on a subject that’s been discussed for ages.
    Excellent stuff, just excellent!

    Here is my blog post – Luiresse Skin Care

  40. Hi to every one, the contents existing at this site
    are actually awesome for people experience, well, keep up the nice work fellows.

  41. Hmm is anyone else experiencing problems with the pictures on this
    blog loading? I’m trying to determine if its a problem on my end or if
    it’s the blog. Any suggestions would be greatly appreciated.

    Also visit my page: Ketorol Reviews

  42. In fact no matter if someone doesn’t know afterward its up
    to other people that they will help, so here it occurs.

    Look at my blog; Green CBD Gummies

  43. I am incessantly thought about this, thanks for posting.

    Have a look at my web page … Vialis Male Enhancement Formula – http://www.meteoritegarden.com/userinfo.php?uid=2852498

  44. I like your writing style really loving this site.

    Here is my blog :: Luiresse Reviews

  45. I loved as much as you’ll receive carried out right here.

    The sketch is tasteful, your authored subject matter stylish.
    nonetheless, you command get bought an shakiness over that you wish be delivering the following.
    unwell unquestionably come more formerly
    again since exactly the same nearly a lot often inside case you shield this hike.

    Here is my blog post – http://ky.sgz8.com

  46. You actually make it seem really easy with your presentation however I in finding this topic to be actually something that I feel I’d
    never understand. It seems too complicated and very huge for me.
    I’m looking ahead to your subsequent publish, I will attempt to get the dangle of it!

  47. I really like what you guys are usually up too.

    Such clever work and exposure! Keep up the excellent works guys I’ve you guys
    to my blogroll.

    Here is my homepage; Pure Keto Burn Review

  48. This is the perfect web site for anyone who
    really wants to understand this topic. You know so much its almost tough to argue with you (not that I personally will need to…HaHa).

    You definitely put a new spin on a topic which has been written about for
    ages. Great stuff, just great!

    Also visit my homepage; http://www.comptine.biz

  49. Precisely what I was searching for, regards for putting up.

    Here is my blog post :: Natural Burn Keto Reviews

  50. You actually make it seem really easy with your presentation however I to find this matter to be actually something
    that I think I might by no means understand.
    It seems too complicated and very large for me. I am taking a look ahead on your subsequent put up, I will attempt to get the cling of it!

    My webpage Max BHB Review

  51. It’s very easy to find out any topic on net as compared to textbooks, as I found
    this post at this web page.

  52. Just a smiling visitor here to share the love (:, btw great design and style.

    my web page http://800ws.net/forum.php?mod=viewthread&tid=662186

  53. Hi to all, how is all, I think every one is getting more from this site, and your views are good in favor of new people.

    my web-site; Primiene Revitalizing Moisturizer

  54. magnificent post, very informative. I wonder why the
    opposite experts of this sector don’t realize this. You should proceed your writing.
    I am confident, you’ve a huge readers’ base already!

    my page :: True Burn Keto

  55. I enjoy you because of all of the efforts on this site.
    Kate enjoys going through investigation and it’s really simple to grasp why.
    We all notice all about the lively means you present efficient tips and tricks
    on your web site and even welcome response from website visitors on that subject matter and
    my daughter is now understanding a great deal. Have fun with
    the remaining portion of the new year. You’re conducting a glorious
    job.[X-N-E-W-L-I-N-S-P-I-N-X]I am extremely impressed along with your writing talents as smartly as with the structure for your blog.
    Is that this a paid topic or did you customize
    it yourself? Either way stay up the excellent quality writing, it is uncommon to look a nice weblog like this one these days.

    my site … Pure Keto Burn

  56. Thank you for the good writeup. It in fact was a amusement
    account it. Look advanced to far added agreeable from you!
    By the way, how can we communicate?

    My blog post … Your Essential Care Keto

  57. Thanks in support of sharing such a nice thought, article
    is fastidious, thats why i have read it entirely

    Also visit my site – NeoBio Keto

  58. What’s Taking place i am new to this, I stumbled upon this I’ve discovered It positively useful and it has
    aided me out loads. I’m hoping to contribute & assist other customers like its
    helped me. Great job.

  59. Thank you a lot for sharing this with all people you really recognize what you’re talking approximately!
    Bookmarked. Kindly additionally consult with my web site =).
    We can have a hyperlink alternate contract among us

    My webpage: MaxBHB Reviews

  60. I like this website because so much utile stuff on here :D.

    Here is my page :: Alpha Edge Pills

  61. Loving the information on this internet site, you have done great
    job on the content.

    Look at my page; Far East XL Male Enhancement Ingredients

  62. I love what you guys are usually up too. This type of clever work and
    exposure! Keep up the good works guys I’ve incorporated you guys to
    blogroll.

    Review my web page – Hydrofirm Cream

  63. I’m curious to find out what blog platform you’re using?
    I’m experiencing some minor security issues with my latest blog and I’d like to find
    something more safe. Do you have any recommendations?

    Feel free to visit my blog post; Modern Belle Hydrofirm

  64. Magnificent beat ! I wish to apprentice while you amend your website, how could i subscribe
    for a blog website? The account aided me a appropriate deal.
    I have been a little bit acquainted of this your broadcast
    provided vibrant clear idea.

    Feel free to visit my page … http://www.1stanapa.ru

  65. I used to be suggested this blog through my cousin. I am no longer
    sure whether this put up is written through him as no
    one else recognise such specific approximately my
    trouble. You are wonderful! Thanks!

    Feel free to visit my web blog http://www.fles.hlc.edu.tw

  66. Appreciating the commitment you put into your website and in depth information you offer.
    It’s awesome to come across a blog every once in a while that isn’t the same unwanted rehashed material.

    Wonderful read! I’ve bookmarked your site and I’m including your
    RSS feeds to my Google account.

    my website Viking XL Keto Reviews (http://forum.charmanders-underground.com/index.php?action=profile;u=472412)

  67. I am sure this post has touched all the internet visitors, its really really pleasant post on building up new web site.

    Feel free to visit my site; showhorsegallery.com

  68. Some truly interesting information, well written and
    loosely user pleasant.

    my blog post; Keto Secret Keto

  69. We absolutely love your blog and find most of your post’s
    to be precisely what I’m looking for. Would you offer guest writers to write content for
    you personally? I wouldn’t mind creating a post or elaborating on a few of the
    subjects you write in relation to here. Again, awesome web log!

    Here is my page … Synaptic IQ Review

  70. This blog was… how do you say it? Relevant!! Finally I’ve found something
    that helped me. Thanks!

    My webpage; http://dulichnghean.com/index.php?action=profile;u=1735

  71. Wow, superb weblog structure! How lengthy have you
    been blogging for? you make running a blog look easy. The whole look of your site is wonderful, as neatly as the content material!

    Here is my blog post Keto LeanX Review

  72. I’m really enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come
    here and visit more often. Did you hire out a developer to create your theme?
    Outstanding work!

  73. Hi there friends, how is all, and what you wish for to say regarding this post, in my view its in fact amazing designed for me.

    Here is my blog post; CoolCube Air Conditioner

  74. Hello.This post was extremely motivating, especially since
    I was browsing for thoughts on this issue last week.

    My website; Brilliance Keto Reviews

  75. Hello there I am so thrilled I found your weblog, I really found you by accident,
    while I was browsing on Yahoo for something else, Anyhow I am here
    now and would just like to say kudos for a marvelous post and a all round enjoyable blog (I also love the theme/design), I don’t have
    time to go through it all at the minute but I have bookmarked it and also added in your RSS feeds, so when I
    have time I will be back to read more, Please do keep up the superb job.

    Also visit my site … Ilok Air Reviews

  76. I truly appreciate this post. I have been looking all over
    for this! Thank goodness I found it on Bing. You have made my day!
    Thank you again!

    Feel free to surf to my website :: Ilok Air Reviews

  77. I got what you intend,saved to bookmarks, very decent web site.

    My web page – hotelforrest.ru

  78. Have you ever considered publishing an e-book or guest authoring on other websites?
    I have a blog based upon on the same ideas you discuss and would love
    to have you share some stories/information. I know my
    subscribers would value your work. If you’re even remotely interested, feel free to send me an email.

    My homepage; Hempizor CBD

  79. Hello.This post was extremely fascinating,
    particularly since I was investigating for thoughts on this subject last Saturday.

    My web site; Brilliance Keto Pills

  80. Heya are using WordPress for your blog platform? I’m new to the blog world but I’m
    trying to get started and set up my own. Do you require any html coding expertise to make your
    own blog? Any help would be really appreciated!

    Review my website: Gold Leaf CBD Reviews

  81. I blog quite often and I genuinely thank you for your information. The article has really
    peaked my interest. I am going to bookmark your site and keep
    checking for new details about once a week. I subscribed to your Feed as well.

  82. Very good info. Lucky me I recently found your blog by accident (stumbleupon).
    I’ve book marked it for later!

    Here is my web blog: Viritenz Male Enhancement

  83. If you are going for best contents like I do, simply pay
    a quick visit this web site every day as
    it presents feature contents, thanks

    My webpage: Keto LeanX Ingredients

  84. As I website possessor I think the content here is very superb, appreciate it for your efforts.

    Here is my site :: Xoth CBD Gummies Reviews

  85. I want to to thank you for this good read!!
    I absolutely loved every little bit of it. I have you bookmarked to look at new stuff you post?

    my webpage Rapid Fire Keto Review

  86. Great ? I should definitely pronounce, impressed with your website.
    I had no trouble navigating through all the tabs as well as related info ended up being
    truly simple to do to access. I recently found what I hoped for before you know it
    in the least. Reasonably unusual. Is likely to appreciate it for those who
    add forums or anything, site theme . a tones way for your customer to communicate.
    Excellent task.

    My web-site; frilans.su

  87. Hello just wanted to give you a quick heads up and
    let you know a few of the pictures aren’t loading correctly.
    I’m not sure why but I think its a linking
    issue. I’ve tried it in two different web browsers and both show the same outcome.

    My web-site :: http://urbandevelopment.com.pl/

  88. Hello to all, how is all, I think every one is getting more from this web
    page, and your views are pleasant designed for new people.

    Here is my web-site … Everette

  89. This is the right blog for everyone who wants to understand this topic.
    You know a whole lot its almost hard to argue with you (not that I really will
    need to?HaHa). You definitely put a new spin on a subject which has been discussed for years.

    Excellent stuff, just wonderful!

    My web site; http://www.a913.vip

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar