Create a Web Application With React.js

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.

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.

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:

<div id="my-react-app">
    <!-- The content of this HTML element will be replaced by my React components -->
</div>

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+).

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 (<div>Hello OpenClassrooms 👋</div>)
}

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(<MyComponent />,
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!