Starting React

Learning as I Code — Home page ~ Signin_pw / Signup page

My Goal

Build a full-stack web page that allows users to signin/signup.

The Structure

[Home page] ==signin button==> [Signin page] -> type in user email ==submit button==> {if member, [Signin_pw page] / else, [Signup page]

• All works in the same URL: “/signin”
• You can go back (not changing the route, simply rendering different component on the same page) by clicking the button: “use another email”
• So when you hit ‘history’ button to actually ‘go back’, it goes to Home page.

Run a React File

cd my-react-app //go to your react file
code . && npm run start //Opens vscode and react web page

To access to backend: allow localhost:3000 to access to localhost:8080 (this fix CORS error)

Get mk8506’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Access to backend by axios or fetch api

Basic React Structure

//index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

//App.js
function App() {
  return (
    <Routes>
      <Route path='/my-account/' element={<Navigate to={'/my-account/signin'} />} />
      <Route path="/my-account/signin" element={<Signin />} />
    </Routes>
  );
}
export default App;

How to Connect Components

• export and import
• pass props (like parameters)

How to Change Elements / the Whole Page (Conditional Rendering)

//change elements
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>

//the whole page
const [currentPage, setCurrentPage] = React.useState("signin_email");
{currentPage === "signin_email" && <SiginEmail />}

Event Handlers

//Signin_email
<button onClick={SigninState} type="submit"></button>

//SigninState
    if (data === true) {
      setCurrentPage("signin_pw");
    } else {
      setCurrentPage("signup");
    }

They (onSubmit, onClick, etc) do not return. You expect to do something in the function, like alert or update.

How to Package React & Springboot in One

: Using spring boot to run a react app

1. Create Springboot
2. Create React in Springboot
3. Build React
4. Copy the build into Springboot using pom.xml

## I’ll update on that on the next article!