React学习笔记1

要求

用react加antd搭一个项目，并且能运行一个首页，首页内容包括侧边菜单具有切换和表格渲染，内容编辑。
表格的数据通过弹框能进行编辑。

需要学习

1. react
2. antd

关于react

因为是第一次接触react，所以我选择从官方的教程文档学习~

关于antd

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
这次的要求里，可能会用到antd里的 Menu导航菜单数据展示里的 Table表格

笔记（2019.6.12）

先了解React再说antd吧。。

搭建React环境

我使用的是官方里给出的 Creact React APP

npx create-react-app my-app
cd my-app
npm start

类似于脚手架，它会帮助搭建一个React环境
！！npx真的是炒鸡慢了可以说。。。
下面是解决办法 //（反正我觉得还是很慢 ）

$ npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
$ npm config get registry
-- 或 npm info express

解决办法原链接

src结构分析

index.js 里引入了React以及ReactDOM，还引入了app.js组件，并把app组件渲染到root上

写一个demo组件

@react组件里面的所有节点要被根节点所包含
可以很简单定义一个组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

也可以使用 ES6 的 class 来定义组件：

super关键字，它代指父类的this对象，子类必须在constructor方法中调用super方法，否则新建实力会报错。
因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象

笔记（2019.6.13）

对比React和Vue

React使用的是JSX，这个有趣的标签语法既不是字符串也不是 HTML。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX 也是一个表达式
在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。
也就是说，在{ }里可以写一个函数，例如{<h1>Hello, {getuser(user)}!</h1>;}，通过传参可以返回getuser的值

&需要注意
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如：helloworld就要写成helloWorld啦！

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。