Since react hooks are the industry standard, it would be nice for us to use react hooks instead of class based components in this project. That would also mean changing a bit of our testing stach, that still uses enzyme, to something more modern and compatible, like react testing library. Another good thing would be to migrate all component js files to jsx, since it's the more proper file extension.
lucianoratamero Updated
React란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용된다. React는 Facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있다. 싱글 페이지 앱이나 모바일 앱의 개발 시 토대로 사용될 수 있다. 즉, 현재 많이 활용되고 있는, 웹/앱 View를 개발할 수 있도록 하는 인기 있는 라이브러리이다. React의 필요성 React를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있지만, react를 이용해 사용자와 상요작용 할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용된다. React의 특징 Data flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추진하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 한다. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈이다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. React는 UI(View)를 여러 컴포넌트로 쪼개서 만든다. 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다. 컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 상대적으로 쉽다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다. 따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 앱이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다. class App extends Component { render() { return ( <Layout> <Header /> <Navigation /> <Content> <Sidebar></Sidebar> <Router /> </Content> <Footer></Footer> </Layout> ); } } 위와 같이 Header, Footer 같은 구조 등을 컴포넌트로 만들고, 이를 조합해서 root 컴포넌트를 만드는 방식이다. Virtual DOM DOM은 Document Object Model의 약자이다. DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다. React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다. 이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다. Props and State Props Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터이다. 쉽게 읽기 전용 데이터라고 생각하면 된다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상휘 부모 컴포넌트만 props를 변경할 수 있다. State State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. State는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다. 출처: https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC
HyeonWooJo Updated
react-native webview 사용법, webview, rn 데이터 통신 | 기억보다 기록을 react-native webview 사용법, webview, rn 데이터 통신, react, redux, ios, android, safari, chrome, google, apple https://kyounghwan01.github.io/blog/React/react-native/react-native-webview/
utterances-bot Updated
TypeScript snowpack storybook
luckylat Updated
Core Library No response Wrapper Library MSAL React (@azure/msal-react) Documentation Location https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/README.md#prerequisites Description Following the instructions on the page results in the following error C:\dev\git\microsoft-authentication-library-for-js\samples\msal-react-samples\b2c-sample>npm install up to date, audited 1976 packages in 4s 152 packages are looking for funding run npm fund for details 10 moderate severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run npm audit for details. C:\dev\git\microsoft-authentication-library-for-js\samples\msal-react-samples\b2c-sample>npm run build . b2c-sample@0.1.0 build react-scripts build "." (node:8760) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time Creating an optimized production build... Failed to compile. src\App.js Line 18:3: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 19:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 20:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 21:6: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 22:7: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 23:8: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 34:3: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 35:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 36:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 38:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 39:5: 'React' must be in scope when using JSX react/react-in-jsx-scope src\pages\Home.jsx Line 8:3: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 9:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 10:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 13:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 14:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 15:6: 'React' must be in scope when using JSX react/react-in-jsx-scope src\pages\Protected.jsx Line 38:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 39:29: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 50:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 56:13: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\ErrorComponent.jsx Line 4:12: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\Loading.jsx Line 4:12: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\NavBar.jsx Line 14:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 15:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 16:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 17:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 18:21: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 20:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 21:17: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\PageLayout.jsx Line 6:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 7:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 8:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 9:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 11:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 12:13: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\SignInButton.jsx Line 28:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 29:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 35:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 50:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 51:17: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\SignInSignOutButton.jsx Line 11:16: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 14:16: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\SignOutButton.jsx Line 25:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 26:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 30:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 32:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 47:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 48:17: 'React' must be in scope when using JSX react/react-in-jsx-scope src\ui-components\WelcomeName.jsx Line 16:16: 'React' must be in scope when using JSX react/react-in-jsx-scope Search for the keywords to learn more about each error.
As we are converting all existing angular/ruby forms to carbon, we can also replace patternfly react components to carbon-react. Goal is to be able to remove patternfly-react package. Carbon components: https://react.carbondesignsystem.com/ Components needs to convert Breadcrumbs Data Table - gtl view Grid and Loading components Modals Toast Notifications Buttons About Modal
First of all, thank you for such an amazing library! I'm seeing that this library has a different React peer dependency version than react-konva: react-konva-utils: "react": "^17.0.2", "react-dom": "^17.0.2" react-konva: "react": ">=16.8.0", "react-dom": ">=16.8.0"
andres-palumbo Updated
WHY? Text extraction is very slow A special loader, yaml-flat-loader, is now required to load YAML. useIntl is redundant
rot1024 Updated
React 15 架构分层 reconciler(协调器);负责找出变化大组件 renderer(渲染器);负责将组件的变化渲染到页面上 Reconciler 在 React 可以通过 setState、 forceUpdate、ReactDOM.render 来触发更新,每当有更新发生时 Reconciler 会做如下工作: 调用组件的 render 方法,将返回的 JSX 转化为虚拟 DOM 将虚拟 DOM 和上一次的虚拟 DOM 对比 通过对比找出本次更新中变化的虚拟 DOM 通知 Renderer 将变化的虚拟 DOM 渲染到页面上 Renderer 在对某个更新节点执行完 Reconciler 后,通知 Renderer 进行节点渲染/更新 缺陷 React 15 的 diff 过程是递归执行更新,一旦开始便无法中断,当层级太深或者 diff 逻辑太复杂,就会造成线程卡住 React 16 架构分层 Scheduler(调度器);调度任务到优先级,高优任务优先进入 Reconciler Reconciler(协调器);负责找出变化大组件 Renderer(渲染器);负责将组件的变化渲染到页面上 Scheduler 采用的是 合作式调度,即主动中断和控制器出让。判断标准为超时检测。 同时借鉴了 requestIdleCallback 接口,当浏览器有时间时执行通知。 除了在空闲时触发回调的功能外,Scheduler还提供了多种调度优先级供任务设置。 为什么不直接用 requestIdleCallback?requestIdleCallback 工作只有 20FPS,一般对用户来感觉来说,需要到 60FPS 才是流畅的, 即一帧时间为 16.7 ms,所以这也是 react 团队自己实现 requestIdleCallback 的原因。 Reconciler React 16 使用了一种新的数据结构 Fiber,Virtual DOM 树由之前的树形结构变化成了基于多向链表的图。 在React 16中,Reconciler 与 Renderer 不再是交替工作。当 Scheduler 将任务交给 Reconciler 后,Reconciler 只是会为变化的 Virtual DOM 打上代表增/删/更新的标记,而不会发生通知 Renderer 去渲染。 只有当所有组件都完成Reconciler的工作,才会统一交给Renderer进行渲染更新。 Renderer Renderer 根据 Reconciler 为 Virtual DOM 打的标记,同步执行对应的渲染操作。 流程为: setState 等产生更新 更新交给 Scheduler,Scheduler 发现没有其他高优先级任务,将该任务交给 Reconciler Reconciler 接到任务后,开始遍历 Virtual DOM,判断哪些需要更新,打上标记 Reconciler 遍历完所有的 Virtual DOM,通知 Renderer Renderer 根据 Virtual DOM 标记执行对应的节点操作 其中 2、3、4 随时可能被中断: 有其他高优先级任务需要更新 当前帧没有剩余时间 源码分析
sqshada Updated
[React Native] Weather App - MJ Note 위치기반 현재날씨 정보 Upload https://dtwogud.github.io/react/react-native-1/
utterances-bot Updated
Incorporate React PropTypes in each component
Instructions Project directory Branch MERN>Web_Development/MERN/Topic/Frontend/React/ Please read the contributing guidelines to get started What is React? Write a brief summary on what is React? Please refrain from coping from internet. You can use any source as inspiration. Task Audio Documentation Video Send a PR in the following branch only and make documentation in form of markdown file with (.md) extension and in the respective folder
Describe the bug /index,and /about seem to be coming from the static site build, while the sub-pages on /how-it-works/* are loading more like a single page app. When navigating to /how-it-works/* you'll get a quick flash of all that section's content as well. Impact This may not be in line with how we're authorized to serve the site. To Reproduce Steps to reproduce the behavior: Click around the main nav links Click on /how-it-works/* Get a quick flash of all the content Navigate with the sidebar nav to get more of a single-page app experience Expected behavior Pages should be static. HOWEVER ... if the way this is working on staging is allowed, the page loads do feel super snappy Connect with Ron to see what might be allowed here Screenshots If applicable, add screenshots to help explain your problem. Logs If applicable, please attach logs to help describe your problem. Desktop (please complete the following information): OS: [e.g. iOS] Browser [e.g. chrome, safari] Version [e.g. 22] Smartphone (please complete the following information): Device: [e.g. iPhone6] OS: [e.g. iOS8.1] Browser [e.g. stock browser, safari] Version [e.g. 22] Additional context Add any other context about the problem here.
drew-usds Updated bug front-end
Currently, react-helmet is giving us the following warining message: Updating to v6 fixes the issue.
lucianoratamero Updated
Set up a React Application Locally Hello and welcome! Before starting this course, we recommend completing the Introduction to GitHub Learning Lab first with the option for working locally in the command line. What's in our React App Let's take a look of what our React App looks like right now. We will go through our file structure which is a standard React setup. You will not be editing any files in this step, but the structure is important for future code references. package.json The package.json file is our roadmap of the app. It tells us the name of the app, the version, the different dependencies we need to run our app, and more. public/ The public/ directory contains our index.html file. The index.html file directs us to the rest of the web application that requires additional processing. src This is where most of your code will go. You'll notice we have App.jsx along with other jsx files. But, what is jsx? Think of jsx as a mix between html and javascript. We can write tags, functions, and classes. Take a look at the App.jsx file. Some of that contents might look familiar from html, like <div/> tags. Step 1: Set up the project locally In this repository, we have two branches - main and changes. We will be working off of the changes branch. Let's go ahead and get started. ⌨️ Activity: Clone the repository and install Node Open your terminal If you're using a Windows operating system, we recommend downloading and using git bash as your terminal Change directories into a location where you want to keep this project Clone this repository: git clone https://github.com/JulieBarona/intro-react Move into the repository's directory: cd intro-react Checkout to the changes branch: git checkout changes Open the intro-react folder in your favorite text editor Check for Node installation: node -v Install Node if it is not installed In your repository folder, install the necessary packages: npm install Start the React Application: npm start Your browser should automatically open http://localhost:3000/, and you should see our barebones gradebook application. You'll see that our app can't really do anything! All we have is three buttons! We are going to add all the functionality.
github-learning-lab Updated
工作成果及成绩 内容管理系统 核心需求 通用标注后台 收益评估:https://maimai.feishu.cn/wiki/wikcnB8rZ5JY2Noo2CxGIuq7tNc 地址:http://billionaire.in.taou.com/#/review/mark/template_list 需求:https://maimai.feishu.cn/wiki/wikcnE1w6bpZtLwsqfRrMKdWRkq 内容运营后台(目前已完成三期) 地址:http://billionaire.in.taou.com/#/content/common_search 需求:https://maimai.feishu.cn/wiki/wikcnbfCfq0DnvjoyOdIJenovPc KOL 管理后台 地址:http://billionaire.in.taou.com/#/user/kol 需求:https://maimai.feishu.cn/wiki/wikcnCTRKQx3HjoeE0gLiuaxSXg 内容发布功能 地址:http://billionaire.in.taou.com/#/content/push_content/release_content 需求:https://maimai.feishu.cn/wiki/wikcnzzFSmH7WRX8X6kWwftUKdc 后台其他需求 后台整体目录结构调整 管理后台职言分栏功能、同事圈分栏话题绑定功能 行业圈 push 功能优化 后台内容标注后台功能优化 开发热榜过滤已删职言功能 历史曝光模块优化 后台匿名评论优化 审核后台 审核后台高危内容检测功能 需求:https://maimai.feishu.cn/wiki/wikcnJw2iCHHmX0Qk3uKAV8BvAc 投诉线上化一期,审核后台增加客服、法务处理页面 后台页面:http://cs.in.taou.com/complain-customer 需求:https://maimai.feishu.cn/wiki/wikcnBgVs7knpQEHvpAJryZNZuc?from=from_parent_docs 职言花名和头像审核优化 需求:https://docs.taou.com/pages/viewpage.action?pageId=90497884 RN 核心需求 内容身份唯一化三期 需求:https://maimai.feishu.cn/wiki/wikcnT0ISUI3nJwQcX1fb2jwHDb?from=from_parent_docs IM 邀请参与页面 需求:https://maimai.feishu.cn/wiki/wikcn3hEQBKMDuCRSr6ZLyVweGK 同事圈圈外内容 需求:https://maimai.feishu.cn/wiki/wikcnHWBv4lMCvBxUzP959YksNn 同事圈未认证用户在首页分发功能 个人中心 tab 页面 RN 其他需求 提问发布实验功能(实验完成已下线) RN 实名帖浏览后变灰需求,已提测 增大职言、实名评论触发区域 发布器新增排序字段功能 修复职言通知高亮底色问题 Node 项目 投诉线上化一期 地址:https://maimai.cn/tousu 需求:https://maimai.feishu.cn/wiki/wikcnBgVs7knpQEHvpAJryZNZuc?from=from_parent_docs) 实名声明展现样式调整 kol 热榜需求 技术方面 RN 性能优化,负反馈、actionbar 调整。(负反馈进度 60%,因后台项目排期紧张预计这个 S 完成) 使用 Low Code 平台接入,9 月初将上线第一个可用页面。 新页面使用 React hooks、TS 进行开发,逐步对老项目进行技术改造。 将在内容运营后台进行技术改造,如接入 vite,对老代码进行替换 已阅读完新书《Javascript 悟道》,并将在组内进行分享。 总结 目前已入职 4 个多月的时间,参与的项目需求从前台到后台,从老项目到新项目。相比我之前经验,现在的业务和技术跨度都比较大。 RN 相关:对内容的 RN 开发已经比较熟悉,进行过 feed 卡片的开发(圈外内容),进行过匿名和实名整体样式的修改(内容身份唯一化三期)。也开发过平台工具类的功能(邀请参与),与平台、招聘、内容的后端进行对接,最终的工具给整个公司进行使用,并在产品使用下得到了较大的收益。(push 全局话题:第一学历真的重要,2 个小时就产生 800 条 ugc,占了平时一天的 40%)。积极参与技术建设,新页面尽量使用 Reack Hooks 和 Ts 进行开发,并正对 RN 做一些性能优化的工作。 后台相关:参与审核后台、实名内容管理系统、Node 上后台项目的开发,最近的一个 S 需求多,排期紧,在自测时间短、没有测试资源的情况下,前后端基本都按时完成并立即投入使用,出现 bug 也尽快进行了修复。并在最近的三个月进行了一些从零到一的项目,如:通用标注后台、投诉线上化、内容管理后台。 其中投诉线上化的特点是技术存在一定跨度,如运营后台使用的是 Vue 和 Element,投诉线上化前台使用的是 React 和 antd4,而投诉后台使用的是较老的 antd3,其中 antd3 和 antd4 的使用方法也完全不同,存在一定的心智负担。 内容管理后台是把各个页面的内容管理功能做到一起,其中涉及的接口有十多个,由于是新老接口混合,传参的方式、返回的值、判断的条件都可能存在不同,导致页面的复杂度也较高,并将在下一期引入富文本和树形评论等功能。 通用标注后台的开发解放了前端人力,并得到业务方的认可。 改进 技术参与度不够高,这个 S 将投入更多经历投入技术项目。 后台项目代码质量不够高,组件服用性不够好,将在后台做一些代码优化。 Low Code 平台进展较慢,将在这个 S 进行推广。 对 React 的原理理解不够深入,将在日后的工作和学习中加强。
exposir Updated
Set up a React Application Locally Hello and welcome! Before starting this course, we recommend completing the Introduction to GitHub Learning Lab first with the option for working locally in the command line. What's in our React App Let's take a look of what our React App looks like right now. We will go through our file structure which is a standard React setup. You will not be editing any files in this step, but the structure is important for future code references. package.json The package.json file is our roadmap of the app. It tells us the name of the app, the version, the different dependencies we need to run our app, and more. public/ The public/ directory contains our index.html file. The index.html file directs us to the rest of the web application that requires additional processing. src This is where most of your code will go. You'll notice we have App.jsx along with other jsx files. But, what is jsx? Think of jsx as a mix between html and javascript. We can write tags, functions, and classes. Take a look at the App.jsx file. Some of that contents might look familiar from html, like <div/> tags. Step 1: Set up the project locally In this repository, we have two branches - main and changes. We will be working off of the changes branch. Let's go ahead and get started. ⌨️ Activity: Clone the repository and install Node Open your terminal If you're using a Windows operating system, we recommend downloading and using git bash as your terminal Change directories into a location where you want to keep this project Clone this repository: git clone https://github.com/BryceDalbey/intro-react Move into the repository's directory: cd intro-react Checkout to the changes branch: git checkout changes Open the intro-react folder in your favorite text editor Check for Node installation: node -v Install Node if it is not installed In your repository folder, install the necessary packages: npm install Start the React Application: npm start Your browser should automatically open http://localhost:3000/, and you should see our barebones gradebook application. You'll see that our app can't really do anything! All we have is three buttons! We are going to add all the functionality.
github-learning-lab Updated
react-router-dom 、react-router 和 history 库三者什么关系 history 为 react-router 核心,里面集成了 popState、pushState 等路由现实方法。 react-router 封装了 Router、Route、Switch 等组件,实现了路由的改变到组件的更新。 react-router-dom 在 react-router 的基础上添加了 Link、BrowserRouter、HashRouter 组件。 单页面实现核心原理 原理:切换 url,监听 url 的变化,从而渲染不同的页面组件 history 模式 改变路由:history.pushState、history.replaceState 监听路由:history.popState 注意⚠️:用 history.pushState() 或者 history.replaceState() 不会触发 popState 事件。 popState 事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮或者调用 history.back()、history.forward()、history.go()方法。 hash 模式 改变路由:window.location.hash 监听路由:onhashchange Router Hooks useHistory:直接访问 history 不再通过 props useParams:直接访问到路由参数 useLocation:直接返回当前 URL 的 location 对象
sqshada Updated
HTML is the standard language for creating web pages.
jameswan141 Updated
useSubscription 监听事件源的一个官方维护的hooks 使用 安装包 npm install use-subscription 关于useSubscription useMutableSource 例子 rfc 参考 参考
smallwebbird Updated help wanted