React学习笔记(一)使用Create React App快速构建一个React项目并创建一个登陆页面

首先安装nodeJs,

然后命令行快速构建一个React项目:

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

在项目根目录下用npm安装好各种组件库。

然后项目结构如下:

React学习笔记(一)使用Create React App快速构建一个React项目并创建一个登陆页面_第1张图片

App.js中这么写:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  //设置页面标题
  document.title = '这里写标题';
  //无状态组件获取input的值
  let usernameid;   //用户名输入框的值
  let passwordid;   //密码输入框的值
  const login = (e) => {       //登陆方法
    // if (e) e.preventDefault();  //该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
      const username = usernameid.value;   //赋值
      const password = passwordid.value;  
    //在此做ajax提交
    
  };
  //返回dom
  return (
    
logo

用户名 usernameid= input}>

密码: passwordid= input}>

登录
); } export default App;

效果:

React学习笔记(一)使用Create React App快速构建一个React项目并创建一个登陆页面_第2张图片

你可能感兴趣的:(前端)