[React] Intro

• declarative programming - you know what you're making just by looking at it
• component-based - independent, reusable components (focused on creating functional parts)
• a library, not a framework - versatile
• React native: mobile app dev

JSX

• must have opening and closing tag
• <div class = “”>가 아니라, <div className = “”>
• js elements must be wrapped like {name} or it gets treated as text
• react elements need to start with capitalized letters function Hello() instead of function hello()
• ternary operators need to be used instead of if-else

  <div>{(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)}</div>

• use map() to make many HTML elements
  • each element must have a unique "key" property

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  // 한 포스트의 정보를 담은 객체 post를 매개변수로 받고 obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(el => postToJSX(el))}
    </div>
  );
}

Create Elements using React & JSX

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  // return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
   return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

Use map() to transform data into elements

const posts = {
{id: 1, title: "Hello World", content: "Welcome to learning React!"}, 
{id: 2, title: "Installation", content: "You can install React from npm."}
}

function Blog(){
	const content = posts.map((post) => 
		<div key = {post.id}>
			<h3>{post.title}</h3>
			<p>{post.content}</p>
		</div>
);
	return (
	<div>{content}</div>
);
}

//OR

function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

Change classname depending on data property

import "./styles.css";
import { dummyTweets } from "./dummyData";

const App = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker';
		const tweetUserNameClass = isParkHacker? 'tweet__username tweet__username--purple': 'tweet__username';
          
        return (
          <li className="tweet" key={tweet.id}>
            <span className={tweetUserNameClass}>{tweet.username}
            </span>
          </li>
        );
      })}
    </ul>
  );
};
export default App;

Create-React-App

npx create-react-app@latest folderName
npm start: Runs app in dev mode. Open http://localhost:3000 to view it in browser
npm install react-scripts@latest to keep updated!

To open in Brave Browser, open package.json and edit "scripts" > "start" :
"BROWSER='Brave Browser' react-scripts start"

Font Awesome ... more on this later

• enable babel macros to dynamically import icons (auto set-up in Create react app!)