React 第一个应用
好久没写文章了,今天来分享一篇 关于 react 的 helloWord 。如果你也是刚开始学习react,或者已经久仰 react 并开始着手学习,那或许这篇文章能给你一点启发。 一、了解什么是单页应用,什么是多页应用 1、以前你做的或看到的网站可能包含多个单独的网页,主页一个导航,点开打开另一个网页,这就是传统的多页应用。多页应用有什么优缺点呢? 二、react的出现 首先单页应用无疑来说对用户的体验更加友好的,那么站在用户的角度,我们只要解决单页应用的缺陷不就两全其美了。 三、开始进入正题。 下面咱们围绕一个 单页应用的demo ,来细说 react 。 1、依赖库 <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> 第一行引入 核心 React 库,第二行引入 React DOM 库。如果没有这两个库,我们是没法创建 React 应用的。 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
添加 <script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script>
应用模板: <!DOCTYPE html> <html> <head> <title>React Components</title> <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> </script> </body> </html> 2、JSX var xxx = document.createElement("div"); xxx.className = "xxx"; xxx.xxx ....... xxx.appendChild(xxx); 但有了 JSX ,你就可以这样: <body> <script type="text/babel"> ReactDOM.render( <div>Batman</div>,document.body ); </script> </body> 运行上面的代码是在 3、组件的概念 var HelloWorld = React.createClass({ render: function() { return ( <p>你好,react 组件!</p> ); } }); 上面是利用 组件的引用: ReactDOM.render( <HelloWorld/>,document.body );
也许你会很好奇在浏览器上显示是什么结构的:
4、一个单页应用的demo
(1)、创建导航条组件 var App = React.createClass({ render: function() { return ( <div> <h1>Simple SPA</h1> <ul className="header"> <li>Home</li> <li>Stuff</li> <li>Contact</li> </ul> <div className="content"> </div> </div> ) } }); 上面简单的创建了个导航条的组件,其中 ``<div className="content"> 用来存放内容组件。 (2)、创建 Home 组件: var Home = React.createClass({ render: function() { return ( <div> <h2>HELLO</h2> <p>Cras facilisis urna ornare ex volutpat,et convallis erat elementum. Ut aliquam,ipsum vitae gravida suscipit,metus dui bibendum est,eget rhoncus nibh metus nec massa. Maecenas hendrerit laoreet augue nec molestie. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.</p> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> </div> ); } }); 到这里应该比较能适应 (3)、创建 Contact 和 Stuff 组件: var Contact = React.createClass({ render: function() { return ( <div> <h2>GOT QUESTIONS?</h2> <p>The easiest thing to do is post on our <a href="http://forum.kirupa.com">forums</a>. </p> </div> ); } }); var Stuff = React.createClass({ render: function() { return ( <div> <h2>STUFF</h2> <p>Mauris sem velit,vehicula eget sodales vitae,rhoncus eget sapien:</p> <ol> <li>Nulla pulvinar diam</li> <li>Facilisis bibendum</li> <li>Vestibulum vulputate</li> <li>Eget erat</li> <li>Id porttitor</li> </ol> </div> ); } }); (5)、往导航条添加链接 var App = React.createClass({ render: function() { return ( <div> <h1>Simple SPA</h1> <ul className="header"> <li><IndexLink to="/" activeClassName="active">Home</IndexLink ></li> <li><Link to="/stuff" activeClassName="active">Stuff</Link></li> <li><Link to="/contact" activeClassName="active">Contact</Link></li> </ul> <div className="content"> {this.props.children} </div> </div> ) } });
(6)、加载组件 ReactDOM.render( <Router> <Route path="/" component={App}> <IndexRoute component={Home} /> <Route path="stuff" component={Stuff}></Route> <Route path="contact" component={Contact} /> </Route> </Router>,destination); 上面用到了 那结合第五部统一分析下: <li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
<Route path="stuff" component={Stuff}></Route>
{this.props.children} 来加载显示出对应的组件。 结束语: 下面上完整代码: <!DOCTYPE html> <html> <head> <title>React! React! React!</title> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> <script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script> <style type="text/css"> body { background-color: #FFCC00; padding: 20px; margin: 0; } h1,h2,p,ul,li { font-family: Helvetica,Arial,sans-serif; } ul.header li { display: inline; list-style-type: none; margin: 0; } ul.header { background-color: #8fd2ff; padding: 0; } ul.header li a { color: #FFF; font-weight: bold; text-decoration: none; padding: 20px; display: inline-block; } .content { background-color: #FFF; padding: 20px; } .content h2 { padding: 0; margin: 0; } .content li { margin-bottom: 10px; } .active { background-color: #0099FF; } </style> </head> <body> <div class="content" id="container"></div> <script type="text/babel"> var destination = document.querySelector("#container"); var { Router,Route,IndexRoute,IndexLink,Link } = ReactRouter; var Home = React.createClass({ render: function() { return ( <div> <h2>HELLO</h2> <p>Cras facilisis urna ornare ex volutpat,et convallis erat elementum. Ut aliquam,ipsum vitae gravida suscipit,eget rhoncus nibh metus nec massa. Maecenas hendrerit laoreet augue nec molestie. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.</p> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> </div> ); } }); var Contact = React.createClass({ render: function() { return ( <div> <h2>GOT QUESTIONS?</h2> <p>The easiest thing to do is post on our <a href="http://forum.kirupa.com">forums</a>. </p> </div> ); } }); var Stuff = React.createClass({ render: function() { return ( <div> <h2>STUFF</h2> <p>Mauris sem velit,rhoncus eget sapien:</p> <ol> <li>Nulla pulvinar diam</li> <li>Facilisis bibendum</li> <li>Vestibulum vulputate</li> <li>Eget erat</li> <li>Id porttitor</li> </ol> </div> ); } }); var App = React.createClass({ render: function () { return ( <div> <h1>simple app </h1> <ul className="header"> <li><IndexLink to = "/" activeClassName="active">Home</IndexLink></li> <li><Link to = "/Stuff" activeClassName="active">Stuff</Link> </li> <li><Link to = "/Contact" activeClassName="active">Contact</Link> </li> </ul> <div className="content"> {this.props.children} </div> </div> ) } }); ReactDOM.render( <Router> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path = "Stuff" component = {Stuff}/> <Route path = "Contact" component = {Contact}/> </Route> </Router>,destination ); </script> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |