ReactJS入门

官网： https://reactjs.org/

搭建环境

创建项目

打开控制台，输入命令行，进行初始化，生成package.json

tyarn init -y

在命令输入如下命令，生成yarn.lock和node_modules文件夹：

tyarn add umi --dev #项目中添加umi的依赖

编写HelloWorld程序

创建config/config.js，这个文件是项目的所有配置

修改config.js文件

//导出一个对象，暂时设置为空对象，后面再填充内容
export default {
   };

创建src/pages/HelloWorld.js（不要在意HTML代码嵌入JS的写法，这是reactjs的JSX语法）

export default () => {
   
return <div>hello world</div>;
}

启动服务

umi dev

添加umi-plugin-react插件

#添加插件
tyarn add umi-plugin-react --dev

添加插件成功后，package.json结果

{
   
  "name": "itcast-reactjs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
   
    "umi": "^4.0.8",
    "umi-plugin-react": "^1.15.9"
  }
}

接下来，在config.js文件中引入该插件

export default {
   
plugins: [
['umi-plugin-react', {
   
//暂时不启用任何功能
}]
]
};

构建和部署

umi build

结果生成dist文件夹

React快速入门

JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。
JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。

const div1 = <div>hello world</div> //正确
const div2 = <div>hello</div> <div>world</div> //错误

在JSX语法中，如果想要在html标签中插入js脚本，需要通过{}插入js脚本。（js文件里的js脚本的html标签中的js脚本）

组件

在React中，这样定义一个组件：

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component {
    //第二步，编写类并且继承 React.Component
render(){
    //第三步，重写render()方法，用于渲染页面
return <div>hello world!</div> //JSX语法
}
}
export default HelloWorld; //第四步，导出该类

导入自定义组件

创建Show.js文件，用于测试导入组件

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
   
render(){
   
return <HelloWorld/>; //使用HelloWorld组件
}
}
export default Show;

组件参数

组件是可以传递参数的，有2种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
   
render(){
   
return <HelloWorld name="zhangsan">shanghai</HelloWorld>; //使用HelloWorld组件
}
}
export default Show;

helloworld组件，接受参数

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component {
    //第二步，编写类并且继承 React.Component
render(){
    //第三步，编写render()方法，用于渲染页面
return <div>hello world! name={
   this.props.name}, address=
{
   this.props.children}