课件react基础day01小节.pptx

React基础Day01

Contents目录React概述react基本使用react脚手架JSX的使用React组件

Contents目录React概述react基本使用react脚手架JSX的使用React组件

00：58要点提示react基础目标掌握程度：了解1.react概述视

05：12React是哪家公司研发的？React可以用来做什么？要点提示react概述掌握程度：应用1.1react概述视答

React是哪家公司研发的？React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了React可以用来做什么？不仅仅用来开发web端，还能开发移动端以及VR应用课堂问答课堂问答1.1.1react概述视答

Contents目录React概述react基本使用react脚手架JSX的使用React组件

07：06需要引入哪两个js文件通过哪种方法进行创建通过哪种方法进行渲染要点提示react的基本使用掌握程度：应用2.1react基本使用视答

需要引入哪两个js文件？react.development.js、react-dom.development.js通过哪种方法进行创建React.createElement(元素名称,元素属性,子节点);通过哪种方法进行渲ReactDOM.render(需要渲染的元素对象,挂载对象)课堂问答课堂问答2.1.1react基本使用视答

05：06ReactDOM.render()方法是干嘛的要点提示react的基本使用（常用方法说明）掌握程度：应用2.2react基本使用视总

我们后续很少用React.createElement()来创建元素，这样方式比较的麻烦但是ReactDOM.render()这个渲染的方法是很重要的课堂问答视知识总结2.2.1react基本使用总

Contents目录React概述react基本使用react脚手架JSX的使用React组件

04：57脚手架搭建的命令要点提示react脚手架的基本使用掌握程度：应用3.1react脚手架视练

练习动动手，试着搭建react的脚手架吧！提示输入命令npxcreate-react-appmy-pro输入命令npmstart3分钟视练3.1.1react脚手架

03：11要点提示react脚手架的基本使用（细节补充说明）掌握程度：了解3.2react脚手架视

04：28在脚手架中导入用import方式进行导入要点提示react脚手架中使用react掌握程度：应用3.3react脚手架视

03：06要点提示react基础阶段总结掌握程度：应用3.3react脚手架视

Contents目录React概述react基本使用react脚手架JSX的使用React组件

04：42常量一旦赋值，不能被更改要点提示JSX的学习目标掌握程度：理解4.JSX的使用视

07：00为什么我们需要使用JSXJSX是什么要点提示JSX的基本使用掌握程度：应用4.1JSX的使用视总

JSX：JavaScriptXML表示在JavaScript代码中写HTML格式的代码推荐使用JSX的方式来创建React元素写JSX跟写HTML的语法是类似的JSX语法更能体现声明式特点课堂问答视知识总结4.1.1JSX的基本使用总

02：22JSX不是标准的ECMAScript语法，那么是通过谁来进行的编译要点提示为什么脚手架中可以使用JSX语法掌握程度：理解4.2JSX的使用视答

JSX不是标准的ECMAScript语法，它是ECMAScript的语法拓展需要使用babel编译处理后，才能在浏览器环境中使用create-react-app脚手架中已经默认有该配置，无需手动配置编译JSX语法的包：@bable/preset-react课堂问答视课堂问答4.2.1为什么脚手架中可以使用JSX语法答

05：32要点提示JSX的注意点掌握程度：记忆4.3JSX的使用视总

React元素的属性名使用驼峰命名法特殊属性名：class-className，for-htmlFor，tabindex-tabIndex如果没有子节点的React元素可以用/来结束推荐：使用小括号包裹JSX，从而避免JS中自动插入分号报错课堂问答视知识总结4.3.1JSX的注意点总

03：07嵌入表达式用{}就行要点提示在