react-1
react
成功后 cd (你创建项目的文件夹) npm start 此时你会发现已经有一个react项目打开了在你的浏览器中 那在你构建的项目中有几个文件夹以及文件 比如README,node_moudles,srcc,pubilc 等等。 那么public中的index.html是根目录所有的组件都会汇集于此 那么在src中就是我们构建不同组件等的文件夹 里面必须包含一个index.js文件,你可以把他理解成一个容器, 装什么的呢?是用来一如所有你构建的组件的汇集于此而后导入public中的index.html中 那么下面开始实现以下简单的操作 "hello word" import React from "react"; ReactDOM.render(‘hello word‘,document.getElementById("app")) 此时呢,在你启动的浏览器的页面上不出意外的话就会显示出hello word的字样了 那这是传入一个字符串 ,那么问题来了 组件化 这也没有组件化啊? 那么我们在src文件夹下面在建立几个文件 比如 Hello.js,Word.js,Person.js 在Hello.js中写 import React,{Component} from "react"; Hello ) } } 这里面的语法是不是很奇怪 在js中写html 这就是react伟大的Jsx语法 为Javascript与xml的结合 在Word.js中写 import React,{Component} from "react"; export default Word class extends Component{ Word ) } } 在Person.js中写 import React,{Component} from "react"; export default Person class extends Component{ Person ) } } 那么好 现在我们的组件已经算是写完了 我们也exprot default 默认导出了,那么谁引入呢?对 就是src下的index.js文件 import React from "react"; ReactDOM.render( document.getElementById(‘root‘) ) //这里呢 就是若是多个组件的情况下 最外层必须有且只有一个父级盒子包裹 ``` 也就是你三个组件中的内容了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |