GithubHelp home page GithubHelp logo

justjavac / react-faq Goto Github PK

View Code? Open in Web Editor NEW

This project forked from timarney/react-faq

38.0 6.0 13.0 101 KB

收集 React.js 常见问题的链接(中文版)

react reactjs reactnative faq react-native redux

react-faq's Introduction

React FAQ

本指南的目的是把关于 React 核心概念的优质内容集中起来，以便快速参考。

请保持学习的心态。 阅读，尝试，乱搞（没关系）。

加群交流

React技术交流群

其它语言

目录

入门

零基础，之前没有听说过 React?

历史

创建 React 项目

怎么创建一个新的 React 项目?

Where can I find videos for using React Create App?

React Create App + Express @sprjrx @ladyleet

Can I play around with React Online?

为什么使用 React?

  • Composable components
  • Easy to use with existing projects
  • Declarative
  • Functional / Immutable friendly

Is it fast?

What so good about React?

JSX

JSX 是什么?

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. - http://buildwithreact.com

What does JSX really do for me?

This is the sort of stuff JSX saves you from having to manage Jonny Buchanan ‏@jbscript

虚拟 DOM

The Virtual DOM provides a lightweight implementation of the DOM and events system. Instead of dealing with the browser, you manipulate an in-memory version of the DOM.

What is the Virtual DOM?

Is the Virtual DOM all about speed?

No

See :

https://twitter.com/dan_abramov/status/790326092582252544 https://twitter.com/acdlite/status/779693791607336960

I wonder if we can reclaim the VDOM term to mean "Value DOM", as in Value Type, instead of "Virtual DOM"...? More accurate. @sebmarkbage

> It doesn't improve perf over hand written DOM code but it's hard to write on scale. React scales well. **@dan_abramov**
> React ultimately has to call browser APIs at some point, it can't possibly be faster than writing the same exact calls by hand **@dan_abramov**
>React will not do anything that you cannot. By definition everything it does can be reproduced (and some people have with other libraries/frameworks that follow similar conventions). The point is not that React does something that you can't, but rather that by introducing React to your application you are relieved of having to worry about manually handling your DOM, manually determining how to update it efficiently, minimizing traversals, etc. - [Sean Grogg](https://www.quora.com/Is-ReactJS-faster-than-direct-DOM-manipulation-with-JavaScript-or-jQuery)

Key Takeaway:

React keeps your product reasonably fast without you having to think about it all the time, or to jump through the hoops @dan_abramov

React 元素

Elements are the smallest building blocks of React apps. Elements are what components are "made of ..." — React Docs

组件

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. - React Docs

What are some of your best practices when working with components?

  • Keep it (F)ocused.
  • Keep it (I)ndependent.
  • Keep it (R)eusable.
  • Keep it (S)mall.
  • Keep it (T)estable.
  • or in short, FIRST.

— Addy Osmani https://addyosmani.com/first

See : https://twitter.com/mxstbr/status/790084862954864640 Max Stoiber @mxstbr

方法生命周期

Components have several "lifecycle methods" that allow you to override / run code at particular times.

What are Lifecycle Methods?

组件类型

There are two main types of components Functional and Class Components

// Functional Component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Components can be used (composed) in many ways see the following links for patterns and thoughts on creating Components.

How do I decide what type of Component to use?

This comes down to a few factors... a primary one being you need to decide what a component should do.
See: Some Thoughts on Function Components in React from A. Sharif @sharifsbeat for some help deciding.

Also:

Stateless Function <Code />

Presentational and Container Components <Code />

Higher-Order Components <Code />

Function as Child Components <Code />

What types of components are there?

查找组件

Where are some good places to find components?

属性

What are props?

props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. - react-guide

See : props vs state

How do I pass props?

How do I pass boolean values?

Should I use import, props, or context in React?

属性类型

PropTypes are essentially a dictionary where you define what props your component needs and what type(s) they should be. - Niels Gerritsen

What are PropTypes?

Why are React PropTypes important?

How do I validate props?

状态

In one sense, “state” means the current visual representation of the app on screen... In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this.state. - Dave Ceddia

What is state in React?

How do I handle state?

How can I decouple state and UI?

Children API

绑定

The JavaScript bind method has several uses. Typically, it is used to preserve execution context for a function that executes in another context.

What should you use for binding methods in React classes?

What is this bind thing?

事件

How does the event system work in React?

渲染/呈现

What should go in the render function?

Keys

React uses keys to help with Reconciliation (i.e. how it calculates the DOM diff for each render).

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

Why can't i put key in default props (or define the default somewhere else)?

What should I use for a key?

What are some examples where I should manually change a key?

Refs

The ref attribute makes it possible to store a reference to a particular React element or component returned by the component render() configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the render() function. - reactenlightenment.com

What are refs and are string refs are bad?

Context

⚠️ Context is an advanced and experimental feature. The API is likely to change in future releases. The rumours of its existence are true but be careful!

表单

How can I build forms with React?

How can I validate form input?

控制组件

What is a controlled component?

Via Loren Stewart @lorenstewart111 React.js Forms: Controlled Components

A controlled component has two aspects:

  1. Controlled components have functions to govern the data going into them on every onChange event, rather than grabbing the data only once, e.g. when a user clicks a submit button. This 'governed' data is then saved to state (in this case, the parent/container component's state).

  2. Data displayed by a controlled component is received through props passed down from it's parent/container component.

This is a one-way loop – from (1) child component input (2) to parent component state and (3) back down to the child component via props – is what is meant by unidirectional data flow in React.js application architecture.

#React Ajax

What is the best practice for getting server data into React components?

It depends! See: React AJAX Best Practices Andrew H Farmer @ahfarmer

模式

Gotchas

What are some React Gotchas?

PATENTS

What's all this stuff I hear about Facebook PATENTS clause?

Mixins

Why are Mixins Considered Harmful?

国际化

How should I handle internationalization?

What repos should I checkout for internationalization?

第三方库

How do I use third party libraries?

性能

How can I make my app faster?

动画

How do I animate things in React?

Is there declarative api for animations?

How can I animate Page Transitions?

What are some good repos to checkout for animation in React?

SVG & React

How do I work with SVG's in React?

React Style Guides

Where can I find some good React style guides?

Redux 和 Mobx

What's (Redux/Mobx)?

Do I need to use (Redux/Mobx)?

将 React 添加到现有 APP 中

How do I start adding React to an existing app?

CSS 和 React

What about styling things in React?

You can use plain CSS or any preprocessor (Sass, Less etc...) with React. React outputs standard markup so technically you can keep doing what you've been doing.

Using CSS to style our React content is actually as straightforward as you can imagine it to be. Because React ends up spitting out regular HTML tags, all of the various CSS tricks you've learned over the years to style HTML still apply. - kirupa

What about using Bootstrap with React?

Component Level Styling

There are various approaches for React that allow us to push styling to the component level. - survivejs.com

What repos should I checkout for styling at the component level?

Note: Also see - Styled components or Glamor?

What's the difference between what’s called "inline styles" and what's called “CSS-in-JS”?

I just need some simple inline styles ... What's the most basic way to use inline styles with React?

What resources are available discussing the pros and cons of inline styles and CSS in JS?

What about using CSS Modules for styling?

There's too many CSS in JS options how can I compare them?

How can I style/build a component that's very reusable customizable?

测试

讨论/会议视频

为 React JS 贡献代码

Where can I learn about Contributing to React JS?

核心注释

Where can I find out what's going on with React / Upcoming versions?

通用的 React

Deep Dive

React Fiber

What is React Fiber?

Is Fiber ready yet?

How can I contribute to Fiber?

视频课程

What are some good video resources/courses to learn React?

#A11Y

What about accessibility?

How do I handle A11y in React

讨论

练习

Where can I get React training?

Micheal Jackson @mjackson & Ryan Florence @ryanflorence

*Brian Holt* @holtbt

书籍

Where can I find some good books about React?

Newsletters

Where can I find React specific newsletters?

Interview Questions

工具

react-faq's People

Contributors

aethant avatar ashiknesin avatar chantastic avatar coryhouse avatar hardik avatar justjavac avatar mweststrate avatar nixypanda avatar radarhere avatar thejian avatar timarney avatar wesbos avatar xdae avatar yanisurbis avatar youbicode avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

waynedai cuizhengyang libinxuanbing lx7575000 dut3062796s fubst0318 rankyst zmx2321 richard2018 cuitymiko yatoo2018 byhappysun helentim

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.