Notes for Learning React #1

🚨 It is written only for myself (It may have no reference value)

🔗 Source code in my GitHub

React Component Behinds the Scene

💥 Pitfall

Capitalize the name of a function stands for a React COMPONENT (Must capitalize the first letter!)

It is actually a 'function' (See GreetingFun() and the multiple tags scenario GreetingMulFun())

🔴 REMEMBER: We have to close the tag. (Even using the <img /> tag)

import React from 'react';
import ReactDom from 'react-dom';

function Greeting() {
  // JSX
  return (
    <div>
      <h1>Hello the fucking world!</h1>
    </div>
  );
}

const GreetingFun = () => {
  return React.createElement('h1', {}, 'Hello world!');
};

// With multiple tags
const GreetingMultiFun = () => {
  return React.createElement(
    'div',
    {},
    React.createElement('h1', {}, 'Hello World')
  );
};

ReactDom.render(<Greeting />, document.getElementById('root'));

Explain ReactDom.render()

It is looking for what we're going to render. (of course the Greeting!)

Where we want to render it? (the id 'root' in index.html)

JSX Rules

Return single element
like div / section / article or Fragment
Use camelCase for HTML attribute
Use className instead of class
Close every element
formatting

function Greeting() {
  // Using '()' when wrapping the lines
  return (
    // I think <React.Fragment> stands for a <div> ?
    // We can also use the shorthand <> to replace  <React.Fragment>
    // use camelCase: We're not gonna add 'onclick' to div, but 'onClick'
    <React.Fragment>
      <div>
        <h1>Hello the fucking world!</h1>
      </div>
      <div>
        <ul>
          <li>
            <a href="#">fucking</a>
          </li>
        </ul>
      </div>
    </React.Fragment>
  );
}

Nested Components and Tools

import React from 'react';
import ReactDom from 'react-dom';

function Greeting() {
  return (
    <div>
      <Person />
      <Message />
    </div>
  );
}

// We spilt the code into the chunks (so grace, right?)
const Person = () => <h1>Hi, I'm Lucas</h1>;
const Message = () => <p>This is my message</p>;

ReactDom.render(<Greeting />, document.getElementById('root'));

Add inline style in javascript

💡 Tips: The inline css has the highest priority

const Author = () => (
  // To pass a JS object in JSX, we must wrap the object in another pair of curly braces ⬇️
  <h4 style={{ color: '#617d98', fontSize: '1.2rem', marginTop: '0.4rem' }}>
    James Clear
  </h4>
);

Don't hard code

We can access the data while using curly bracket (can also chain methods)

💡 Tips: The content inside the curly bracket is an EXPRESSION (no statement)

const Book = () => {
  const title = 'Atomic Habits';
  return (
    <article className="book">
      <img
        className="image"
        src="https://images-na.ssl-images-amazon.com/images/I/81bGKUa1e0L._AC_UL900_SR300,450_.jpg"
        alt="Atomic Habits"
      />
      <h1>{title}</h1>
      <h4>James Clear</h4>
    </article>
  );
};

Props

React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props. We can pass any JavaScript value through them, including objects, arrays, and functions.

Props serve the same role as arguments serve for functions—in fact, props are the only argument to your component.

import React from 'react';
// react 18 uses `ReactDOMClient.createRoot()`, instead of ReactDom.render()
// import ReactDom from 'react-dom';
import * as ReactDomClient from 'react-dom/client';

// CSS
import './index.css';

function BookList() {
  return (
    <section className="booklist">
      <Book
        book={{ title: 'Atomic Habits', author: 'James Clear' }}
        imgSrc={
          'https://images-na.ssl-images-amazon.com/images/I/81bGKUa1e0L._AC_UL900_SR300,450_.jpg'
        }
      />
    </section>
  );
}

const Book = ({ book, imgSrc }) => {
  return (
    <article className="book">
      <img className="image" src={imgSrc} alt={book.title} />
      <h1>{book.title}</h1>
      <h4>{book.author}</h4>
    </article>
  );
};

// ReactDom.(<BookList />, document.getElementById('root'));
// Using New root API (react 18 feature) ⬇️
const root = ReactDomClient.createRoot(document.getElementById('root'));

root.render(<BookList />);

Actually, it is a destructing syntax.

It's totally equivalent ⬆️ ⬇️

const Book = props => {
  return (
    <article className="book">
      <img className="image" src={props.imgSrc} alt={props.book.title} />
      <h1>{props.book.title}</h1>
      <h4>{props.book.author}</h4>
    </article>
  );
};

Props - Children

💡 Tips:

We must name 'children' in Book component(children) while we are using nested content inside JSX in BookList component(parent)

function BookList() {
  return (
    <section className="booklist">
      <Book
        book={{ title: 'Atomic Habits', author: 'James Clear' }}
        imgSrc={
          'https://images-na.ssl-images-amazon.com/images/I/81bGKUa1e0L._AC_UL900_SR300,450_.jpg'
        }
      >
        {/* We can add some tags or forward some parameters here. */}
        {/* This <p></p> here is considered as a 'parameter', */}
        {/* so we should also add another one argument in the Book component */}
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
          reiciendis architecto consectetur nemo accusantium dolorem eveniet,
          soluta reprehenderit labore iste.
        </p>
      </Book>
    </section>
  );
}

const Book = ({ book, imgSrc, children }) => {
  return (
    <article className="book">
      <img className="image" src={imgSrc} alt={book.title} />
      <h1>{book.title}</h1>
      <h4>{book.author}</h4>
      {children}
    </article>
  );
};

Learning React #1 | 青训营笔记