前言
React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架。
一、安装并构建React应用
在确定安装node后,开始安装React,使用npm执行以下命令:
npm install --save react react-dom
接下来创建一个文件夹作为工作空间(当然也可以不创建),进入该目录执行以下命令:
create-react-app my-app 这里开始创建一个名为my-app的React项目,创建完成后小执行: cd my-app 进入my-app目录 npm start 启动项目,这时候就可以看到启动页面了。
二、JSX 简介
https://doc.react-china.org/d...
这里有对 JSX 的详细介绍, 目的就是为了让我们了解和接受这种编程方式。
三、元素渲染 Hello,world!
1. 这样用
我们在第一部分创建的React项目中, 执行的页面是内容是index.hmtl,位置在根目录下的public中,这里创建了一个<div id = "root"></div>, 而在根目录下的src中得index.js实际上操作了index.html, 先不管他是怎么做的,我要写我的 Hello,world! 很简单, 我在index.html中这样做,添加一个id为 test 的div,
然后在index.js中这样:
保存一下,hello,world! 就在页面上了, 这样一来,React的最最基本的用法,好像就知道了。
2. 官方文档这样讲
- 元素
元素是构成 React 应用的最小单位。
与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。这就是那个元素。
- 节点的渲染
index.html中的 <div id="root"></div> 称之为 “根” DOM 节点。我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点。
要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:
也就是这样做了!