In the world of web development, there are a number of hip names tossed around - Angular, Vue, React. These are some of the front end frameworks that have gained popularity over the last few years. These frameworks provide a standardized way of creating and deploying parts of web applications. This allows developers to put their energy and focus towards designing a good experience for end users of the application.
The following lessons are all about just one framework, React. Why learn React? In the last few years, React has surpassed other frameworks in popularity and demand. For good reason, too! In this lesson, we will discuss what React is and why it is so awesome and useful.
- Introduce the React framework at a high level
- Explain some of the benefits of using React when developing web applications
The React framework is built entirely out of JavaScript, using a combination of dependencies. Using React might seem significantly different to what you're used to when writing vanilla JavaScript (or, in other words, just JavaScript). This is because React provides a specific way to organize and structure the design of a web application.
Using JSX, an extension of vanilla JavaScript with a specific syntax, we can write code that looks very similar to HTML. Snippets of this JSX get separated out into components, sort of like building blocks.
When combined, these components form a fully working web application. These components let us separate code and functionality in a logical and easy to read way, producing highly reusable, independent, chunks.
React is more than JSX and components - React has a lot going on under the hood. Just to briefly touch on some of the cool features, React includes:
- a virtual DOM, that allows for fast, efficient, content rendering. Great for highly interactive apps;
- a declarative writing structure, allowing you to simply express how your app should look and let React handle updates and underlying data changes;
- Babel: an included transpiler that converts modern JavaScript and custom code like JSX into more widely compatible JavaScript;
- Webpack: a 'bundler' that takes all our work, along with any required dependency code, and packages it all up in a single, transferable bundle
- Built in ESLint functionality to help improve our code;
React also has a recommended tool, create-react-app, that makes it easy to
create a new React project from scratch. The create-react-app tool sets up
a preconfigured, default, project, ready to launch with npm start. This package
includes functionality built to be mobile friendly and progressive. That means apps
will work on all modern browsers and mobile devices.
React is actively maintained by Facebook, and new features are added regularly! Their docs are well-written and translated into many languages. Once you have a good grasp on React, you will have the ability to create cutting-edge web applications and sites. Knowing React also opens doors to similar frameworks, such as React Native for building mobile apps.
You can imagine a framework is like a car - while it is interesting and useful to know how the engine works or how to fix a transmission, it isn't necessary for using the car to get where you want to go. What is necessary is that you understand how to use the pedals, turn the wheel and change gears.
First, we will be covering what you need to know to use React. Later, we'll go into more detail on the critical parts: the engine under the hood. By the end, you will be able to quickly design and create your own React apps!