OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Course image
Coursera logo

Crea tu primer desarrollo web con React

Mike Nieva

En este proyecto, haremos el desarrollo web de un restaurante, mostrando su menú y un área de contacto.

Estaremos usando React, a través del generador VITE, implementando ruteo y manejo de TailwindCSS para la interfaz.

Al completar el proyecto, serás capaz de crear la base de una aplicación web en React moderna, identificarás una arquitectura de carpetas y trabajarás con diferentes librerías que permiten la optimización y manejo claro del proyecto.

Este proyecto es nivel intermedio. Se piden conocimientos intermedios en JavaScript y básicos con la terminal (shell) UNIX.

Enroll now

What's inside

Syllabus

Module 1

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
El curso comienza desde nivel básico sobre Resact y JS
Utiliza una herramienta de desarrollo (VITE) que agiliza la creación de aplicaciones en React
Ofrece prácticas para implementar TailwindCSS en la interfaz de usuario
Construye una base para crear aplicaciones web modernas en React

Save this course

Save Crea tu primer desarrollo web con React to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Crea tu primer desarrollo web con React with these activities:
Repasa los conceptos básicos de JavaScript antes de comenzar el curso.
Refrescará tu memoria sobre los fundamentos de JavaScript, haciéndote más fácil comprender los conceptos de React.
Browse courses on JavaScript
Show steps
  • Revisa tutoriales o recursos sobre variables, funciones, objetos y estructuras de datos de JavaScript.
  • Completa ejercicios y codifica ejemplos para practicar los conceptos.
  • Repasa los conceptos de manipulación del DOM y eventos de JavaScript.
Crea una presentación sobre los principios de TailwindCSS.
Te permitirá comprender en profundidad cómo funciona TailwindCSS y cómo usarlo para diseñar interfaces efectivas.
Browse courses on TailwindCSS
Show steps
  • Investiga los fundamentos de TailwindCSS y sus características.
  • Crea ejemplos prácticos que demuestren el uso de clases de utilidad y componentes de TailwindCSS.
  • Prepara una presentación clara y concisa que explique los conceptos clave.
Participa en discusiones grupales con otros estudiantes sobre las mejores prácticas de React.
Mejorará tu comprensión de React al compartir y aprender de otros.
Show steps
  • Únete a grupos de discusión o foros en línea.
  • Participa en discusiones, haz preguntas y comparte tus conocimientos.
  • Reflexiona sobre lo aprendido de las discusiones y aplícalo a tus propios proyectos.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Realiza ejercicios de práctica enfocados en implementar ruteo en React.
Mejorará tu comprensión del funcionamiento del enrutamiento y te permitirá practicar su implementación.
Show steps
  • Crea un nuevo proyecto de React mediante VITE.
  • Implementa rutas para diferentes páginas, como `Inicio`, `Menú` y `Contacto`.
  • Utiliza el componente `Link` para navegar entre las rutas.
Crea una guía de estilo para un proyecto de React.
Te permitirá mantener la coherencia y calidad del diseño en todos tus proyectos de React.
Show steps
  • Define los principios de diseño y las mejores prácticas para el proyecto.
  • Crea una paleta de colores, una tipografía y un conjunto de elementos de diseño.
  • Documenta las reglas y pautas de la guía de estilo.
Diseña y desarrolla un sitio web de portafolio utilizando React, TailwindCSS y un CMS.
Aplicarás las habilidades aprendidas en el curso para crear un proyecto del mundo real.
Show steps
  • Planifica y diseña la estructura y el diseño del sitio web.
  • Implementa el sitio web utilizando React y TailwindCSS.
  • Integra un CMS para administrar el contenido del sitio web.
  • Implementa características adicionales según sea necesario.
Participa en un hackathon relacionado con React y TailwindCSS.
Te expondrá a desafíos del mundo real, mejorará tus habilidades y te permitirá colaborar con otros.
Show steps
  • Investiga y elige un hackathon que se adapte a tus intereses.
  • Forma un equipo o trabaja individualmente en un proyecto relacionado con React y TailwindCSS.
  • Participa en el hackathon y presenta tu proyecto.

Career center

Learners who complete Crea tu primer desarrollo web con React will develop knowledge and skills that may be useful to these careers:
React Developer
React Developers are responsible for building and maintaining user interfaces using the React library. This course will be a highly valuable addition to the skillset of any React Developer. It is particularly useful for React Developers who wish to learn how to create modern, responsive websites.
See salaries and explore the career path for React Developer
Front End Architect
Front End Architects are responsible for designing and developing the front end architecture of a website. This course will be a valuable addition to the skillset of any Front End Architect. It will provide a strong foundation in React, one of the most popular front end libraries. Additionally, the course will cover topics such as routing and TailwindCSS which are essential for building modern, responsive websites.
See salaries and explore the career path for Front End Architect
Junior Web Developer
Junior Web Developers are responsible for assisting with the development of websites. This course will be a highly valuable addition to the skillset of any Junior Web Developer. It will provide a strong foundation in React, one of the most popular front end libraries. Additionally, the course will cover topics such as routing and TailwindCSS which are essential for building modern, responsive websites.
See salaries and explore the career path for Junior Web Developer
UI Developer
UI Developers are responsible for building the user interface of a website or application. This course will build a strong foundation for UI Developers by walking learners through the creation of a React web application. React is one of the most popular libraries for UI development today.
See salaries and explore the career path for UI Developer
Front-End Developer
Front End Developers are responsible for building the portion of a website that users interact with most directly. This course will build a foundation for Front End Developers by walking learners through the creation of a React web application. React is one of the most popular libraries for Front End Development today.
See salaries and explore the career path for Front-End Developer
Freelance Web Developer
Freelance Web Developers are responsible for all aspects of developing a website, from design to development to deployment. This course will be a highly valuable addition to the skillset of any Freelance Web Developer. It is particularly useful for Freelance Web Developers who wish to learn how to create modern, responsive websites.
See salaries and explore the career path for Freelance Web Developer
Web Developer
Web Developers are a more general category of developer who may work on both the front and back end of a website. This course is focused on the front end and will thus be most useful to Web Developers who wish to specialize in that area. However, any Web Developer wishing to develop modern websites will benefit from learning React as it is a popular and powerful front end library.
See salaries and explore the career path for Web Developer
Full-Stack Developer
Full Stack Developers are responsible for both the front end and back end of a website. While this course is focused on the front end, it will be a useful addition to any Full Stack Developer's skillset. Learning React is valuable for Full Stack Developers, as it is a popular and powerful front end library.
See salaries and explore the career path for Full-Stack Developer
Software Engineer
Software Engineers are responsible for the design, development, implementation, and maintenance of software systems. While this course is focused on front end development, many Software Engineers work on the front end and may find this course beneficial. Additionally, learning React is a valuable addition to any Software Engineer's skillset as it is a popular and powerful library.
See salaries and explore the career path for Software Engineer
Web Designer
Web Designers are responsible for the visual design of a website. While this course is focused on the development side of things, it is a valuable addition to any Web Designer's skillset. Learning how to implement a design will help Web Designers to better communicate with developers and create more visually appealing websites.
See salaries and explore the career path for Web Designer
Mobile Developer
Mobile Developers are responsible for developing mobile applications. While this course is focused on web development, it is still relevant for Mobile Developers. React Native is a popular framework for developing mobile applications and this course will provide Mobile Developers with valuable foundation in React.
See salaries and explore the career path for Mobile Developer
User Experience (UX) Designer
UX Designers are responsible for designing the user interface of a website or application. While this course is focused on the development side of things, it is a valuable addition to any UX Designer's skillset. Learning how to implement a design will help UX Designers to better communicate with developers and create more user-friendly websites.
See salaries and explore the career path for User Experience (UX) Designer
Product Designer
Product Designers are responsible for the overall design of a product, including the user interface. This course will provide Product Designers with a valuable foundation in front end development. Learning how to implement a design will help Product Designers to better communicate with developers and create more user-friendly products.
See salaries and explore the career path for Product Designer
Product Manager
Product Managers are responsible for the overall success of a product. This course may be useful for Product Managers who wish to have a better understanding of the technical side of product development. It will provide a basic understanding of React, one of the most popular front end libraries, and how it can be used to build modern, responsive websites.
See salaries and explore the career path for Product Manager
Data Scientist
Data Scientists are responsible for collecting, analyzing, and interpreting data. This course is not directly relevant to the field of Data Science. However, Data Scientists who wish to build data visualization tools may find this course to be helpful.
See salaries and explore the career path for Data Scientist

Reading list

We've selected eight books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Crea tu primer desarrollo web con React.
Cover image
The Road to Firebase
Save
Provides a comprehensive overview of React, covering fundamental concepts, best practices, and advanced techniques. It valuable resource for building a solid foundation in React development.
(English) The Road to Firebase: Your journey to master...
Paperback
$$
(English) The Road to Firebase: Your journey to master...
Kindle Edition
$$
Cover image
Fullstack React Native
Save
Covers the fundamentals of building full-stack applications with React and Node.js. It provides a step-by-step guide to creating a complete web application, including user authentication, data fetching, and server-side rendering.
(English) Fullstack React Native: Create beautiful mobile...
Paperback
$$$
Cover image
Head First Design Patterns
Save
Uses a unique and engaging approach to teach React concepts. It presents complex ideas in a clear and approachable manner, making it suitable for both beginners and experienced developers.
(English) Head First Design Patterns: Building Extensible and...
Paperback
$$
(English) Head First Design Patterns: Building Extensible and...
Kindle Edition
$$
Cover image
Learning React Native
Save
Covers the fundamentals of building mobile applications with React Native. It provides a step-by-step guide to creating native apps for iOS and Android, including UI design, data management, and performance optimization.
(English) Learning React Native: Building Native Mobile Apps...
Paperback
$$
(English) Learning React Native: Building Native Mobile Apps...
Paperback
$$
(English) Learning React Native: Building Native Mobile Apps...
Kindle Edition
$$
Cover image
Advanced Node.js Development
Save
This online course provides a comprehensive introduction to React development. It covers a wide range of topics, including state management, routing, and testing. The course includes hands-on exercises and projects.
Advanced Node.js Development
Paperback
Check
Advanced Node.js Development
Kindle Edition
Check
Cover image
Building Large Scale Web Apps
Save
Provides a collection of best practices for React development. It covers topics such as performance optimization, code organization, and testing. The book includes code examples and exercises.
(English) Building large scale web apps
Kindle Edition
$$
Cover image
A Million And One Random Digits
Save
Provides a concise and practical guide to the essential parts of JavaScript. It covers topics such as variables, functions, objects, and arrays. The book valuable resource for understanding the fundamentals of JavaScript.
A Million And One Random Digits
Paperback
Check
A Million And One Random Digits
Kindle Edition
Check
Cover image
Eloquent JavaScript, 3rd Edition
Save
Provides a comprehensive and in-depth exploration of JavaScript. It covers topics such as data structures, algorithms, and functional programming. The book valuable resource for understanding the complexities of JavaScript.
(English) Eloquent JavaScript, 3rd Edition: A Modern...
Paperback
$$
(English) Eloquent JavaScript, 3rd Edition: A Modern...
Kindle Edition
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Crea tu primer desarrollo web con React.
Next.js: El framework de React para producción
Most relevant
Introducción al desarrollo de back-end
Most relevant
Introducción al desarrollo de front-end
Most relevant
Proyecto final para desarrolladores de back-end
Most relevant
El manejo de plagas, malezas y enfermedades en los...
Most relevant
Proyecto final para desarrolladores de Front-End
Most relevant
Creatividad, diseño e innovación: Técnicas y herramientas...
Most relevant
React: Router dinámico con API
Most relevant
Herramientas y Metodologías de Gestión de Proyectos
Most relevant
Course image
Effort
2 horas
Level
Intermediate
Via
Coursera
Institution
Coursera Project Network
Instructor
Mike Nieva
Language
Español
Good to know
El curso comienza desde nivel básico sobre Resact y JS
Utiliza una herramienta de desarrollo (VITE) que agiliza la creación de aplicaciones en React
Ofrece prácticas para implementar TailwindCSS en la interfaz de usuario
Construye una base para crear aplicaciones web modernas en React
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser