React를 시작하기에 충분한 HTML, CSS 및 JS

6183 단어
나는 5개의 좋은 중급/고급 수준의 React 프로젝트를 만들기 위해 시작한 나의 5번째 React 프로젝트를 막 끝냈고 성공적으로 만들었다는 것을 공유하게 되어 매우 기쁩니다.

나는 멋진 사용자 인터페이스를 구축하는 데 사용되는 프런트 엔드 라이브러리인 React의 열렬한 팬이므로 이제 React를 배우려는 사람은 누구나 HTML, CSS 및 JS에 익숙해야 합니다. .

이제 많은 HTML 요소와 CSS 속성이 있고 JS는 그 자체로 엄청나다고 말할 것입니다. React에 대해 이 모든 것을 얼마나 배워야 할까요?

이러한 기술에 대해 얼마나 알아야 하는지는 프로젝트 요구 사항에 따라 달라집니다. 왜냐하면 이러한 기술은 매우 방대하고 매일 업데이트되므로 한 번에 학습한 다음 자신만의 무언가를 개발하기 시작하는 데 충분한 시간이 걸리기 때문입니다.

그러나 당신의 반응 프로젝트가 크든 작든 상관없이 사용할 몇 가지가 있습니다.

그러니 아시다시피 시작하겠습니다

a)HTML은 웹 페이지를 구성하는 데 사용됩니다.
b) CSS는 웹 페이지를 디자인하는 데 사용됩니다.
c) JS는 DOM과 요소 사이에 논리를 넣는 데 사용됩니다.

이제 막 웹을 시작하는 경우 매우 유용한 HTML CSS 및 JS의 몇 가지 기본 사항이 있습니다. 자신만의 무언가를 만들어야 한다는 점을 기억하세요. 작은 계산기 프로그램으로도 가치를 더할 수 있습니다.

HTML: 모든 사람들은 이것이 마크업 언어이며 웹 페이지를 구조화하는 데 사용되며 HTML이 태그(요소)를 사용하도록 하기 위해 각 태그는 구조에서 다른 유형의 작업을 수행할 수 있음을 알고 있습니다.

다음은 첫 번째 웹 페이지 구성을 시작하는 데 도움이 되는 몇 가지 중요한 태그입니다.
  • 모든 시맨틱 HTML 태그(Header, Footer, Nav, Article, Section, Aside 등)
    시맨틱 HTML은 Google에서 반응 앱을 인덱싱하는 동안 도움을 주지만 React는 더 나은 접근성을 위해 SEO 친화적이지 않습니다. 시맨틱 HTML 태그는 매우 유용합니다.
  • 스팬 및 div
    아주 작은 것을 인용해야 할 때 span과 div를 사용해야 합니다. 이 둘은 표시 속성 때문에 다르지만 둘 다 작은 것을 인용하는 데 사용할 수 있습니다.

    • 3. 링크
    Links are used to create links between two pages and In React you will also be dealing with Links through React Router that's why It becomes most important.

    1. Images
      No web page looks attractive if have no images and working with images is one such thing in React which will be helpful.

    2. Lists
      No matter whether you are making a header, footer, or nav or you are rendering something in React all that will be done through the Lists so learn it well.

    3. Forms
      From sending, receiving, and storing data all is done through forms in long run it will help you to work with backend stuff as well.

    4. Inputs
      There are many types of inputs and these inputs are responsible for accepting data from users in forms so learning this becomes important.

    5. Id and classes
      Through id and classes, we can get HTML elements either to style them or access them.

    If you know these tags then you can easily start structuring your first webpage.

    Now we have made the structure of the web page it's time to beautify it, to do so will use CSS.

    CSS – it is used to style the web page elements (tags), we can use this to cover the HTML elements and can give the different types of styles to each element. We can beautify everything related to that element.
    Here are some of the important CSS properties that will be helpful

    1. Height and Width
      Can you imagine yourself with zero height and width ;) the same things happen in CSS you can set any type of height and width to your HTML elements.

    2. Colors and Fonts
      Colors fill colors in anything and it can be in any format and can be typed, the same thing for the fonts.

    3.CSS units
    This is important as you should know what the difference between rem, px, and % all these work differently and are helpful in their respected nature.

    4.FlexBox and Grids: Display
    the extremely important thing to understand as you will use flexbox for sure no matter how small is your project because the proper alignment of elements becomes very easy with flex and grids are also helpful for responsive design.

    1. Position The positioning of elements can be controlled through the position property through this you can set your element to top, bottom, left, or right on the webpage.

    2. Border[ (the console.log of CSS ;) ]
      The border should be known as it helps in CSS debugging and can also give good look to elements.

    3. Text properties
      Super useful in making properly aligned texts and controlling their designs.

    4. Backgrounds
      Backgrounds can have images or colors and based on that you can pick any one thing to put in the background.

    so these are the basic CSS properties that will help you to make your first stylish and beautiful web page.
    So far we have made a beautiful web page that is very attractive but we want beauty with the brain and our brain is JavaScript.

    3.JavaScript: is the brain for web pages because JavaScript has logic and it can issue commands to web elements.
    Nowadays JavaScript is running everywhere from browsers to servers
    Here is a list of some basic JavaScript concepts that will be useful to start with React.
  • All ES6 concepts I have written a detailed blog on ES6 concepts that you can read here

    • 2.JS 배열
    배열은 JS의 핵심입니다. JS에서 수행하는 모든 작업은 데이터와 관련이 있기 때문에 대부분 배열을 다루게 됩니다.

    3.JS 개체
    객체는 데이터를 저장하는 데도 사용되지만 배열과 달리 데이터에 액세스하기 위한 키와 값이 있지만 배열에서는 인덱스가 필요합니다.
  • 클린 코드

    • 예, 이것은 매우 중요하지만 모르더라도 두 가지만 기억하십시오.
    a) 함수 및 변수 이름을 설명할 수 있게 만듭니다.
    b) 함수가 API에서 데이터를 가져오는 경우에만 이 작업을 수행해야 하는 것처럼 모든 것에 대해 별도의 함수를 만듭니다.

    다음은 포인트 번호 4의 예입니다.

    import React, { useEffect, useState } from "react";

function Demo() {
  const [getData, setGetData] = useState([]);

  function getDataFromAPIFn() {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setGetData(data))
      .catch((err) => console.log(err));
  }

  useEffect(() => {
    getDataFromAPIFn();
  }, []);

  return (
    <div>
      <h1>
        {getData.map((item) => (
          <h1>{item.title}</h1>
        ))}
      </h1>
    </div>
  );
}

export default Demo;


    이러한 모든 태그, 스타일 및 JS 개념을 결합하면 반응하는 훌륭한 대화형 웹 페이지/앱을 만들 수 있습니다.

    이 게시물에서 약간의 지식을 얻은 다음 공유하기를 바랍니다.
    C# 팁: IHttpClientFactory를 사용하여 HttpClient 인스턴스 생성
    Node, Express 및 MongoDB를 사용한 간단한 API HealthCheck

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage