Discover the World of Front-End Frameworks
Front-end frameworks are everywhere! Big tech companies like Facebook, Twitter, Amazon, and GitLab use them every day. Many startups have used them from the beginning, and major companies are even changing their codebase to move towards using them.
Before we go any further, what is a framework?
A front-end framework is a software that allows developers to build web applications.
The goal of using frameworks is to avoid reinventing the wheel to solve common problems that developers face when scaling or growing a web application. Examples include management of the user interface, user events, the DOM, and forms. Moreover, initializing a codebase with a framework simplifies things when starting out and when integrating new people into the codebase.
Frameworks also provide applications with modularity. In other words, they allow you to build your user interface from components. A component encompasses all of the HTML, JS, and CSS tailored to a specific need and can be reused in other user interfaces.
When it comes to front end, some of the most popular frameworks include React, Vue, and Angular. Each has its own specific features.
In this course, youâll be learning about React.
Why React?
Each framework has its own advantages and drawbacks. Without going into anything too technical, let's have a look at some of the benefits of choosing React!
Availability
React is an open-source project, distributed under the MIT License and funded by Facebook. As React is open source, you can access the source code directly on GitHub, where you can also contribute a feature or even flag an issue.
Community
The React community is very active, which makes life easier for you as a developer! đ€
Suppose youâre searching online for a solution to a problem. Itâs highly unlikely that youâre the first to run up against that particular issue, especially when you consider that React users include some pretty huge companies (Netflix, Twitter, PayPal, Airbnb, etc.). You can be confident that another developer will have encountered the same difficulty as you.
Take a look through the questions asked on Stack Overflow, for example. The React team also responds to issues on the React GitHub repository. Additionally, there is a vast quantity of newsletters, blogs, and YouTube channels created by users, whose energy and enthusiasm will encourage you to check out new tools. You'll see a few of these in the final chapter of the course.
Professional Opportunities
As React is one of the most popular frameworks out there, it opens the door to many professional opportunities. In the 2020 State of JS survey, 100% of the respondents knew of React and 80% had used it.
As you can see, there are many advantages to learning how to use React! đ
Transform a Simple HTML File Into a React App
You must be excited to get going! đȘ
Let's start by transforming an HTML form into a React app.
Use CDN Links
Weâre going to use CDN links to add React to an HTML file.
What is a CDN link?
Added in a script
tag, the CDN (content delivery network) link allows you to import a library directly in the HTML code.
Here's a demo to show you how it works:
As youâve just seen, it only takes a few steps to create a working React app. đ„ł
Keep Practice Simple With CodePen
You now have the option of working directly on your HTML form or using a workspace like CodePen. From now on, to keep things simple, demos will be in CodePen.
Letâs start by creating a new Pen. You have your HTML, CSS, and JavaScript file.
First, indicate in the HTML where your React app will live, using a simple id:
id="my-react-app"
<!-- The content of this HTML element will be replaced by my React components -->
In other words, you want to tell JavaScript where to attach itself and where to build its elements.
JS is up and running!
Letâs now attempt a React console.log:
It doesnât work because it needs some configuration: youâll need to add React, React DOM, and Babel to your CodePen by clicking on the JS settings. You should use this method to import them into your CodePen exercise rather than via script tags in the <head>
section of your HTML file.
Here are the essential CDN links for our React app. To give you a bit of context:
React â the API that allows for component management.
React DOM â the API in charge of generating components in the DOM.
Babel â the tool that allows you to use the latest JS syntax in the browser (ES6+).
Have you encountered the DOM? Do you remember what it is?
Your browser generates the DOM (Document Object Model) from the HTML to display a page. It has a tree-like structure. You can manipulate your DOM using the elements tool in your browserâs developer tools. If you want to refresh your understanding of these concepts, review the chapter on the DOM in the course Write JavaScript for the Web.
React doesnât directly manipulate the browser DOM. Instead, it generates a virtual DOM, separate from the browser DOM. When needed, it reconciles the virtual DOM with the browser DOM, carefully minimizing necessary operations. It allows for optimum performance, meaning React can be used in various contexts and not only within the browser, usually in native mobile apps, etc.
Create Your First React Component
Itâs time to write your first React component.
We'll be using function components, which are functions that return a React element. You'll learn more about components in the next chapter.
Letâs begin with the first function, MyComponent:
function MyComponent() {
return (Hello OpenClassrooms đ)
}
If you copy this code into the JS part, youâll find that nothing happens. This is completely normal: you still need to attach your React component to your HTML.
Attach React to Your HTML
From now on, weâll use React DOM to attach React to HTML.
In the snippet below, the ID react-goes-here
indicates where the React app will live in our HTML. Let's tell React DOM to render our React component, which is called MyComponent.
ReactDOM.render( ,
document.getElementById("react-goes-here"))
Ta-da! đ„ł
The component has been rendered!
Congratulations! Youâve just rendered your first React component! If youâd like to see what that looks like, check out the CodePen here: P1C2 - rendered component.
Give It a Go!
Weâre going to be working together to create a website for a plant shop: Jungle House!
Itâs time to put everything youâve just seen into practice. Your mission, should you choose to accept it, is the following:
Create the first Header component containing the name of the shop: Jungle House. The Header component corresponds to an
h1
tag.Integrate this within an HTML element with the ID "root".
Youâll find the CodePen link to begin the exercise here: P1C2 - Begin. The React, React DOM, and Babel have already been configured for you.
Click here to see a suggested solution: P1C2 - Solution.
Itâs up to you whether you complete these exercises by clicking on the links given or creating your own CodePen, copying and pasting the content as you go. Or you can even do it locally in HTML files, whatever you prefer!
Letâs Recap!
A JS framework is a set of classes, functions, and utilities that make it easier to create apps for browsers or mobile devices.
One of the most popular tools, React, is a library and a framework that can be used to create user interfaces.
Reactâs technical approach is to create modular code based on reusable components.
Three key advantages of React are the community, the documentation, and the professional opportunities on offer.
You now know how to transform a simple HTML file into React, and youâve created your first component!
In the next chapter, weâll tackle React components in a bit more detail. You'll learn Reactâs syntax â JSX â understand its inherent logic and see how to add a bit of style.
Canât wait to create professional components? Then see you in the next chapter!