react学习--起步

react基础学习

  • helloworld
    • 引入库
    • 创建react容器
    • 开始写react
    • JS的扩展语法,需要使用babel进行转义。
  • 脚手架
  • 开发环境搭建
    • VSCode配置
    • VSCode插件安装
    • Chrome插件安装

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>

react学习--起步_第1张图片

  <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>

react学习--起步_第2张图片

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

我们打印一下

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

react学习--起步_第3张图片

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

你可能感兴趣的