✨1. 基于react脚手架制作简单的Hello,Welcome组件
React 18.1.0
index.js入口文件:
// 引入react核心库 import React from 'react' // 引入ReactDOM import ReactDOM from 'react-dom/client' // 引入App组件 import App from './App' // 渲染App组件到页面 （18之前的写法） // ReactDOM.render(, document.getElementById('root')) // 渲染App.js const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> {/* 检查App组件以及子组件里的一些代码是否有不合理的地方 */} <App /> </React.StrictMode> );
App.js文件：
// 创建“外壳”组件App // { Component } 这里不是解构赋值，而是利用了分别暴露 import React, { Component } from 'react' import Hello from './components/Hello/Hello' import Welcome from './components/Welcome/Welcome' // 创建并暴露App组件 export default class App extends Component { render() { return ( <div> <Hello /> <Welcome /> </div> ) } } // 默认暴露：暴露App组件 一个js文件只能有一个默认暴露 // export default App
components文件夹
Hello.jsx文件：
import React, { Component } from 'react'; import "./Hello.css" class Hello extends Component { render() { return ( <div> <h2 className='title'>hello,react!</h2> </div> ); } } export default Hello;
Hello.css文件：
.title { background-color: orange; }
Welcome.jsx文件：
import React, { Component } from 'react' import './Welcome.css' export default class Welcome extends Component { render() { return ( <h2 className='demo'>Welcome</h2> ) } }
Welcome.css文件：
.demo { background-color: skyblue; }
效果如下：
如果您也是react初学者，可以拿起手中的电脑跟着敲一敲哦~
