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'
    在这里插入图片描述
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页