Getting started with React the simple way

If you're getting started with React, you'll probably be advised to start your project using 'create-react-app'. But in fact, there is a simpler way that doesn't require downloading thousands of files, creating a large complex project or running a background server, before you begin writing code.

React is a Javascript library, and like many other libraries, you can import it into your project using a CDN like so:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

Similarly, you'll also need to import react-dom.

Note also that the React documentation recommends including crossorigin for better error handling. So the documentation recommends using the following code:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Now, you can run a simple React hello world:

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('root'));

 

Although it's perfectly possible to write your React using createElement, you'll probably want to use JSX. JSX is syntactic sugar which should be transpiled to Javascript before being executed in the browser. 

There are a couple of advantages to JSX such as its HTML-like syntax, and it's balanced opening and closing tags which make for easier to read code.

Because a browser cannot read JSX, you'll need to include a tool to transpile your JSX code into regular Javascript. Babel is such a tool. The Babel REPL is a nice tool to show the Javascript that Babel produces from JSX.

For production purposes, you will want your JSX to be converted to Javascript before it's on your website. For development purposes however, you can import Babel with just a single-line into your file, and the browser will be able to read it.

Note however that the regular babel library dropped support for this functionality, so you will need to use the Babel-Standalone version.

Here's how you can add the ability to read JSX to your page:

<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

Now you're Hello World can look like this:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

 

You can also add Redux to your project by importing its library.

Once you're ready to build and deploy production-level apps with multiple files and modules, you can move on to installing the full React package locally.