React基础入门(React 基础与JSX) --第一篇

1.React 基础

1.1React 概述

1.1.1什么是React?

React 是一个用于构建用户界面的 JavaScript 库。
用户界面：HTML页面（前端）
React 主要用来写HTML页面，或构建Web应用

1.1.2React的特点

• 声名式
• 基于组件
• 学习一次，随处使用

  • 声明式:
    你只需要描述 UI（HTML）看起来是什么样，就跟写HTML一样
    React 负责渲染 UI，并在数据变化时更新 UI
    代码:

    const jsx = <div className="app">
    <h1>Hello React! 动态变化数据：{
           count}</h1>
    </div>
    

  • 基于组件

    组件是 React 最重要的内容
    组件表示页面中的部分内容
    组合、复用多个组件，可以实现完整的页面功能

  • 学习一次，随处使用

    • 使用 React 可以开发 Web 应用
    • 使用 React 可以开发移动端原生应用（react-native）
    • 使用 React 可以开发 VR（虚拟现实）应用（react 360）

2. React 的基本使用

2.1React 的安装

安装命令：npm i react react-dom

新建一个文件,输入命令,会初始化新城一个node_modules包,里面包含着所有的配置文件,以及两个重要的文件react与react-dom; 如图:

2.2 React 的使用

• react 包是核心，提供创建元素、组件等功能
• react-dom 包提供 DOM 相关功能等
• type=“text/babel”

1. 引入 react 和 react-dom 两个 js 文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js">.
<!-- 加上下放这个标签,
	 会解析JSX语法,
	 意思就是可以在js中解析html标签,
	 用法是给script标签
	 加一个type="text/babel" -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"</script>
</script>

2. 创建 React 元素
3. 渲染 React 元素到页面中

<script type