React入门 , 运行环境搭建

1.需要的工具

• Node.js
• npm

2. 安装工具

• 当我们在官网下载并安装Node时，npm也自动安装好了，疯狂next即可。

• 安装完成后终端分别输入 node -v 和 npm -v 看到版本号即可,如图
  

• 因为使用npm很慢，我们可以设置使用国内的的淘宝镜像

  npm config set registry https://registry.npm.taobao.org 
  

3. script标签引入文件的方式

<div class="box"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <!-- script标签注意些type属性 -->
  <script type="text/babel">
    ReactDOM.render(
      <div>
        <h2>hello world</h2>
      </div>
    ,document.querySelector('.box'))
  </script>

• 运行文件看到大名鼎鼎的 hello word 就成功了.

4. create-react-app脚手架方式创建项目

• 1.终端全局安装create-react-app脚手架

npm install -g create-react-app

• 2.安装成功后终端输入create-react-app + 项目名来创建项目,比如

create-react-app first-react-demo

• 3.在创建成功的基础上，我们在打开first-react-demo这个文件夹，地址栏输入cmd并回车，在打开的cmd窗口中，输入npm run start
  最后显示如图
• 4.浏览器输入localhost:3000即可访问