Clone Coding Repository for "React WebGame" Course of ZeroCho

Overview

ZeroCho-React-WebGames

Clone Coding Repository for "React WebGame" Course of ZeroCho

Lecture Link: https://www.youtube.com/playlist?list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

  • Lecture Language: Korean

Purpose / Goal

  • To familiarize the concept of React
  • Have the first experience in making web applications using React framework
    • Build some simple games using React

What I Learn

  • node packages for React Dev Environment
    • React
      • react: React Core
      • react-dom: Connect React and DOM
    • Babel
      • @babel/core: Babel Core
      • @babel/preset-react: Transfiling React JSX
      • @babel/preset-env: Transfiling ES6+ Codes
    • Webpack
      • webpack: Webpack Core
      • webpack-cli: Use Webpack on command line interface
      • webpack-dev-server: Build webpack in-memory and run development server
      • babel-loader: Transfiling JSX and ES6+ syntax
      • style-loader: Wrap and inject compiled CSS file
      • css-loader: Interpret CSS file so that JavaScript can understand
      • html-webpack-plugin: Inject bundled JavaScript files to HTML file
      • mini-css-extract-plugin: Separate CSS files
  • React.Component is building structure of React elements that will be appear on the screen.
    • All components should extends React.Component.
    • All components should override render() function.
    • Components may have state.
      • state is something that is modifiable inside the component.
      • use setState() to change state of the component.
        • Only used for something that needs to be changed manually
  • React.createElement(type, [props], [... children]) generates new React Elements of given type.
    • type can be tag name of HTML elements or React Component type (class or function) name.
    • prop contains HTML properties of the element.
      • Should be expressed in object format.
    • Can use JSX (JavaScript + XML) format (using HTML-shaped Tags) instead of React.createElement().
      • HTML expression inside JavaScript causes error; therefore, we need Babel to support JSX syntax.
        • To use Babel, type of script should be text/babel.
      • JavaScript code should be placed in curly bracket (e.g.:
        {... some js code ...}
        ).
    • React.Fragment is used to group a list of chlidren without adding extra nodes to the DOM.
      • Help removing meaningless
        .
      • Notation: ... or <> ...
  • Recommend NOT to mix JSX and JS Codes.
    • JavaScript logics can be implemented as Class Methods.
  • ReactDOM.render() renders a React element into the existing DOM.
    • This function actually draws the React Components to the web browsers.
    • React need at least one element (the root div
You might also like...
ReactJS-Spring-Boot-CRUD-Full-Stack-App - Course on YouTube

ReactJS-Spring-Boot-CRUD-Full-Stack-App - Course on YouTube

repository to study react advanced guide

repository to study react advanced guide

Responsive React Repository Search
Responsive React Repository Search

React Repository Search A repository search application using Github's repository search API that displays results based on search terms. The results

The repository for high quality TypeScript type definitions

The repository for high quality TypeScript type definitions.

Repository responsible for all code developed during the JavaScript Beginners Series

Série de Vídeos para Iniciantes em JavaScript Uma série de vídeos ensinando conc

GitHub repository search app in React, TypeScript and GraphQL

GitHub repository search app in React, TypeScript and GraphQL

This is a repository for a webchat website POC.
This is a repository for a webchat website POC.

WebchatWebsite This is a repository for a webchat website POC. THIS PROJECT WILL BE UPDATED WHEN I HAVE TIME! About The purpose for this project was t

This repository contains different React components, hooks, apps and libraries that are used in different projects here at NaN Labs.

This repository contains different React components, hooks, apps and libraries that are used in different projects here at NaN Labs.

🔍 GitHub repository search for Tonik
🔍 GitHub repository search for Tonik

Tonik Project for Tonik. Project is about creating a simple GitHub repository search tool. I am using following technologies: TypeScript, HTML5. Code

Owner
Hyecheol (Jerry) Jang
Studying Computer Science and Statistics at University of Wisconsin-Madison (Class of 2022)
Hyecheol (Jerry) Jang
Koma Human 2 Jun 25, 2022
Live coding in your browser with your favourite language.

Live coding in your browser with your favourite language.

Fatih Erikli 986 Nov 20, 2021
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

React Interview Questions & Answers Click ⭐ if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical update

Sudheer Jonna 26.1k Jan 2, 2023
React coding challenge : programm the itemSlider component

react-coding-challenge Congratulations Congratulations, you will receive our Coding Challenge today! Everything you need (besides React) can be found

Usama 0 Nov 15, 2021
whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

JstnLT 21 Dec 30, 2022
This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

Bek Brace 120 Dec 22, 2022
Javascript Mastery Course

Javascript Mastery Course

Amigoscode 28 Dec 12, 2022
The LinkedIn Learning course React.js: Building an Interface

React.js: Building an Interface This is the repository for the LinkedIn Learning course React.js: Building an Interface. The full course is available

MOHAMMED KHORMI 1 Oct 14, 2021
JavaScript course at the Udemy platform given by Professor Luiz Otávio Miranda

Javascript e TypeScript - front-end e back-end (Full Stack) - Node, Express, noSQL, React, hooks, Redux, Design Patterns Curso de JavaScript na platad

Lucas Celli 5 Jan 11, 2022
Github-ci-cd-react - I followed CI/CD course from codedamn to learn how to implement github actions in a project, in this practical lesson with codedamn am using ReactJS

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Okechukwu Somtochukwu 1 Jan 2, 2022