React前端开发学习(一)
来源:互联网 发布:ug8.5编程步骤 编辑:程序博客网 时间:2024/05/16 14:08
经过了第一二周对于整个实训项目功能,数据库的讨论确定,各自也分配了不同的任务,我的任务是使用react前端实现pc端对于问卷的操作,主要是对于问卷的页面显示,和数据填写,也就是与数据库的一个交互过程。
首先与学长进行交流,学长提供了一些学习react,Bootstrap ,jQuery的学习资料
搭建开发环境,使用webstorm进行开发,原本就有git不需要再安装,安装node
Reatct学习:
一.HTML
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body></html>
上面代码有两个地方需要注意。首先,最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。其次,上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
二.ReactDOM.render()
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));三.JSX语法
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写
var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example'));
上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
四.组件
React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; }});ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example'));上面代码中,变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时,会自动生成 HelloMessage 的一个实例(下文的"组件"都指组件类的实例)。所有组件类都必须有自己的 render 方法,用于输出组件。组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloMessage name="John"> ,就是 HelloMessage 组件加入一个 name 属性,值为 John。组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。
注意,组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。另外,组件类只能包含一个顶层标签,否则也会报错。
五.ReactJS小结
下面来总结一下,主要有以下几点:
1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。
2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。
3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4、组件名称首字母必须大写。
5、变量名用{}包裹,且不能加双引号。
- React前端开发学习(一)
- React前端开发学习(二)
- React前端开发学习总结(三)
- 前端开发学习笔记一
- React+webpack搭建前端开发环境(一)
- React前端入门学习
- React Native 学习一 搭建开发环境
- 前端React开发入门笔记
- react+redux 前端开发流程
- 前端开发-react-native 项目
- 前端开发学习笔记(一)
- Web前端开发requireJs学习研究(一)
- 初学者前端开发学习(一)
- Web前端开发学习笔记 (一)
- React学习(一):React入门
- React Native开发(一)
- React Native开发(一)
- React Native学习(一)——搭建开发环境
- C++对象的生成和消亡时刻分析
- 异或
- 异或
- solr学习笔记 -- day04 导入数据、自定义类型
- struts2第十六讲学习笔记,上传文件
- React前端开发学习(一)
- Blender相关的一些链接(持续更新)
- 进程池的学习
- kubernetes 概念介绍二
- 进度条的使用
- Java实现二进制中1的个数
- C++11智能指针之优先使用std::make_unique和std::make_shared而不是直接使用new
- 确定比赛名次
- Struts2的默认Action