part1a

create-react-app

Install Nodejs, VSCode, Chrome/Edge/Firefox.

npx create-react-app part1

This takes about 90 seconds on my computer.

cd part1
code .
ctrl+`
npm start

DevTools(F12/option-cmd-i/ctrl-shift-i), install react-DevTools

In VSCode, check index.js, then App.js, add console.log in function App, add const and jsx as below:

  const now = new Date()
  const a = 10
  const b = 20
  return (
    <div className="App">
      <div>
        <p>Hello world, it is {now.toString()}</p>
        <p>
          {a} plus {b} is {a + b}
        </p>
      </div>
      ...

Save, and see the hot reload(page updated automatically).

Multi components

const Hello = () => {
  return (
    <div>
      <p>Hello world</p>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Hello />
      <Hello />
      <Hello />

Props

const Hello = (props) => {
  return (
    <div>
      <p>Hello {props.name}</p>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Hello name="George" />
      <Hello name="Daisy" />

Props value

const Hello = (props) => {
  return (
    <div>
      <p>
        Hello {props.name}, you are {props.age} years old
      </p>
    </div>
  )
}

function App() {
  const name = 'Peter'
  const age = 10

  return (
    <div>
      <h1>Greetings</h1>
      <Hello name="Maya" age={26 + 10} />
      <Hello name={name} age={age} />
    </div>
  )
}

Some notes

Think big, start small, act quick
Move on small steps, get correct result on every step
Alway keep the console opening
React component name should be capitalized(Footer rather than footer)
return with a wrap element(<div></div> or <></>)

Exercises

1.1 course information, step1

With this information:

  const course = 'Half Stack application development'
  const part1 = 'Fundamentals of React'
  const exercises1 = 10
  const part2 = 'Using props to pass data'
  const exercises2 = 7
  const part3 = 'State of a component'
  const exercises3 = 14

create-react-app, show with html div,h1,p
Refactor to use Header, Content, Total components.

1.2 course information, step2

Refactor content, to show info in just one Component <Part ... /> with props

My solutions

My solutions:
(Please complete your own solutions before click here.)

1.1-1

mkdir exercises/part1
cd exercises/part1
npx create-react-app courseinfo (takes 90s)
cd courseinfo
delete .git folder
code .
delete package-lock.yaml and the node_modules folder
ctrl + `
npm i -g pnpm@latest
pnpm i (takes 12s(it might take longer the first time only))
pnpm start

function App() {
  const course = "Half Stack application development";
  const part1 = "Fundamentals of React";
  const exercises1 = 10;
  const part2 = "Using props to pass data";
  const exercises2 = 7;
  const part3 = "State of a component";
  const exercises3 = 14;
  return (
    <div>
      <h1>{course}</h1>
      <p>
        {part1} {exercises1}
      </p>
      <p>
        {part2} {exercises2}
      </p>
      <p>
        {part3} {exercises3}
      </p>
      <p>Number of exercises {exercises1 + exercises2 + exercises3}</p>
    </div>
  );
}

export default App;

delete files that are not needed:
App.css, App.test.js, index.css, logo.svg, setupTests.js, reportWebVitals.js

make sure the .git folder in part1 is deleted

revise index.js accordingly

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1.1-2

// App.js

const Header = (props) => {
  return <h1>{props.course}</h1>;
};

const Content = (props) => {
  return (
    <>
      <p>
        {props.part1} {props.exercises1}
      </p>
      <p>
        {props.part2} {props.exercises2}
      </p>
      <p>
        {props.part3} {props.exercises3}
      </p>
    </>
  );
};

const Total = (props) => {
  return (
    <p>
      Number of exercises{" "}
      {props.exercises1 + props.exercises2 + props.exercises3}
    </p>
  );
};

function App() {
  const course = "Half Stack application development";
  const part1 = "Fundamentals of React";
  const exercises1 = 10;
  const part2 = "Using props to pass data";
  const exercises2 = 7;
  const part3 = "State of a component";
  const exercises3 = 14;
  return (
    <div>
      <Header course={course} />
      <Content
        part1={part1}
        exercises1={exercises1}
        part2={part2}
        exercises2={exercises2}
        part3={part3}
        exercises3={exercises3}
      />
      <Total
        exercises1={exercises1}
        exercises2={exercises2}
        exercises3={exercises3}
      />
    </div>
  );
}

export default App;

1.2

// App.js

const Part = (props) => {
  return (
    <p>
      {props.part} {props.exercises}
    </p>
  );
};

const Content = (props) => {
  return (
    <>
      <Part part={props.part1} exercises={props.exercises1} />
      <Part part={props.part2} exercises={props.exercises2} />
      <Part part={props.part3} exercises={props.exercises3} />
    </>
  );
};