React入门到实战的开发(上课笔记)

关于我的电脑是win7版本的系统,创建不了React项目,只能在CSDN做笔记(因为Node版本是13)

创建一个react项目 创建react指令为 npx  create-react-app 项目名称

React入门到实战的开发(上课笔记)_第1张图片

 安装完成以后通过CD进入当前的文件夹,然后通过 npm start运行

运行成功以后,复制网页到浏览器打开

React入门到实战的开发(上课笔记)_第2张图片

 创建react项目的指令

React入门到实战的开发(上课笔记)_第3张图片

 环境介绍

React入门到实战的开发(上课笔记)_第4张图片

 前面是React的基础知识,下面来介绍

2.React JSX语法

React入门到实战的开发(上课笔记)_第5张图片

 ReactDOM.render()来挂载React项目

React入门到实战的开发(上课笔记)_第6张图片

 这里的root是HTML里面的id选择器,

 

3.React元素渲染

React入门到实战的开发(上课笔记)_第7张图片

4.React组件基础之创建组件 

React入门到实战的开发(上课笔记)_第8张图片

React入门到实战的开发(上课笔记)_第9张图片

6.React State状态 

   1.先创建一个StateCommonent.jsx组件

React入门到实战的开发(上课笔记)_第10张图片

 

然后在组件内部导入import React from "react",再通过export default class StateComponent 

extends  React.Component继承于React.Component

然后在app.js中引入import StateComponent from "./StateComponent"接着在组件中使用

React入门到实战的开发(上课笔记)_第11张图片

 React入门到实战的开发(上课笔记)_第12张图片

 

你可能感兴趣的:(日常的学习,react.js,javascript,前端)