codecamp

React 前言

React 构建状态 新版本

React 是一个用于构建用户界面的JavaScript库。

  • 用做UI: 许多人把React当做MVC设计模式中的视图(view),当把React成为你的技术掌握之后, 它可以很轻松应用于一个小功能的项目。
  • 虚拟DOM:React用一个”虚拟DOM”实现了超高的性能,配合nodeJS也可以实现在服务端的渲染,不存在耗时的浏览器dom渲染。
  • 数据流: React是一种减少引用数据流的实现方式,并且比传统的方式更容易实现数据绑定。

NEW! 查看我们最新的项目React Native, 它使用React和JavaScript创建本地应用(比如Android和iOS的APP)。

实例

class HelloMessage extends React.Component{

    render(){

        return <div>你好 {this.props.name}</div>;

    }

}

ReactDOM.render(

    <HelloMessage name="W3Cschool" />,

    document.getElementById('example')

);


尝试一下 »


此示例将“你好 W3Cschool”呈现在页面里(页面中的id为example的元素里)。

你会注意到我们使用类似HTML的语法,我们称之为JSX。 React不一定需要使用JSX,但是它使代码更可读,写它感觉像写HTML。

 React中包含一种简单的变换,它允许将JSX转换为本地JavaScript,供浏览器进行使用。

 没有转换的JSX是不能直接在本地浏览器上运行的。

安装

对于初学者而言,最快的方法是在HTML中引用CDN提供的JavaScript库:

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>



React 特点
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }