React 学习实践录 First time

前言

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. 官方文档这样讲

1. 元素

元素是构成 React 应用的最小单位。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。这就是那个元素。

1. 节点的渲染

index.html中的 <div id="root"></div> 称之为 “根” DOM 节点。

我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：
也就是这样做了！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!