建立并运行一个react项目

一、在html页面中使用react

直接引入以下库即可使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React!</title>
    <!--
      react:react核心库
      react-dom: react dom有关功能
      babel:将es6转为es5语法
    -->
    <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="root"></div>
    <script type="text/babel">
      class Index extends React.Component {
        constructor(props) {
          super(props);
        }
        render() {
          return (
            <div>
              <h1>主页</h1>
            </div>
          );
        }
      }

      const root = document.getElementById('app');

      ReactDOM.render(<Index />, root);
    </script>
  </body>
</html>

二、使用create-react-app创建react项目

安装node

安装过不用安装，没安装去官网下载,安装最新稳定版
全局安装cnpm，设置镜像源为淘宝，防止安装堵塞

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装create-react-app，并检查

cnpm install create-react-app -g
//  检查
create-react-app -V

使用create-react-app创建一个项目并运行

create-react-app my-react-app
//  等待安装后......
cd my-react-app
npm start

浏览器自动打开即可看到页面，或者输入<http://localhost:3000/>即可访问页面。