Learning React.js

• React Components
  • Creating a React component

A component lets you put together a user interface with independent reusable pieces.

A component is a function that returns some UI.

Always, always, always, components need to be capitalized.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Hello() {
  return (
    <div>
      <h2>
        Hello React!
      </h2>
    </div>
  );
}

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

 

• Understanding Properties

Props, or properties, is an object in React that contains properties about the component.

Think of a React component as a function that takes in data as an argument and then returns React elements to create a user interface.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Hello(props) {
  console.log(props);
  return (
    <div>
      <h2>
        Hello {props.library}!
      </h2>
      <p>
        {props.message}.
      </p>
      <p>
        1. Total number using props: {props.number} <br/>
        2. Total number using object: {Object.keys(props).length}
      </p>
    </div>
  );
}

ReactDOM.render(
  <Hello library="React" message="Hello Welcome" number={3} />,
  document.getElementById('root')
);

- example of using props

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Hello({ library, message, number }) {
  return (
    <div>
      <h2>
        Hello {library}!
      </h2>
      <p>
        {message}
      </p>
      <p>
        Total number using props: {number} <br/>
      </p>
    </div>
  );
}

ReactDOM.render(
  <Hello library="React" message="Add dynamic data!" number={3} />,
  document.getElementById('root')
);

- Instead of passing the entire object, you can reference the library, message, and number by name.

 

• Rendering List

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const lakeList = ["echo lake", "maud lake", "cascade lake"];

function App({ lakes }) {
  return (
    <ul>
      {lakes.map(lake => <li>{lake}</li>)}      
    </ul>
  );
}

ReactDOM.render(
  <App lakes={lakeList} />,
  document.getElementById('root')
  
);

 

• Rendering lists of objects

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const lakeList = [
  {id: "1", name: "Echo", trailhead: "Echo"},
  {id: "2", name: "Maud", trailhead: "Wrights"},
  {id: "3", name: "Velma", trailhead: "Bayview"},
];

function App({ lakes }) {
  return (
    <div> 
      {lakes.map(lake => (
        <div>
          <h2>{lake.name}</h2>
          <p>Accessed by: {lake.trailhead}</p>
        </div>
        ))
      }
    </div>
  );
}

ReactDOM.render(
  <App lakes={lakeList} />,
  document.getElementById('root')
);

 

• React Fragment

The fragment is used when we want to render two (or more) components at once.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Lake() {
  return <h1>Lake!</h1>
}

function SkiResort() {
  return <h1>SkiResort!</h1>
}

function App() {
  return (
    <div>
      <Lake />
      <SkiResort />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Lake() {
  return <h1>Lake!</h1>
}

function SkiResort() {
  return <h1>SkiResort!</h1>
}

/*
function App() {
  return (
    <React.Fragment>
      <Lake />
      <SkiResort />
    </React.Fragment>
  );
}
*/

function App() {
  return (
    <>
      <Lake />
      <SkiResort />
    </>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

4. React State with Hooks

• Using useState

A hook is a function that allows you to add functionality to a component.

React has a number of built-in hooks to handle common use cases.

useState is a built-in hook to handle state changes in our application.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function App() {
  const [status, setStatus] = useState("Open");
  return (
    <div>
      <h1>Status: {status}</h1>
      <button onClick={() => setStatus("Open")}>
        Open
      </button>
      <button onClick={() => setStatus("Back in 5")}>
        Break
      </button>
      <button onClick={() => setStatus("Closed")}>
        Closed
      </button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

- The first value that is returned from the useState function inside of array destructuring is the state value.

- The second value is a function that we can use is to change that state value.

 

• Working with useEffect & Updating with the useEffect dependency array

- React will re-render the component tree whenever the state changes. useEffect will be called after these renders.

  useEffect(() => {
    console.log(`field 1: ${val1}`);
  }, [val1]);

  useEffect(() => {
    console.log(`field 2: ${val2}`);
  }, [val1, val2]);

- The second argument of useEffect is dependency array. When we want only one of these useEffects to fire if that state is being updated.

 

The source codes I practiced is at github.com/shin-dongjin/hello-react

All the sources and codes are from a lecture on LinkedIn Learning called "Learning React.js" lectured by Eve Porcello.