Windows 10下Reactjs/Angularjs开发：记事本开发可行性及新手指导

嘿，作为新手能想到用最基础的工具起步挺棒的！先给你明确说：完全可以用记事本（或者Windows自带的记事本、Notepad++这类纯文本编辑器）来创建React/AngularJS+HTML+Bootstrap应用，不过过程和用VS Code比会繁琐一些，毕竟没有语法高亮、代码补全这些辅助功能。下面给你分React和AngularJS分别讲具体步骤，适合新手入门：

因为React依赖JSX语法和React库，直接用记事本的话，借助CDN引入资源是最省心的方式，不用配置复杂的构建工具：

• 第一步：创建基础HTML文件
  打开记事本，复制下面的代码，然后保存为react-app.html（注意保存时选择「编码：UTF-8」，并且文件名后缀要改成.html，别默认存成.txt）：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>React + Bootstrap 入门应用</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入React和ReactDOM的开发版CDN -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 引入Babel，用来编译浏览器不识别的JSX语法 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <!-- React应用的挂载容器 -->
    <div id="root" class="container mt-5"></div>
  
    <!-- 这里写React的JSX代码，type必须设为text/babel -->
    <script type="text/babel">
      // 定义一个简单的React组件
      function App() {
        return (
          <div className="card">
            <div className="card-body">
              <h5 className="card-title">React记事本开发示例</h5>
              <p className="card-text">这是用记事本写的第一个React应用！</p>
              <button className="btn btn-primary" onClick={() => alert('按钮被点击啦！')}>点击测试</button>
            </div>
          </div>
        );
      }
  
      // 将组件渲染到页面容器中
      ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
  
    <!-- 引入Bootstrap的JS依赖，实现交互效果 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
  </html>
  

  双击这个HTML文件，就能在浏览器里看到一个带Bootstrap样式的React应用了。

• 第二步：拆分代码（可选）
  如果代码变多，你可以把React的JS逻辑单独存成app.js文件，然后在HTML里引入：
  在记事本里新建文件，保存为app.js，写入：

  function App() {
    return (
      <div className="card">
        <div className="card-body">
          <h5 className="card-title">React记事本开发示例</h5>
          <p className="card-text">这是拆分后的React应用！</p>
          <button className="btn btn-primary" onClick={() => alert('按钮被点击啦！')}>点击测试</button>
        </div>
      </div>
    );
  }
  
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

  然后修改HTML里的script标签，改成：

  <script type="text/babel" src="app.js"></script>
  

  注意：直接打开本地HTML文件可能会遇到浏览器的跨域限制，你可以用Node的npx serve命令启动一个本地服务器，然后访问提示的地址（比如http://localhost:3000）来查看效果。

AngularJS（注意是AngularJS 1.x，不是新版Angular）的语法更贴近传统HTML+JS，用记事本开发也很方便：

• 第一步：创建基础HTML文件
  打开记事本，复制下面的代码，保存为angularjs-app.html：

  <!DOCTYPE html>
  <html lang="zh-CN" ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title>AngularJS + Bootstrap 入门应用</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入AngularJS的CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  </head>
  <body class="container mt-5" ng-controller="myController">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">AngularJS记事本开发示例</h5>
        <p class="card-text">欢迎语：{{ greeting }}</p>
        <input type="text" class="form-control mb-3" ng-model="name" placeholder="输入你的名字">
        <button class="btn btn-primary" ng-click="updateGreeting()">更新欢迎语</button>
      </div>
    </div>
  
    <!-- AngularJS的控制器逻辑 -->
    <script>
      // 定义AngularJS应用模块
      var app = angular.module('myApp', []);
      // 定义控制器
      app.controller('myController', function($scope) {
        $scope.name = '';
        $scope.greeting = 'Hello, AngularJS!';
        
        // 定义点击事件的处理函数
        $scope.updateGreeting = function() {
          $scope.greeting = $scope.name ? `Hello, ${$scope.name}!` : 'Hello, AngularJS!';
        };
      });
    </script>
  
    <!-- 引入Bootstrap的JS依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
  </html>
  

  双击打开这个文件，就能看到双向绑定的效果：输入名字，点击按钮，欢迎语会实时更新。

• 虽然记事本可以开发，但非常建议你用已经安装好的VS Code，它有语法高亮、代码补全、错误提示、实时预览这些功能，能大大降低新手的出错概率，写代码效率也高很多。等你熟悉了React/AngularJS的核心语法，再用记事本写就会轻松很多。
• 上面的示例用的都是CDN引入资源，适合入门学习。如果后续要开发大型项目，还是建议用官方脚手架（比如React的npx create-react-app，Angular的ng new），不过那是进阶内容，先从基础入手就好。
• 写代码时要注意细节：React里要用className代替HTML的class属性，JSX必须放在type="text/babel"的script标签里；AngularJS的指令（比如ng-app、ng-controller、ng-model）拼写不能错，不然应用会失效。

内容的提问来源于stack exchange，提问作者raju