React Tutorial: Basic Concept Of React Component---babel, a translator
Getting started with react.js: basic concept of React component
1 What is React.js
React, or React.js is an open source javascript framework from Facebook. React.js is ideal for doing view rendering work in large scale or single page application (SPA). That is, React works as the V
in MVC.
2 How React works
The main concept of React is component. A React component can be composed of React components and ReactElement
s. Following the React way, you divide your app into several components according to function and responsibility.
React components and ReactElement
s are used as Virtual DOM, which looks like the markup of real HTML DOM elements.
Virtual DOM (components and ReactElement
s) syntax will be compiled and translated into plain javascript codes, which will render real HTML DOM elements in browser.
3 Write a React component
As mentioned above, two things are required to write and run a React component.
- React.js
babel
, a translator, can translate ECMAScript 6 codes and Virtual DOM syntax to ECMAScript 5 codes, which can be run in all modern browsers.
For simplicity, we're going to use React and babel scripts hosted by free CDN.
Create a HelloWorld
component which is responsible for rendering a HTML h3
tag and a HTML p
tag. Then mount the HelloWorld
component to div
tag whose id is app
.
Pay attention to type
attribute of script
tag. Its vaule is text/babel
, which means that the codes should be processed and translated by babel
.
Note: The net result of running above code snippets is that React will render real HTML DOM tags, div
, h3
and p
in browser. But div
, h3
and p
in above codes are not real HTML DOMs, they are also virtual DOMs. They are also React elements, that is ReactElement
exactly in React's eyes.
Take the <h3>Hello</h3>
element in above render()
function as an example, React.js will create a ReactElement
essentially. Equivalently, the behind the scenes code are as follows.
As you can see, a react component can be embedded as a virtual DOM within another component. For another example, you can give a root component, e.g. App
, and then use all sub components and ReactElement
s within this root.
4 CSS class and inline styles of React component
The usual way of adding CSS class name and inline styles will not take effect in React component.
The inline style color:blue;
and CSS class greet
not only won't work, but will raise javascript error. (See it in javascript console of developer tool in your browser.)
Just as I have said, h3
and p
here are ReactElement
s instead of real HTML DOM elements.
The correct way to set a CSS class name is to use className
property of React components or ReactElement
s.
Likewise, inline CSS styles should be wrapped as an object and passed to the style
property of React components.
Alternatively, if the inline styles are long and complex, you can predefine styles as a variable.
Note that the CSS property name should be written in CamelCase way, just as the way in plain javascript.
5 Browser plugin: React developer tool
You can install browser plugin React developer tool for purpose of debugging.
https://www.codevoila.com/post/38/react-tutorial-basic-concept-of-react-component
React Tutorial: Basic Concept Of React Component---babel, a translator的更多相关文章
- React tutorial
https://www.algolia.com Build Unique Search ExperiencesHosted Search API that delivers instant and r ...
- [React Native] Build a Github Repositories component
Nav to Repos component from Dashboard.js: goToRepos(){ api.getRepos(this.props.userInfo.login) .then ...
- [React] Preventing extra re-rendering with function component by using React.memo and useCallback
Got the idea form this lesson. Not sure whether it is the ncessary, no othere better way to handle i ...
- React 与 React Native 底层共识:React 是什么
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...
- 2、手把手教React Native实战之从React到RN
###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...
- (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去
原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...
- react用脚手架创建一个react单页面项目,react起手式
官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10 npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下 ...
- 使用react搭建组件库:react+typescript+storybook
前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...
- React 也就这样 01——React 元素的创建和渲染
React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...
随机推荐
- 032 搭建搜索微服务01----向ElasticSearch中导入数据--通过Feign实现微服务之间的相互调用
1.创建搜索服务 创建module: Pom文件: <?xml version="1.0" encoding="UTF-8"?> <proje ...
- Java计算工作日的工具类
有时候需要根据工作日计算指定的日期,也就是需要排除周六日. 1. 初版代码如下: package cn.xm.exam.utils; import java.util.Calendar; impor ...
- Linux低延迟服务器系统调优
最近做了一些系统和网络调优相关的测试,达到了期望的效果,有些感悟.同时,我也发现知乎上对Linux服务器低延迟技术的讨论比较欠缺(满嘴高并发现象):或者对现今cpu + 网卡的低延迟潜力认识不足(动辄 ...
- (原创)如何搭建PLC+上位机监控系统达到成本的最小化?
以西门子PLC举例; 西门子PLC有几个型号:S7-200SMART,S7-1200,S7-300,S7-400,S7-1500,价格从低到高. 1个项目中要求的IO数量:600点的DI+DO,若干个 ...
- win10企业版|激|活|码
使用下面的激活码升级成企业版 NPPR9-FWDCX-D2C8J-H872K-2YT43 激活后,如果右下角出现未激活的白色字体用cmd命令,管理员窗口运行下面的命令 win10企业版用户请依次输入: ...
- DEVexpress GridControl 属性设置
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...
- java加密解密工具类
package com.founder.mrp.util; import java.nio.charset.StandardCharsets; import java.security.Key; im ...
- Options of the DB storage of prometheus
参考: // Options of the DB storage. type Options struct { // The timestamp range of head blocks after ...
- [Cocos Creator]安卓上微信小游戏加载到100%就进不去了
最近用Cocos Creator 开发微信小游戏,构建发布到微信上,用安卓手机预览打开后加载到100%就不动了,开始以为微信开发工具版本的问题,后来用苹果的手机测试了一下,发现也有同样的问题. 仔细分 ...
- mmap vs read
先放个结论: 内存映射通常比随机访问更快,尤其访问的对象是分离的和不可预测的. 内存映射会持续占用pages, 直到完成访问. 这意味当长时间重度使用一个文件很久之前, 然后你关闭了它, 然后再重新打 ...