React学习笔记一

一：安装react

1:直接下载react源码包，把需要用到的js文件引入自己的页面即可。

2:BootCDN 的 React CDN 库：

在页面代码中导入即可：

 <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>

时间： 2024-10-14 00:40:47

React学习笔记一的相关文章

React学习笔记 - 组件&Props

React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件接收props,返回react元素. 1. 函数定义\类定义组件最简单组件方式 - 函数定义组件: // 函数定义组件 function Welcome(props) { return <h1>Hello, {props.name}!</h1>

React学习笔记-1-什么是react，react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢?

React学习笔记---项目构建

简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的工具,对于初学者来说,就有了一个可以学习.开发.测试的平台. Yeoman 官方的介绍是这样形容的:“Web App的脚手架工具” --- Yeoman的目的是帮助用户更好的启动项目,提供最好的实践和工具使用户保持高生产率. Yeoman提供了一个生成器的生态系统,并提供了一个“Yeoman的工作流

react学习笔记1

# 1.hello world 学习一个语言,最好的方式,我们需要去官网去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo.目前为止最新版本为15.3.0,后续没有特别说明,我们都是基于该版本. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

react学习笔记(一)

在开篇之前,先来说说选择react的初衷. 一个初学者,在开始选择深入了解一个框架之前,我查阅了一些资料,做出了对三大框架的一些基本分析. 1.数据流.Vue和Angular都是支持双向数据绑定,也就是在界面的操作能实时反映到数据,数据的变更能实时显示在界面上.Vue默认为单向数据绑定.React支持单向数据绑定,也就是说给定一个原始的页面,之后添加一些组件化操作,得到一个变化后的页面. 2.组件化.Vue和React都支持组件化.组件,即对一些数据和方法的封装,它可以用来构建用户页面,并通过任

React 学习笔记（学习地址汇总）

好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs/getting-started.html JSX语法地址:http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax

react学习笔记4

<header class="site-header jumbotron"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h1>欢迎来到妙味课堂</h1> <p class="lead">妙味课堂是一支独具特色的IT培训团队,妙味反对传

react学习笔记3

<div id="demo"></div> <script type="text/babel"> var ItemComponent = React.createClass({ render:function (){ return ( <li>{this.props.item}</li> ) } }); var ListComponent = React.createClass({ render:funct

React学习笔记(三) 组件传值

组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React.createClass({ getInitialState : function(){ return { myMessage: ['我是父组件data1','我是父组件data2','我是父组件data3',] } }, render : function(){ return ( <div> &

react 学习笔记 npm 命令

第一步: cnpm install --save react react-dom babelify babel-preset-react 第二步: 安装es2015 cnpm install babel-preset-es2015 --save