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

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

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 ==全局配置文件==  ``` 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}</div>