react学习--起步

helloworld

引入库

  <!-- crossorigin   可以知道跨域资源报错的详细信息 -->
  <!-- react核心库，与宿主环境无关 -->
  <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>

创建react容器

<div id="root"></div>

开始写react

  <script>
    // ReactDOM.render('显示的内容'，'容器')
     ReactDOM.render('你好，我是杨小柳', document.getElementById('root'))
  </script>

  <script>

    var span = React.createElement("p", {

    }, '一个span元素')

    //创建一个H1元素
    // 创建一个React元素，称作虚拟DOM，本质上是一个对象

    //  参数1：元素类型，如果是字符串，一个普通的HTML元素
    //  参数2：元素的属性，一个对象
    //  后续参数：元素的子节点
    var h1 = React.createElement("h1", {
      title: '第一个react元素'
    }, 'em', span)

    // ReactDOM将react元素变成真实的dom元素
    ReactDOM.render(h1, document.getElementById('root'))
  </script>

需要注意的是，我们创建的h1,span都是react元素，这一点很重要

我们打印一下

    console.log(h1)
    console.dir(document.createElement('h1'))

console.log() 可以取代 alert() 或 document.write()，在网页脚本中使用 console.log() 时，会在浏览器控制台打印出信息。
console.dir() 可以显示一个对象所有的属性和方法。

---

JS的扩展语法，需要使用babel进行转义。

<!-- 编译JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
  var span= <span>一个span元素</span>
  </script>

脚手架

npx create-react-app my-app
cd my-app
npm start / yarn start
入口文件是src/index.js
也可以将index.js改成index.jsx

凡是使用JSX的文件，必须导入React

开发环境搭建

VSCode配置

文件–首选项–设置，搜索emmet
emmet配置：

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

VSCode插件安装

ESLint：代码风格检查
ES7 React/Redux/GraphQL/React-Native snippets：快速代码编写

Chrome插件安装

React Developer Tools