全栈开发从入门到放弃:1.a-React基础

本系列介绍:《全栈开发从入门到放弃》是本人学习如何使用JavaScript开发现代Web应用程序的过程记录。课程的重点是使用ReactJS构建单页面应用程序(SPA)。

本系列记录了本人学习过程中的要点,不成体系。如果你想深入学习,建议寻找官方教程 😃


新建React应用

创建一个React应用可用create-react-app,如:

npx create-react-app part1
cd part1
npm start

组件(component)

在使用React开发时,通常将需要渲染的内容定义为React组件。一个定义组件的示例如下:

const App = () => {
  const a = 10
  const b = 20
  return (
    <div>
      <p>Hello world</p>
      <p>
        {a} plus {b} is {a + b}
      </p>
    </div>
  )
}

JavaScript中大括号中的代码会被计算,计算结果将嵌入到组件生成的HTML中。可渲染动态内容。

JSX

JSX 是 JavaScript 的语法扩展。在底层,React 组件返回的 JSX 会被Babel编译成 JavaScript 。

JSX 是类XML语言,每个标签都需要关闭。如HTML中的<br>在JSX中,写作<br />

多组件(Multiple component)

使用React编写组件很容易,定义的组件可以在其他组件中使用。通常应用的组件树顶部有个root组件叫App,但这也可修改。

props: 向组件传递数据

使用props,可将数据传递给组件。可以有多个props值传递,如果props是JavaScript表达式,则需要使用花括号。

一些注意事项

  1. React组件名称首字母必须大写
  2. React组件内容通常需要包含一个根元素
  3. 如果不想在Dom树中看到多余的div元素,可使用空元素包装组件的返回内容。

Robin King

Robin King
在电气学院学习光学的精密机械专业的毕业生是一名软件爱好者,现在在从事电路设计工作

全栈开发从入门到放弃:1.b-JavaScript基础

>本系列介绍:《全栈开发从入门到放弃》是本人学习如何使用JavaScript开发现代Web应用程序的过程记录。课程的重点是使用ReactJS构建单页面应用程序(SPA)。>本系列记录了本人学习过程中的要点,不成体系。如果你想深入学习,建议寻找官方教程 😃---JavaScr...… Continue reading