|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/react-sn/
课程评论：没有评论
**课程名称：** **全栈开发者的 React 编程入门** **课程概述：** 本课程是学习 Facebook 开源的 JavaScript 库 React 的入门指南，旨在帮助学员成功掌握这个用于构建组件化 UI 的流行前端开发库，尤其适用于创建单页应用程序 (SPA)。 课程内容涵盖： * **React 基础：** * React 编程入门 * React 开发环境搭建（Windows 环境）及云端 DevOps 设置 * 两种创建 React 项目的方法：`create-react-app` 和 `dotnet new react` * 创建 React 项目、本地测试并发布到 GitHub 的完整流程演示 * 使用 `dotnet new react` 在 Temp 文件夹中创建和运行全栈项目 * Create React App 项目结构概览 * 下载、安装和运行最终项目 `ReactMemo` 和 `BookApp.React` * 在纯 HTML 文件中应用 React，包括创建和运行 React Hello World 示例 * 安装 React Developer Tools，掌握 `createElement` 函数及属性应用 * 使用 `createElement` 实现嵌套 HTML 元素 * 使用 Babel 库通过 JSX 编写 HTML 元素 * 在 JSX 中使用样式（`className` 应用 CSS 类） * 利用 JSX 表达式 * 创建函数组件并将其应用于 JSX 表达式 * 使用 `props` 将属性传递给组件，并通过结构体销毁（解构）更简洁地使用 `props` * 在 JSX 中使用条件（三元）运算符 * **组件与状态管理：** * 函数组件与类组件（创建类组件） * 使用 `state` 和 `setState` 存储和修改状态数据（通过 `onClick` 事件处理程序） * 使用 Bootstrap 美化 UI，并展示集合类型数据 * 使用 `create-react-app` 创建项目，并通过基本组件和函数组件展示课程列表 * 使用 `className` 和 `style` 为子组件应用样式 * **路由与导航：** * React 路由（路径指定）理论讲解 * 创建 `About` 和 `Contact` 组件并添加到路由中 * 创建 `ContactDetails` 和 `Copyright` 子组件并包含在父组件中 * 创建 `TechList` 和 `SiteList` 子组件并包含在 `Home` 组件中 * 修改 `About` 和 `Contact` 组件的 UI，并在按钮上应用内联样式 * 使用 `React.Fragment` 在组件中表示同级多个 HTML 元素 * **更深入的状态与事件：** * React `state` 对象进行状态管理（理论与 `StateDescription` 示例） * React 组件生命周期（`componentDidMount`） * React `onClick` 事件处理程序（三种事件处理程序格式） * 实现简单的单向绑定，读取文本框值存入 `state` 并重新输出 * 创建简单的内存 TodoList 应用 **课程目标受众：** * 初次接触 React 的学习者 * 希望入门 React 的开发者 * 已使用过 React 但需要更深入理解和解释的学习者 **最终实践：** 课程最终将引导学员亲手构建一个完整的、能够处理数据库的 Web 应用程序。
[리액트(React) 프레임워크에 입문하기 위한 최고의 강좌]리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있게 도와주는 도구입니다.본 강의는 SPA(Single Page Application)를 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트(React) 학습에 성공적으로 입문할 수 있도록 기획된 강의입니다. 본 강의에서는 다음과 같은 내용들이 다뤄집니다.리액트 프로그래밍 입문 강의 시작 리액트 개발 환경 구축 및 클라우드 기반 데브옵스 설정하는 전체적인 절차에 대한 데모 Windows 환경에서 리액트 개발 환경 구축 및 리액트 프로젝트 생성하는 2가지 방법 설명 두 가지 방식으로 리액트 프로젝트를 만드는 방법 설명(create react app과 dotnet new react) (참고) ReactDemo 프로젝트 생성 후 로컬 테스트 후 GitHub 리포지토리에 게시하는 전체 절차 설명 Temp 폴더에 dotnet new react 명령으로 풀스택 프로젝트 생성 및 실행 그리고 여러 가지 사용법 데모 Create React App으로 만든 리액트 프로젝트의 구조 간단히 살펴보기 현재 강의에서 만들어지는 최종 소스인 ReactMemo와 BookApp.React 프로젝트 다운 및 설치 그리고 실행하기 데모 순수 HTML 파일에 리액트 적용하기 소개 HelloReact 순수한 HTML 파일에서 리액트 헬로월드 예제 만들고 실행해보기 HelloReact React Developer Tools 설치 및 createElement 함수에 속성 적용하기 HelloReact 중첩된 HTML 요소를 React createElement 함수를 여러 번 사용해서 구현하기 HelloReact Babel 라이브러리를 사용하여 JSX로 HTML 요소 작성하기 HelloReact JSX에서 스타일 사용하기 className으로 CSS Class 적용하기 HelloReact JSX 표현식 사용하기 HelloReact 함수 컴포넌트 만들고 JSX 표현식에 적용하기 HelloReact Props 동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기 HelloReact 구조 파괴 할당(구조 분해 할당)을 사용하여 props를 좀 더 간결하게 사용하기 HelloReact JSX에서 조건(3항) 연산자 사용하기 HelloReact 함수 컴포넌트와 클래스 컴포넌트 클래스로 컴포넌트 만들기 HelloReact state와 setState로 상태 데이터를 저장하고 onClick 이벤트 처리기에서 상태 데이터를 수정하기 HelloReact 컬렉션 형태의 데이터 출력 및 부트스트랩으로 UI 꾸미기SeeSharpGuide 01 create react app으로 프로젝트 만들고 기본 컴포넌트와 함수 컴포넌트를 사용하여 강좌 리스트 SeeSharpGuideTitle className과 style을 사용하여 자식 컴포넌트에 스타일 적용하는 방법 설명 리액트 라우팅 경로 지정 이론 설명 About 컴포넌트 생성 및 라우팅에 추가 Contact 컴포넌트 생성 및 실행 데모 ContactDetails와 Copyright 서브 컴포넌트 생성 및 부모 컴포넌트에 포함해서 실행 TechList와 SiteList 서브 컴포넌트 생성 및 Home 컴포넌트에 포함해서 실행 About과 Contact 컴포넌트 UI 변경하기 버튼에 인라인 스타일 적용하기 React.Fragment를 사용하여 컴포넌트에서 동일 레벨의 여러 HTML 요소 표현하기 리액트 state 개체로 상태 관리하기 이론 StateDescription state 개체를 사용하여 클래스 컴포넌트에서 title과 message 속성을 저장하고 출력하는 상태 관리 데모리액트 컴포넌트 라이프 사이클 componentDidMount 리액트 onClick 이벤트 처리기 이론 OnClickEventHandler onCLick 이벤트 처리기에서 클릭 이벤트를 처리하는 3가지 모양 정리 OneWayBinding React에서 텍스트박스의 값을 읽어 sate 개체에 저장 후 다시 출력하는 초간단 양방향 바인딩 구현하기 초간단 인메모리 TodoList 만들기 데모최종적으로, 하나의 완성된 데이터베이스 처리 웹앱을 직접 만들어보는 실습을 합니다.리액트(React)를 한 번도 사용해보지 않으신 분, 리액트(React)에 입문하고 싶으신 분, 리액트(React)를 다뤄봤지만 좀 더 심도 깊은 이해와 설명이 필요하신 분들에게 이 강의를 추천드립니다.
