正文

掌握React.js，实战入门必看实例教程

/0 浏览量
0519

引言

React.js 是一个流行的前端JavaScript库，用于构建用户界面和组件。它以其组件化和声明式编程范式而闻名，使得开发大型应用程序变得更加高效和可维护。本教程将提供一系列实战实例，帮助初学者快速掌握React.js。

实例教程

实例1：Hello World

  1. HTML结构：
<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, World!</h1>,
      document.getElementById('app')
    );
  </script>
</body>
</html>
  1. 解释：
  • 引入React、ReactDOM和Babel库。
  • 使用ReactDOM.render将JSX元素渲染到页面上的app元素中。

实例2：组件

  1. 创建组件：
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
  1. 使用组件：
ReactDOM.render(
  <Greeting name="Alice" />,
  document.getElementById('app')
);
  1. 解释：
  • 创建一个名为Greeting的函数组件，接受name属性。
  • 在JSX中，使用Greeting组件并传递name属性。

实例3：状态与事件处理

  1. 添加状态：
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('app')
);
  1. 解释：
  • 创建一个名为Clock的类组件，包含一个状态date。
  • 使用this.state.date.toLocaleTimeString()获取当前时间。

实例4：条件渲染

  1. 条件渲染：
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Welcome, please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <Greeting isLoggedIn={true} />,
  document.getElementById('app')
);
  1. 解释：
  • 创建两个组件UserGreeting和GuestGreeting。
  • 使用条件渲染根据isLoggedIn属性显示不同的组件。

总结

通过以上实战实例，您可以初步了解React.js的基本概念和用法。继续学习和实践，您将能够构建更复杂和功能丰富的应用程序。

-- 展开阅读全文 --