React 学习实践录 First time

前端之家收集整理的这篇文章主要介绍了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() 的方法来将其渲染到页面上:
也就是这样做了!

猜你在找的React相关文章