X
Popular Searches

What Is React, and How Do You Get Started with It?

React.

React is a web framework used to make interactive applications that depend on JavaScript for rendering dynamic content. It powers Facebook, Instagram, Twitter, and many other online services. Here’s how to get started with it.

How Does React Work?

React makes developing interactive web applications very easy. It’s not the only one of its kind—there are many frontend JavaScript web frameworks out there, such as Vue, Angular, and Ember. Nearly every application is using some sort of frontend framework, although it’s not impossible to create a web app without one (especially with the help of jQuery).

When you go to a website using React, the web server will send you back two things: a large JavaScript file, usually called bundle.js; and a template HTML page that loads that JS file with a <script> tag. This does make the first page load slower with React apps, but it makes up for it by greatly increasing subsequent page loads.

The bundle file contains all the code that makes React work alongside all the code that the application itself uses. Any dependencies from npm are bundled into this file as well.

The React application bootstraps itself, and renders the app’s content into an empty <div> tag on the HTML template.

ReactDOM.render(<App />, document.getElementById('root'));

There’s also the technique of server-side rendering, which does this step on the server to speed up initial load times (because React will always need to download the bundle first). This presents its own issues though, and is a bit more advanced than client-side rendering.

React Breaks HTML Into Components

React’s main allure is its ability to break down applications into individual components. These components can be reused in other places and replicated very easily, which means you can split up your project files rather than working on one index.html or JS file. It’s common to have a folder for reusable components you’ve built, and a separate folder for containers used to display those components.

React uses something called JSX, which is essentially a syntax extension for JavaScript that supports HTML. Because of this, you can generate HTML elements dynamically, and even embed JS expressions inside tags:

const element = <h1>Hello, {name}</h1>;

This functionality powers React components. You can make very simple components just by creating a function that returns some JSX:

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

Or, you can make use of React features by extending React.Component:

class App extends React.Component {
  render() {
    return (
      <h1>Hello, World!</h1>
    );
  }
}

This gives you access to lifecycle methods like componentDidMount() that let you run code when the component changes.

There’s also the concept of state; each component has its own state variables which track data about that component. You can update the state of a component and react to state changes, and components will (usually) re-render when the state is changed.

this.setState({toggled: True});

This is just the surface, and there’s plenty more to React than covered here. You can read about the rest of React’s core features in their docs.

How Do You Get Started?

React is a very complicated ecosystem, so this isn’t an easy question to answer. However, there’s a very good tool aptly named create-react-app that can handle a lot of the boilerplate code for you, and set up your project directory.

You’ll need Node.JS installed to run create-react-app, and you’ll want it installed anyway for development. You can run the script using npx, which is installed alongside npm and used to install and run scripts from the npm repository:

npx create-react-app my-app

This will install the starter project in the my-app folder. This project uses a custom library called react-scripts that takes care of the behind the scenes stuff like Webpack and Babel, as well as running a web server with hot reloading to server the app from (though you should use a real web server in production).

To start the app, run nmp start in the project directory. This will start the dev server, and take you to localhost:3000 in your default web browser. If you make any changes to the project, this should reload automatically.

Run nmp start in the project directory.

You’ll probably want to install the React debugging tools for your browser, which allow you to inspect React components and view their state and properties directly.

Can You Make Desktop Apps with React?

You can, in fact, this is how apps like Slack, Discord, and Visual Studio Code are built. They all use Electron, which essentially runs an extra instance of Chrome to render a webpage as a desktop app, without the URL bar or other browser functionality.

It works well enough that you might not even realize you’re really browsing a web page and not using a native app, because all the content is local and you don’t have to wait for slow page loads. Although, running an extra instance of Chrome means more RAM to eat up, and Electron apps certainly do run a bit slower than their native counterparts.

Electron can really run any webpage as a desktop app, but it plays very well with a web framework like React. You can read our guide to getting started with it to port your web app over to the desktop.

Anthony Heddings Anthony Heddings
Anthony Heddings is the resident cloud engineer for LifeSavvy Media, a technical writer, programmer, and an expert at Amazon's AWS platform. He's written hundreds of articles for How-To Geek and CloudSavvy IT that have been read millions of times. Read Full Bio »

The above article may contain affiliate links, which help support CloudSavvy IT.