一、React项目起步配置
文档：https://reactjs.org/docs/hello-world.html
2013年被开源，2014年在中国彻底火爆。
React是CMD架构，现阶段需要webpack打包
npm install -g webpack@4.9.1
必须安装以下三个依赖：
npm install --save-dev babel-core babel-loader babel-preset-env
React采用jsx语法，JSX语法是什么？
就是全球唯一标准的java script和XHTML结合开发最优雅的语法。
浏览器不识别JSX语法，所以需要babel将JSX语法翻译，babel要装一个新的preset
npm install --save-dev babel-preset-react
安装完依赖，修改webpack.congif.js文件中的preset配置：
const path = require('path');
module.exports = {
entry: "./www/app/main",
output : {
path: path.resolve(__dirname, "www/dist"),
filename : "bundle.js",
},
watch:true,
mode : "development",
module: {
rules: [
{
test: /\.js?$/,
include: [path.resolve(__dirname, "www/app")],
exclude: [path.resolve(__dirname, "node_modules")],
loader : "babel-loader",
options: { presets: ["env","react"] }, //要翻译的语法
}
]
}
}
还要安装react和react-dom包：
npm install --save react react-dom
react是核心库
react-dom提供了与DOM操作的功能库
注意：项目文件夹名字千万不要叫react，很坑。
在index.html上放“挂载点”的盒子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="app"></div> </body> <script type="text/java script" src="dist/bundle.js"></script> </html>
app/main.js
import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( <div> <h1>你好，我是react，来自Facebook公司</h1> </div>, document.getElementById('app') );
运行webpack，直接打开页面：
React是所有react项目的入口
React-dom负责react Element添加到HTML页面的挂载点上
react-dom 这个包提供了你的app最高等级的API，提供了元素的挂载和上树的方法
render() 接收两个参数，第一个参数是react元素，第二个参数是挂载点，用来让react元素进行挂载。
Vue在写实例，而React在写类（构造函数）。
二、组件
组件叫“component”，就是HTML、CSS和JS行为的一个封装。
Vue中的组件是一个.vue文件（其实是普通的JSON对象），React中，组件是一个类（构造函数）。
2.1类式组件
创建App.js文件，这是一个组件，必须按照要求写标准壳，这个壳我们叫rcc壳“react class component”，react的类式组件：
import React from "react"; // 默认暴露一个构造函数（类组件） export default class App extends React.Component{ constructor(){ super(); } render(){ return <div> <h1>我是App组件！</h1> </div> } }
注意：
1）这个文件的默认暴露就是一个类，这个类的类名必须和文件名相同。 2）文件名和类名的首字母必须大写！React中组件的合法名字首字母必须是大写字母。 3）这个类必须继承自React.Component类，也就是说，rcc壳必须是extends React.Component的写法。 4）这个类必须有构造器constructor，构造器里面必须调用超类的构造器，super()； 5）这个类必须有render函数，render函数中必须return一个jsx对象。而且这个jsx对象必须被唯一的标签包裹。
在main.js主文件中引入组件，然后用自定义标签：
import React from "react"; import ReactDOM from "react-dom"; // 引入组件 import App from "./App.js"; ReactDOM.render( <div> <App></App> <h1>你好，我是react，来自Facebook公司</h1> </div>, document.getElementById("app") );
注意：
引入的组件必须路径以./开头
组件要使用，就将这个组件的名字（类名、文件名）进行标签化即可
原理就是这个App类在被实例化。
因为类的名字是大写字母，所以所有的自定义组件标签名字一定是大写字母开头的