❮ React Rendering Elements React Component Api ❯

React Installation

React can be directly downloaded and used, with many learning examples provided in the download package.

This tutorial uses React version 16.4.0. You can download the latest version from the official website https://reactjs.org/.

You can also use the React CDN library from Staticfile CDN directly, with the following address:

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Not recommended for production environments -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

Official CDN addresses provided:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Not recommended for production environments -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Note: Using Babel to compile JSX in the browser is very inefficient.

Example Usage

The following example outputs "Hello, world!"

React Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>

</body>
</html>

Example Analysis:

In this example, we have introduced three libraries: react.development.min.js, react-dom.development.min.js, and babel.min.js:

react.min.js - The core library of React
react-dom.min.js - Provides DOM-related functionality
babel.min.js - Babel can convert ES6 code to ES5 code, allowing React code to run in browsers that do not support ES6. Babel also supports JSX internally. Using Babel together with the babel-sublime package can elevate the syntax rendering of the source code to a new level.
```
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
```

The above code inserts an h1 heading into the node with id="example".

Note:

If we need to use JSX, the type attribute of the <script> tag should be set to text/babel.

Using React via npm

If your system does not support Node.js and NPM, you can refer to our Node.js tutorial. We recommend using the CommonJS module system in React, such as browserify or webpack, with this tutorial using webpack.

In China, using npm can be slow, so you can use the cnpm command line tool customized by Taobao (with gzip compression support) instead of the default npm:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

This allows you to use the cnpm command to install modules:

$ cnpm install [name]

For more information, visit: http://npm.taobao.org/.

Quickly Set Up React Development Environment with create-react-app

create-react-app is from Facebook, and with this command, we can quickly set up a React development environment without configuration.

The project automatically created by create-react-app is based on Webpack + ES6.

Run the following commands to create a project:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

Open http://localhost:3000/ in your browser, and the result should look like this:

The directory structure of the project is as follows:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

manifest.json specifies the start page index.html, where everything begins, so this is the source of code execution.

Try modifying the code in src/App.js:

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          &lt;img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to tutorialpro.org</h2>
        </div>
        <p className="App-intro">
          You can modify the code in <code>src/App.js</code>.
        </p>
      </div>
    );
  }
}

export default App;

After modification, open http://localhost:3000/ (usually auto-refreshed), and the output should be as follows:

src/index.js is an entry file, and we can try modifying the code directly in src/index.js:

Example

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

function Hello(props) {
  return <h1>Hello World!</h1>;
}

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

At this point, opening http://localhost:3000/ in the browser will output:

Hello World!

❮ React Rendering Elements React Component Api ❯