Flatiron School 소프트웨어 개발

계속해서. 무엇에 대해 쓸까요?

과정의 이전 단계와 마찬가지로 블로그 게시물 할당이 마감되는 시간이 옵니다. 당연히 나는 주제를 선택하는 것과 같은 딜레마에 시달립니다. 콘텐츠를 선택할 수 있는 자유의 정도가 결정을 더 쉽게 만드는 것 같지는 않습니다. 나는 튜토리얼인 글을 쓰고 싶지 않다. 웹 개발의 초보자이기 때문에 JavaScript 또는 React로 코딩하는 방법을 누구에게나 가르칠 수 있는 위치에 있지 않습니다. 개념에 대한 나의 이해가 틀렸다면? 개념에 대한 나의 이해가 정확하지만 내가 배운 솔루션이 이미 구식이거나 더 나은 선호 솔루션이 있는 경우 어떻게 합니까? 차라리 튜토리얼 작성을 피하고 싶습니다. 그런 다음 나에게 왔습니다. 대신 이 단계에서 다룬 내용에 초점을 맞추면 어떻게 됩니까? 이것이 바로 나에게 필요한 것 같은 느낌입니다. 기술적인 콘텐츠는 블로그 게시물 과제의 요구 사항을 충족해야 합니다. 개인적으로 유지하는 것은 이것이 튜토리얼이 아니며 여기에서 무언가를 배우는 데 사용되어서는 안 된다는 것을 다른 사람들에게 분명히 해야 합니다. 마지막으로 참조 형식으로 작성하는 것은 내가 배웠지만 세부 사항이 기억에서 증발한 코드 조각을 작성해야 할 때 다시 방문할 수 있는 지식 소스를 만드는 목적이 있습니다. 여기 있습니다. 2단계 - React 소개에서 가장 중요한/알아두면 좋은/쉽게 잊혀지는 학습 포인트 모음입니다.
빈 React 앱을 만들려면 템플릿을 사용하세요.npx create-react-app my-app그런 다음 모든 종속성을 해결합니다.npm install종속성에 패키지를 추가하려면 예를 들어 date-fns:npm install date-fns앱을 시작하려면:npm start주소가 . Any time code changes are saved in VS Code, the app should automatically reload.
Destructure props with curly braces:

function MovieCard({ title, posterSrc, genres }) {
  return (
    <div className="movie-card">
      <img src={posterSrc} alt={title} />
      <h2>{title}</h2>
      <small>{genres.join(", ")}</small>
    </div>
  );
}

Remember to add keys when mapping objects. The keys should have unique values:

const userHeadings = users.map((user) => {
  return <h1 key={user.id}>{user.firstName}</h1>;
});

Use state when binding components to variables. Remember to give it an initial value:

const [count, setCount] = useState(0);

Use callback functions, here onChangeColor, to send data back to the parent:

function Child({ onChangeColor, color }) {
  return (
    <div
      onClick={onChangeColor}
      className="child"
      style={{ backgroundColor: color }}
    />
  );
}

Nice generic trick when binding multiple form fields. Remember to keep the names of the ui elements the same as the state object field names.

function handleChange(event) {
  // name is the KEY in of the formData object we're trying to update
  const name = event.target.name;
  const value = event.target.value;

  setFormData({
    ...formData,
    [name]: value,
  });
}

If you want to fetch data from a server when the component renders for the first time, use useEffect with and empty array.

useEffect(() => {
  fetch("https://dog.ceo/api/breeds/image/random/3")
    .then((r) => r.json())
    .then((data) => {
      setImages(data.message);
    });
}, []);

If you want to fetch data every time the state of count variable changes. Update state directly from the response:

useEffect(() => {
  fetch("https://dog.ceo/api/breeds/image/random/3")
    .then((r) => r.json())
    .then((data) => {
      setImages(data.message);
    });
}, [count]);

Create items:

  fetch("http://localhost:4000/items", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(itemData),
  })
    .then((r) => r.json())
    .then((newItem) => console.log(newItem));
}

When item is created use spread operator to update state array:

function handleAddItem(newItem) {
  setItems([...items, newItem]);
}

Use routing when different urls are needed for different components and to access different components by entering url:

<Routes>
        <Route path='/expense' element={<Expense expenseAdded={onExpenseAdded} categories={categories}/>} />
        <Route path='/category' element={<Category categoryAdded={onCategoryAdded}/>}/>
        <Route path='/' element={<Home expenses={expenses}/>}/>
        <Route path='*' element={<div>Not Found!</div>}/>
      </Routes>

Use json-server for dev environment with db.json file:
{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } }

json-server --watch db.json --port 3004

인 Chrome 창이 열립니다.

Reference

이 문제에 관하여(Flatiron School 소프트웨어 개발 - 2단계 요약), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/steveage/flatiron-school-software-development-phase-2-recap-58e2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Flatiron School 소프트웨어 개발 - 2단계 요약

계속해서. 무엇에 대해 쓸까요?

Reference

좋은 웹페이지 즐겨찾기