Create a new React application

There are two ways to create a React application: script tag introduction and scaffolding

React is introduced via the HTML script tag

React is a JavaScript library, so you can write the UI directly with React by importing JavaScript files in the HTML via script tags. A complete example:


      
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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>
    
    <! -- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <div id="name"></div>
    <div id="age"></div>
    <div id="hello"></div>

    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>.document.getElementById('root'));// JAX expressions
      ReactDOM.render(
        <h1>My name is HAHA</h1>.document.getElementById('name'));/ / the react elements
      const age = <h1>My age is 12</h1>
      ReactDOM.render(
         <h1>I am 12 years old </h1>.document.getElementById('age'));/ / component
      class Hello extends React.Component {
        render() {
          const {name} = this.props
          return <h1>Hello {name}!</h1>
        }
      }

      ReactDOM.render(
         <Hello name = 'HAHA'/>,
        document.getElementById('hello')
      );

    </script>

  </body>
</html>
Copy the code

Open the HTML in a browser and you can see

Command line tool

Create-react-app is a FaceBook scaffolding tool for creating react applications. Check whether the Node version is above V10, as some dependent packages may require >=9.10.0 if an upgrade is required, execute Brew Upgrade Node

npx create-react-app my-react-app
cd my-react-app
npm start
Copy the code

Introduction to the NPX command NPM has added the NPX command since version 5.2. This command makes it easy to invoke project internal modules and avoids globally installed modules. Node has its own NPM module, so you can use the NPX command directly. Manual installation: NPM install -g NPX

After NPM start, the browser will open a page and render

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />Learn React, Hello React</header>
    </div>
  );
}

export default App;

Copy the code

The interface is updated as soon as possible

Create a new React Native application

The React of the Native command line tools (React – Native – cli) installation environment specific reference reactnative. Cn/docs/gettin…

// Create project RNApp
npm install -g yarn react-native-cli
react-native init RNApp
// Compile and run
cd RNApp
react-native run-ios // You can also run the application directly in Xcode
Copy the code

You can see

Then modify the app.js file and save, you can see the interface update results

After the React project is created, we can use it to put the React knowledge into practice 😆