初识react，入门教程1（安装，路由跳转，父传子）
时间：2023-04-04 23:34:23
HTML5
没有node鞋的记得先安装node，npm会自带的先安装react，使用create-react-app快速搭建React开发环境create-react-app来自于Facebook，通过它我们可以在不配置的情况下快速搭建React开发环境。create-react-app自动创建的项目是基于Webpack+ES6的。执行以下命令创建项目：npxcreate-react-appmy-appcdmy-appnpmstartnpx这里不是错字——是npm5.2+自带的packagerunner。这样react就搭建好了，我们就可以开发了。首先我们安装reactnpminstallreact-router-dom--save的路由，并在App.js中导入ceshi、Page1、Page2，这是我自己定义的组件（下面有ceshi.js组件中的代码），这里其实相当于Vue的router.js=>import文件，配置路由跳转importReactfrom'react';从'react-dom'导入ReactDOM；从“./components/ceshi”导入ceshi；从'./components/Page1'导入Page1；从'./components/Page2'导入Page2；导入'./App.css'；从'react-router-dom'导入{Router，Route，Switch，Redirect}；从“历史”导入{createHashHistory}；consthashHistory=createHashHistory();functionApp(){return();}导出默认应用；在ceshi.js中，我们跳转到Page1里面，React中的类名都是classNameimportReactfrom'react';从'react-ro导入{Link}uter-dom';//这里导入路由import"./ceshi.scss";//导入我们的scss文件functionApp1(){return(我是测试页~~~666
123我是好孩子Page1跳转 );}导出默认App1;一开始，我遇到了一个移动项目。安装flexible和Vue一样（同时安装sass）npmilib-flexible--savenpmisass-loadernode-sass--save-devnpmipostcss-px2rem--save使用config/webpack.config.js在项目中配置如果没有配置文件则执行npmruneject这个操作是不可逆的，会暴露配置文件//在配置文件中添加如下两行代码constpx2rem=require('postcss-px2rem');px2rem({remUnit:75})这里的75是因为设计图是750，大家可以根据实际需要改。它是750然后importimportReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';importAppfrom'./App';import*asserviceWorkerfrom'./serviceWorker';//导入这两行（类似于Vue中的main.js）//import'antd-mobile/dist/antd-mobile.css';//antd-mobileUI库（移动端）import'lib-灵活';//pxconversionremReactDOM.render(
,document.getElementById('root'));//如果你想让你的应用离线工作并加载更快，你可以改变//unregister()到下面的register()。请注意，这会带来一些陷阱。//了解有关服务工作者的更多信息：https://bit.ly/CRA-PWAserviceWorker.unregister();重启项目后看到，配置成功parent给child传递参数。我比较了Vue和React之间的区别。Vue导入子组件需要组件注册组件。React可以直接使用importUheaderfrom"./Uheader"
subcomponents接受Vue接受，需要在props中声明接受React。可以直接接受props.xxxfunctionUheaders(props){console.log(props)return(- {props.utitle}utitle是父组件传递的参数
- {props.subtitle}subtitle是父组件传递的参数
li>
