ReactJS快速入门及编写程序熟记

最新推荐文章于 2022-07-15 01:40:02 发布

舞象

最新推荐文章于 2022-07-15 01:40:02 发布

阅读量379

点赞数

分类专栏： reactJS 文章标签： js react

本文链接：https://blog.csdn.net/weixin_42506047/article/details/108417001

版权

本文介绍了ReactJS的基础，包括环境搭建、组件间参数传递、组件状态管理和生命周期。强调了组件状态的重要性，指出状态变化会触发页面自动重渲染。还讨论了使用Dva进行数据分层管理和在model中请求数据的方法，以及如何利用mock数据进行前端模拟。

摘要由CSDN通过智能技术生成

官网, 视频教授及讲义链接本文最后

ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。ReactJS可以用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构。

1.0 环境搭建

创建一个 Static Web 都行,然后点金IDEA 左下角的Terminal.会使用[Umi 3.X](https://umijs.org/zh-CN/docs/getting-started)版本,3.x目前我使用还有一些bug ** 补充 **: Umi 3.X ==404页面==和==约定式路由==还有一些问题,解决办法 (404还是不行,等官方),在.umirc.ts ``` // routes: [ 把自动生成的路由配置信息删除掉,就行了.要不然约定式路由不起作用 // { path: '/', component: '@/pages/index' }, // ], ``` (以下是[Umi2.X](https://v2.umijs.org/zh/guide/getting-started.html)版本环境搭建) - tyarn init -y #初始化项目, 会生成一个package.json文件, ```{ "name": "vs-reactjs", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "umi": "^2.2.1" //使用umi 2.X版本 ,浏览器更支持 }, "devDependencies": { "umi-plugin-react": "^1.2.0" } } ``` - tyarn add umi --dev #项目中添加umi的依赖 ### 1.1 编写HelloWorld 程序 > 在工程的根目录下创建config 目录,在config 下创建config.js ,UmiJS 约定约定中, config/config.js 将作为UmiJs ==全局配置文件== ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200905112127453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUwNjA0Nw==,size_16,color_FFFFFF,t_70#pic_center) ``` export default () =>{ const t= ()=> "揍你,孩子" return (

hello

word {t()}

); } ```

1.2 组件及之间的传递参数

          //index.js
          
import React from "react";

class index  extends React.Component{
  render() {
    return (
//      <div>我的第一个ReactJS组件! </div>
		<div> name={this.props.name},干什么呢?-->{this.props.children}</

最低0.47元/天解锁文章