React Fundamentals

Prerequisites

Javascript / Typescript
HTML / XML
CSS

What is React?

Developed by Facebook
Designed to build reactive user interfaces
Excels in building complex, interactive, and scalable front-end applications.
UIs Composed of Components

What is React?

What is React?

What is React?

Virtual DOM

React Packages

React and ReactDOM

    import React from 'react';
import ReactDOM from 'react-dom';

function Hello() {
  return <h1>Hello, world!</h1>;
}

// Render the App component 
// into the root element
const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(<Hello />);

Hello World!

Let's now honour the tradition and show how to display "Hello World" on your screen using ReactJS. We will also explain the role of the two main packages powering React, the ReactDOM package and the React package.
First, there is the React package, which manages the reactivity of components. You will mainly use this package in your code.
Then, there is the ReactDOM package, which does most of React's background heavy lifting, such as rendering and updating your components into your browser's DOM.
You will usually use the ReactDOM package only once when rendering the root of your React application. This is also our case when rendering the Hello components into a DOM element with the ID "root."
Wow, check out the strange syntax! We are using HTML code inside the javascript code. This syntax is called JSX, and we will dive into it soon.
For now, you can consider that we can define custom HTML elements using Javascript functions, such as our Hello component, which returns the "Hello World" text as an HTML header.

React Playground

Hello World

Click

⏸️ Paused

It is time for your first interactive exercise! This time, you can code your exercise directly in piePlayer, or, if you prefer, in the description below.
Your goal is to change the Hello World text to its Spanish equivalent: Hola Mundo! We added unit tests to check your solution, and if you did everything right, your tests will turn green! Make sure to get the correct spelling and punctuation to avoid frustration.
You can browse exercise files in the interactive editor. First, clicking on "Script" allows you to view source code if your solution.
Clicking on CSS will allow you to view and modify styles of your solution. Go ahead and try to make something more funky than this black and white example!
The HTML tab shows the source of the HTML page that we are creating. If you open it, you can see we are loading React and ReactDOM from CDN and adding some fonts. Normally React packages are bundled using a library such as Webpack or SWJS, but that cannot be achieved in the browser.
The test tab shows the source of our unit test file. Please check it out to see what the tests is expecting!
Once you examine all exercise files, it's time to do the work! Currently, the exercise is in the view or read-only mode. You have to press the "Edit" button to launch the editor.
You can modify the code in the editor, most errors are shown immediately as you type.
Once you are done and ready to test your solution, please press the Play button and bask in the glory of green test results!
We will pause the presentation so you can finish the exercise. Once you are ready to continue, please click on the Play button the the piePlayer.

Full Stack Development

React and ReactDOM

React Fundamentals

Prerequisites

What is React?

What is React?

What is React?

What is React?

Virtual DOM

React Packages

React and ReactDOM

React Playground

Hello World