If you’ve made the decision to learn React, I’m glad for you! Learning React is, in my opinion, one of the best choices you can make as a web developer.
If you’re here because you want to learn more about React before committing to it, then that’s awesome too! I’m sure you’ll find that React is perfect for your development needs.
We’re going to cover the very basics of React in this guide. I’m going to explain what components are, and introduce you to JSX, an integral part of the React framework.
Contents
What is React?
React is a JavaScript framework that aims to provide tools for developing efficient web applications with simple, declarative code. React was developed by software engineers at Meta, with the purpose of creating a framework that could handle complex, interactive UIs like the one on Facebook.
React has been a huge success. It has become the most wanted JavaScript framework by employers, so if you’re looking to get a job as a developer, React is an amazing choice.
React code is declarative, meaning that you will often write code that expresses what you want to happen, and not how to accomplish it. This makes React code clean and very readable, and makes for a smooth developer experience.
With React being so popular, there are thousands of third-party libraries that you can use to accomplish anything. Examples include react-router-dom, react-advertising, and react-redux.
React code is also extremely efficient. The way it handles state updates makes the UI as responsive as possible. And even if there are slow or “expensive” portions of your application, React provides tools such as memoization that can optimize your app’s speed.
What are Components?
Central to React is the concept of components, which are reusable pieces of the UI. Components allow you to divide your application into many smaller pieces that can be separately developed and tested, similar to the stepwise refinement method. These components have their own elements and their own state, and often live inside their own files. Wherever they are needed, they can be imported and used.
Components are created inside a JavaScript file with either the JS or JSX extensions. Speaking of JSX – let’s dig into it right now.
What is JSX?
JSX is the hybrid markup/programming language used by React. It is a mix of HTML and JavaScript, which may seem weird but it is an incredible feature of React.
Components are primarily made up of JSX. JSX defines what elements comprise the component, and also inserts dynamic content like application state and interactive code like event listeners.
JSX is a big part of React’s push to be “declarative.” Unlike vanilla JavaScript, in which you need to call methods on the Document API in order to create elements, JSX allows you to simply write out the elements as HTML. Babel, the React transpiler, will convert JSX into vanilla JavaScript for you. JSX is a major part of what makes React a joy to work with.
Conclusion
Components and JSX are the foundation of React. Everything else only builds upon those two concepts. Later in this series of posts, we will learn more about components, and also go into things like state, props, and hooks.
See the next post in this series to learn how to create your first React app!
If you follow these posts and videos, you’ll be a master of React in no time!
5 thoughts on “Introduction to React.js | React Tutorial for Beginners”