React从入门到精通系列之(1)安装React
一、安装ReactReact是灵活的,可以在各种类型的项目中使用。 你可以使用它创建一个全新的应用程序,也可以逐步将其引入现有的项目中,而不需要重写整个项目。 创建一个单页面应用
$ npm install -g create-react-app $ create-react-app hello-world $ cd hello-world $ npm run start 上面只是创建了一个React应用,不需要关心也需要不处理后端逻辑或数据库; 在已经开发的项目中使用React您不需要重新编写应用程序即可开始使用React。
安装React我们建议使用Yarn或npm来管理React前端模块的依赖。 通过Yarn安装: yarn add react react-dom 通过npm安卓: npm install --save react react-dom 使用ES6和JSX我们建议您使用Babel中的React配置让您在JavaScript代码中可以使用ES6和JSX。 ES6是一组现代JavaScript特性,使开发更容易,JSX是对React非常有效的JavaScript语言的扩展。 具体请百度Babel如何在许多不同的构建环境中配置Babel。首先 确保你安装了 使用ES6和JSX写一个HelloWorld的例子我们建议使用像 一个简单的React示例如下所示: 这里我使用的是bower来安装react和react-dom。 mkdir hello-world & cd hello-world bower install react babel --save touch index.html 然后在index.html中写入以下内容: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/react-dom.js"></script> <script src="bower_components/babel/browser.js"></script> <script type="text/babel"> var doc = document; ReactDOM.render( <h1>你好,react</h1>,doc.getElementById('app') ) </script> <title>ReactDOM.render</title> </head> <body> <div id="app"></div> </body> </html> 最后在浏览器中打开这个页面,就可以看到最终效果。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |