Slide 16.8: Introduction to React

Introduction to React

React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

How to Make React Work
React is a JavaScript library for building user interfaces, and is used to build single page applications. React allows us to create reusable UI components. To use React in production, you need NPM and Node.js installed.

index.html

01<html lang="en">
02  <head>
03    <meta charset="utf-8" />
04    <meta name="viewport" content="width=device-width, initial-scale=1" />
05    <title>React App</title>
06  </head>
07  <body>
08    <div id="root"></div>
09  </body>
10</html>

index.js

01import React from 'react';
02import ReactDOM from 'react-dom';
03 
04class Test extends React.Component {
05  render( ) {
06    return <h3>Hello, World!</h3>;
07  }
08}
09ReactDOM.render( <Test />, document.getElementById( 'root' ) );
10 
11/* This example creates a component called "Test," which is rendered
12   in a container called "root" in the "index.html."
13*/

localhost: 3000

`1`	`Hello, World!`