1.首先判断node.js是否安装
win+R >>> cmd >>> node -v
判断node.js安装的版本
如果未安装
Node中文网址:Node.js 中文网
下载对应你电脑的版本,要用稳定版,切记 (LTS)
2.安装官方脚手架
npx create-react-app 项目名称
3.项目初始化
cd 项目名称
npm start
4.之后就可以开始写react项目了
5.删除掉src里面无用的文件以及图片留下index.js App.css
index.js中是这样的
import React from 'react';
import { createRoot } from 'react-dom/client';
// 组件名称首字母必须大写
import App from './App'
//jsx语法
//render 决定这个组件显示的的内容
createRoot(document.getElementById("root")).render(<App></App>);
App.css中是这样的
h1{
color: red;
}
6.新建一个App.jsx
import {Component} from 'react';
import "./App.css"
// react 组件 分为两种
/*
\1. 函数式组件 又称无状态组件(没有自己的响应式数据);
\2. 类组件 又称有状态
*/
// 函数式组件 通常用来展示不可变数据
function App (){
let msg = '我是函数式组件'
return (
<div>
<h1>
{msg}
</h1>
</div>
)
}
// 类组件
class Mycom extends Component{
name='张三';
age =18;
// 组件渲染时调用
render(){
return(
<div>
<h1>
我是类组件 {this.name} {this.age}
</h1>
<button onClick={this.clickMe.bind(this)}>点我一下你试试</button>
<App></App>
</div>
)
};
clickMe(){
console.log(this.name)
alert("我点你一下咋地")
}
}
export default Mycom;