源于facebook13年开源 js框架,用于构建页面的js库。使用简单,直接在web页面引用react 三个核心js包即可。
- react.min.js - React 的核心库
- react-dom.min.js - 提供与 DOM 相关的功能
- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
基本语法
1.定义变量: const 关键字
JS 使用 var定义一个变量 ;react使用 const,如const div = document.createElement('div');
2.元素渲染:render方法
ReactDOM.render(...) 是页面渲染方法,所有的 js,html 都可通过它进行页面渲染
//定义一个页面元素JSX语法(js的语法扩展,html+js)
const element = <h1>Hello, world!</h1>;
//把定义的元素传递给 ReactDOM.render() 的方法来将其渲染到页面上:
ReactDOM.render(
element,
document.getElementById('example')
);
注:react中用{}接收js表达式,如{1+1};{i == 1 ? 'True!' : 'False'};注释: {/*注释...*/}
计时器sample
//封装创建一个 React.Component 的 ES6 类,该类封装了要展示的元素
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}
//每隔1s调用一次tick方法;tick将当前时间赋值给clock类,通过props获取时间,渲染页面
setInterval(tick, 1000);
//注:
1 使用 ES6 类写法,用 this.props.属性名 来取值
2 使用props 赋值,并从props中获取值显示页面
3 定义的class 就等同于自定义标签类,用<Color ,<Name 类展示对应值
使用props赋值传递sample
//自定义三个类,分别用于接收props不同属性值
class Name extends React.Component {
render() {
return <h1 网站名称:{this.props.name}</h1>;
}
}
class Url extends React.Component {
render() {
return <h1>网站地址:{this.props.url}</h1>;
}
}
class Nickname extends React.Component {
render() {
return <h1>网站地址:{this.props.nickname}</h1>;
}
}
//自定义app函数,使用name、url标签
function App(props) {
return (
<div>
<Name name={props.name}/>
<Url url={props.url}/>
<Nickname nickname={props.nickname}/>
</div>
);
}
//渲染页面,传入name url等参数显示页面
ReactDOM.render(
<App name={"react"} url={"http://www.runoob.com"} nickname={"Runoob"}/>,
document.getElementById('example')
);