react基础教程之react安装详细教程
程序员文章站
2022-08-11 10:12:21
一、react安装方式
引入方式:script标签引入
1.可以去react官网去下载,也可以直接使用 BootCDN 的 React CDN 库,地址如下:
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内 嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。 所以如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。
2.实例:实例中包括了react中如何定义组件,如何添加类,注意在react每个组件中有且只有一个根节点
一、react安装方式
引入方式:script标签引入
1.可以去react官网去下载,也可以直接使用 BootCDN 的 React CDN 库,地址如下:<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>以上我们引入了三个库: react.min.js 、react-dom.min.js 和 babel.min.js:
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内 嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。 所以如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。
2.实例:实例中包括了react中如何定义组件,如何添加类,注意在react每个组件中有且只有一个根节点
react基础01 <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> .first{ color:#185; }<script type="text/babel"> { // ReactDOM.render( // Hello React, // document.getElementById("example") // ); } var Hello=React.createClass({ render:function(){ return(
第一个react组件
纠结 还是去 真是纠结啊
) } }); ReactDOM.render(,document.getElementById("example")); </script>3.组件之间的传值 props
<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><script type="text/babel"> var ComponentOne=React.createClass({ render:function(){ return(
{this.props.title},{this.props.hello}
) } }); var ComponentTwo=React.createClass({ render:function(){ var hello="hello react"; return( ) } }); ReactDOM.render(,document.getElementById("example")); </script>4.react 中的事件响应<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><script type="text/babel"> var EventTest=React.createClass({ // 状态初始值 初始化 getInitialState:function(){ return{ title:"点击更改" } }, // 定义事件 btnClick:function(){ this.setState({ title:"点击了按钮" }) }, render:function(){ return(
{this.state.title}
change ) } }); ReactDOM.render(,document.getElementById("example")); </script>npm 方法安装一键搭建方式
$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm startreact到此就安装好了
上一篇: jQuery html()方法教程使用不了无法显示内容的问题
下一篇: C语言常用字符串函数操作详情