004-React Getting Started Overview

I. Overview

Reference address: https://reactjs.org/docs/try-react.html

1.1, local fast experience

<!DOCTYPE html>
<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>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
  </body>
</html>

1.2, a complete development environment

　　including linting, testing and built-in optimizations;

1.2.1. New

Create new applications with a full-featured starter kit.

See idea tool method: http://www.cnblogs.com/bjlhx/p/8968382.html

npm command [node6+]

npm install -g create-react-app
create-react-app my-app

cd my-app
above sea level start

1.2.2, add an existing

Add React to a build system or larger application.

See idea tool method: http://www.cnblogs.com/bjlhx/p/8968382.html

npm way:

npm init
npm install --save react react-dom

Directory Structure

　　node_modules: This contains some components that will be used in the react project, downloaded during installation, you can go in and see, there are some components we may use such as base64;

　　public: It contains the startup page in our project;

　　src: It contains some js files, css files, img files, etc. that we use ourselves