Hi! If you speak Spanish and you want to learn React, you're in the right place.
In this article, you will find a brief introduction to React. You will learn why it is so important for web development and why you should learn it.
Then, you will find a free 8-hour React course on freeCodeCamp's Spanish YouTube channel where you can learn the fundamentals of React in Spanish and build four projects step by step.
If you know Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.
Let's begin! ✨
🔸 What is React?
React is a JavaScript library for building user interfaces. You can use it to create interactive user interfaces that update and render very efficiently because React only updates the components that should be updated.
Why should you learn React?
The popularity of React in the developer community has been continually rising. According to the 2021 Developer Survey conducted by Stack Overflow, React.js was the most commonly used library among the 67,593 respondents.
React also got 40.14% of the votes when developers were asked which framework or library they have worked with extensively during the year or which one they intended to work with next year (2022).
Based on these results, now you know that by learning React, you are investing your time and resources wisely. These numbers are key indicators of the current and future relevance of React as a web library.
🔹 Basic React Concepts
Let's see some essential concepts that you will need to start working with React:
- Components: a component is an independent and reusable part of the user interface. A component can manage its own state and we can compose components like building blocks to make complex user interfaces.
- Props: this is an abbreviation for "properties." In React, if a component is rendered by another component, it can receive values from the component that renders it. Sending props to a component is like sending a "message" to it, but the message represents different values that you can use to customize how the component will look and work in the application.
💡 Tip: props can only be sent from the parent component to a child component, not from a child component to the parent component.
- State: the state of a component is a representation of its set of properties and their current values at a particular moment during the execution of the application. Components can handle and update their own state internally.
- Hook: hooks are "functions that let you “hook into” React state and lifecycle features from function components" (source).
- Event Listener: an event listener is a function that is executed when a specific event occurs. For example, a function that will be called when the user clicks on a button.
Awesome! Now that you know these important concepts, let's check out what you will learn during the course.
🔸 Course Content
This is a general overview of the main topics that you will learn during the course.
💡 Tip: to take the course, you should have previous knowledge of HTML, CSS, and JavaScript. If you need to review these topics in Spanish, I recommend watching these courses on our Spanish YouTube channel.
Basic Concepts and Tools
- Previous knowledge needed to take the course.
- What React is and why it is important for web development.
- Basic React Concepts (library, components, functional and class components, props, hooks, and event listeners).
- Advantages of React.
- How to download and install Node.js.
- Quick tour of the official React website and documentation.
Structure of a React App
- How to Create a React App with the
npx create-react-appcommand. - Detailed overview of the folders and files created by this command.
- How to open the application's folder in Visual Studio Code.
- How to run a React App with
npm start. - How to delete unnecessary files and update existing files to fit the needs of your project.
Introduction to JSX
- Meaning of JSX.
- Advantages of JSX.
- Elements in JSX.
- Elements vs. Components in React.
- Introduction to the DOM.
- Attributes in JSX.
- How to render components with react-dom.
- How to embed JavaScript in JSX.
- Nested elements in JSX.
- Self-closing tags in JSX.
- Styles in JSX.
React Components and Files
- How to define a functional component and a class component.
- Naming conventions for React files.
- Analyzing components from the initial application design.
- Exporting and importing components.
- Default vs. named exports.
- React Developer Tools in Google Chrome.
- Passing props to a component and using them in the component.
- Opening and closing tags and
props.children. - Adding style to a component with CSS stylesheets.
- Using images in a React app.
- Rendering multiple components.
- Assigning event listeners to the elements of a component.
- Passing event listeners as props.
- Class components, how to work with them, and how to transform functional components into class components and vice versa.
And... much more! ✨
You will build 4 projects to practice your skills. Let's see them.
🔹 React Projects
During the course, you will build 4 React projects step by step:
freeCodeCamp Testimonials Clone
First, you will build a clone of freeCodeCamp's testimonials section in Spanish.
In this project, you will learn and practice how to analyze the structure of a component, how to implement it with JSX, how to add style to a component with CSS, and how to render multiple components passing different props to each one of them.
Click Counter
Our second project will be a click counter. The count will be incremented when we click on the blue button and we can reset it with the purple button.
In this project, you will learn how to use the useState hook with functional components to keep track of the state of a component and update it. You will also work with event listeners.
Interactive Calculator
Our third project will be an interactive calculator that will perform the four basic arithmetic operations.
In this project, you will practice your React knowledge and you will work with Flexbox to create a more sophisticated layout.
You will also learn how to install packages with Node Package Manager and how to check if a package has been added to your project's dependencies. You will also work with props.children.
Interactive To-do List App
Our fourth project will be an interactive to-do list app. You will be able to add tasks, mark tasks as completed, and delete tasks.
You will combine all your knowledge in this final project and you will learn how to render lists of components from arrays and how to work with text input entered by the user.
At the end of the course, we will also adapt the first two projects (freeCodeCamp Testimonials Clone and Click Counter) to practice how to work with class components and how to transform functional components into class components.
📌 React Course on YouTube
Awesome. Now that you know the basics of React and what you will learn during the course, you are welcome to start taking the course in Spanish:
✍️ Course created by Estefania Cassingena Navone (Twitter: @EstefaniaCassN, YouTube: Coding with Estefania).
I really hope you like the course and that you find it helpful to take your first steps into the world of React.
You are also welcome to continue learning with our Spanish courses: