react基础教程

• 学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

官网

• https://react.docschina.org/
  

• 官方教程：https://react.docschina.org/tutorial/tutorial.html

• 介绍什么的就不说了，从代码开始

安装

• 在此之前，请确保已经安装了node.js.
• cmd输入node -v 显示版本号表示已成功安装
• node官网：https://nodejs.org/en/
  
• 快速开始

npx create-react-app my-app
cd my-app
npm start

• 注意，安装是外网安装，建议使用镜像，不然会很慢

• 详情可参考：https://blog.csdn.net/qq_42813491/article/details/90311075

• 以上三个命令执行完，显示以下界面表示脚手架安装成功
  

• 这是主界面，跑在3000端口
  

目录结构

• 都很常见，不多介绍了

hello world

• src下一些没用的可以删掉，如下：看起来对新手更友好

• index.js入口文件和下边的服务器相关配置文件不要动了，css什么的可以删掉
• APP.js

import React from 'react'

class App extends React.Component{

  render(){
    return <h1>hello world</h1>
  }

}

export default App;

• 也可以这样

import React, {Component}from 'react'

class App extends Component{

  render(){
    return <h1>hello world</h1>
  }

}

export default App;

• 效果图
  

• 注意点

• render里边是html+js混写的jsx语法，HTML标签不需要加引号

• 最外层一定要有个根标签包裹，最好再加上一个圆括号

• 单标签必须封闭
  

组件化

虽然render函数里边就可以直接写模板，但是通常不会把一切东西都放进去.不利于维护，也不美观，常用的自然是组件化开发。

• 修改目录结构，src下新建components文件夹，用来放各个组件
  注意，规范中组件名大写，且以js或jsx为后缀名,就像.vue 文件一样

• 可能你的编辑器写完了是这样的
  

• 颜色怪是语法识别问题，把编译环境换成jsx就好了

• 组件定义完记得暴露出去，APP界面用import导入，然后挂载使用

• 效果图
  

• 数据的定义和使用，类似vue的data

• 直接在render里边写会有警告，应该写在构造函数里边
  

图片和样式表的引入

• 图片资源分为本地和远程，加载远程资源直接src引入图片地址就可以
• 记得加alt属性，不然会有警告

 <img alt="logo"src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75"/>

• 本地图片加载和本地样式表加载是路径引入的方式

*import logo from './logo.png'
<img alt="logo" src={logo}/>

• {}是react的jsx语法环境
• import style from './style.css'