初创react项目

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;