committed by
GitHub
22 changed files with 0 additions and 909 deletions
@ -1,5 +0,0 @@ |
|||
--- |
|||
permalink: docs/complementary-tools-it-IT.html |
|||
layout: redirect |
|||
dest_url: https://github.com/facebook/react/wiki/Complementary-Tools |
|||
--- |
@ -1,5 +0,0 @@ |
|||
--- |
|||
permalink: docs/complementary-tools-ko-KR.html |
|||
layout: redirect |
|||
dest_url: https://github.com/facebook/react/wiki/Complementary-Tools |
|||
--- |
@ -1,5 +0,0 @@ |
|||
--- |
|||
permalink: docs/complementary-tools-zh-CN.html |
|||
layout: redirect |
|||
dest_url: https://github.com/facebook/react/wiki/Complementary-Tools |
|||
--- |
@ -1,19 +0,0 @@ |
|||
--- |
|||
id: conferences-it-IT |
|||
title: Conferenze |
|||
permalink: docs/conferences-it-IT.html |
|||
prev: thinking-in-react-it-IT.html |
|||
next: videos-it-IT.html |
|||
--- |
|||
|
|||
### React.js Conf 2015 {#reactjs-conf-2015} |
|||
28 e 29 Gennaio |
|||
|
|||
[Sito web](http://conf.reactjs.com/) - [Agenda](http://conf.reactjs.com/schedule.html) - [Video](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) |
|||
|
|||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
### ReactEurope 2015 {#reacteurope-2015} |
|||
2 e 3 Luglio |
|||
|
|||
[Sito web](http://www.react-europe.org/) - [Agenda](http://www.react-europe.org/#schedule) |
@ -1,19 +0,0 @@ |
|||
--- |
|||
id: conferences-ko-KR |
|||
title: 컨퍼런스들 |
|||
permalink: docs/conferences-ko-KR.html |
|||
prev: thinking-in-react-ko-KR.html |
|||
next: videos-ko-KR.html |
|||
--- |
|||
|
|||
### React.js Conf 2015 {#reactjs-conf-2015} |
|||
1월 28일 & 29일 |
|||
|
|||
[웹사이트](http://conf.reactjs.com/) - [스케줄](http://conf.reactjs.com/schedule.html) - [비디오들](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) |
|||
|
|||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
### ReactEurope 2015 {#reacteurope-2015} |
|||
7월 2일 & 3일 |
|||
|
|||
[웹사이트](http://www.react-europe.org/) - [스케줄](http://www.react-europe.org/#schedule) |
@ -1,29 +0,0 @@ |
|||
--- |
|||
id: conferences-zh-CN |
|||
title: 会议 |
|||
permalink: docs/conferences-zh-CN.html |
|||
prev: thinking-in-react-zh-CN.html |
|||
next: videos-zh-CN.html |
|||
--- |
|||
|
|||
### React.js Conf 2015 {#reactjs-conf-2015} |
|||
一月 28 & 29 |
|||
|
|||
[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) |
|||
|
|||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
### ReactEurope 2015 {#reacteurope-2015} |
|||
七月 2 & 3 |
|||
|
|||
[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) |
|||
|
|||
### Reactive 2015 {#reactive-2015} |
|||
十一月 2-4 |
|||
|
|||
[Website](https://reactive2015.com/) - [Schedule](https://reactive2015.com/schedule_speakers.html#schedule) |
|||
|
|||
### ReactEurope 2016 {#reacteurope-2016} |
|||
六月 2 & 3 |
|||
|
|||
[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) |
@ -1,5 +0,0 @@ |
|||
--- |
|||
permalink: docs/examples-it-IT.html |
|||
layout: redirect |
|||
dest_url: https://github.com/facebook/react/wiki/Examples |
|||
--- |
@ -1,5 +0,0 @@ |
|||
--- |
|||
permalink: docs/examples-ko-KR.html |
|||
layout: redirect |
|||
dest_url: https://github.com/facebook/react/wiki/Examples |
|||
--- |
@ -1,5 +0,0 @@ |
|||
--- |
|||
permalink: docs/examples-zh-CN.html |
|||
layout: redirect |
|||
dest_url: https://github.com/facebook/react/wiki/Examples |
|||
--- |
@ -1,15 +0,0 @@ |
|||
--- |
|||
id: component-workbenches |
|||
title: Component Workbenches |
|||
layout: community |
|||
permalink: community/component-workbenches.html |
|||
--- |
|||
|
|||
* **[Storybook for React](https://github.com/storybooks/storybook):** UI component development environment for React. |
|||
* **[React Styleguidist](https://github.com/styleguidist/react-styleguidist):** Style guide generator & component workbench for React. |
|||
* **[React Showroom](https://github.com/OpusCapita/react-showroom-client):** React based components catalog which provides you with markdown documentation and live examples |
|||
* **[patternplate](https://github.com/sinnerschrader/patternplate)**: A platform for pattern and component library development using React. |
|||
* **[UiZoo.js](https://github.com/myheritage/UiZoo.js)**: Auto-generated component development environment by the JSDoc of React components. |
|||
* **[Neutrino React components preset](https://neutrino.js.org/packages/react-components/)**: Create generic React components and preview them without the need to embed in an application. Plays nicely with other Neutrino middleware, so you can build, test, and publish multiple React components from a single repository. |
|||
* **[React Cosmos](https://github.com/react-cosmos/react-cosmos)**: Dev tool for creating reusable React components. It scans your project for components and enables you to: render components in different states, mock dependencies (API, localStorage, etc.), see app state evolve in real time. |
|||
* **[Bit](https://github.com/teambit/bit)**: Isolate and share components from existing projects to make them available to install in other projects while tracking changes across projects. It helps save the overhead of keeping components in separate repositories. |
@ -1,12 +0,0 @@ |
|||
--- |
|||
id: data-fetching |
|||
title: Data Fetching |
|||
layout: community |
|||
permalink: community/data-fetching.html |
|||
--- |
|||
|
|||
* **[Apollo](https://www.apollographql.com/docs/react/):** Easy to set up and use GraphQL client. |
|||
* **[Axios](https://github.com/mzabriskie/axios):** Promise based HTTP client for the browser and node.js. |
|||
* **[Relay Modern](https://facebook.github.io/relay/docs/en/new-in-relay-modern.html)** - A JavaScript framework for building data-driven React applications. |
|||
* **[Request](https://github.com/request/request):** Simplified HTTP request client. |
|||
* **[Superagent](https://visionmedia.github.io/superagent/):** A lightweight "isomorphic" library for AJAX requests. |
@ -1,8 +0,0 @@ |
|||
--- |
|||
id: debugging-tools |
|||
title: Debugging |
|||
layout: community |
|||
permalink: community/debugging-tools.html |
|||
--- |
|||
|
|||
* **[React Developer Tools](https://github.com/facebook/react-devtools):** an extension available for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/), and as a [standalone app](https://github.com/facebook/react/tree/master/packages/react-devtools) that allows you to inspect the React component hierarchy in the Chrome Developer Tools. |
@ -1,53 +0,0 @@ |
|||
--- |
|||
id: jsx-integrations |
|||
title: JSX Integrations |
|||
layout: community |
|||
permalink: community/jsx-integrations.html |
|||
--- |
|||
|
|||
## Editor Integrations {#editor-integrations} |
|||
* **[Sublime Text: babel-sublime](https://github.com/babel/babel-sublime):** Snippets, syntax highlighting and optimized color schemes for Sublime Text |
|||
* **[Atom: language-babel](https://atom.io/packages/language-babel)** Support for es2016, JSX and Flow. |
|||
* **[Visual Studio Code](https://code.visualstudio.com/updates/vFebruary#_languages-javascript)** Visual Studio Code supports JSX directly. |
|||
* **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/):** Syntax highlighting, code completion, error detection for JSX |
|||
* **[JetBrains IDE Live Templates](https://github.com/Minwe/jetbrains-react):** React live templates for JetBrains editors (e.g. WebStorm, PHPStorm, etc.) |
|||
* **[javascript-jsx.tmbundle](https://github.com/jjeising/javascript-jsx.tmbundle)** Syntax for TextMate |
|||
* **[web-mode.el](http://web-mode.org):** An autonomous emacs major mode that indents and highlights JSX. No support for Automatic Semicolon Insertion. |
|||
* **[vim-jsx](https://github.com/mxw/vim-jsx):** Syntax highlighting and indenting for JSX |
|||
|
|||
## Build Tools {#build-tools} |
|||
|
|||
* **[Create React App](https://github.com/facebookincubator/create-react-app):** An **officially supported** way to create React apps with no configuration. |
|||
* **[nwb](https://github.com/insin/nwb)**: A toolkit for React, Preact & Inferno apps, React libraries and other npm modules for the web, with no configuration (until you need it) |
|||
* **[Neutrino](https://neutrino.js.org/)**: Create and build modern JavaScript applications with zero initial configuration. Neutrino combines the power of webpack with the simplicity of presets. |
|||
* **[ESLint](https://eslint.org/):** A pluggable JavaScript linter that natively supports JSX syntax. Be sure to download [eslint-plugin-react](https://npmjs.com/package/eslint-plugin-react) for React-specific rules. |
|||
* **[Structor](https://www.npmjs.com/package/structor):** This tool is a user interface builder for node.js Web applications with React UI. Structor replaces the now deprecated React UI Builder. Watch [Structor Video Tutorials](https://youtu.be/z96xYa51EWI?list=PLAcaUOtEwjoR_U6eE2HQEXwkefeVESix1) |
|||
* **[react-jsx](https://github.com/bigpipe/react-jsx):** Compile and use JSX as stand-alone templates that can run server-side and client side! |
|||
* **[cjsx-codemod](https://github.com/jsdf/cjsx-codemod):** Write JSX code within Coffeescript! |
|||
* **[ReactScript](https://github.com/1j01/react-script):** Write React code within Coffeescript without JSX! |
|||
* **[jsxhint](https://npmjs.org/package/jsxhint):** [JSHint](http://jshint.com/) (linting) support. (JSX compilation doesn't affect line numbers so lint can also be run directly on the compiled JS.) |
|||
* **[reactify](https://npmjs.org/package/reactify):** [Browserify](http://browserify.org/) transform. |
|||
* **[Babel](https://babeljs.io/):** Standalone & [Browserify](http://browserify.org/) transform (formerly known as **6to5**). |
|||
* **[node-jsx](https://npmjs.org/package/node-jsx):** Native [Node](https://nodejs.org/) support. |
|||
* **[react-hot-loader](https://gaearon.github.io/react-hot-loader/):** Loader for [webpack](https://webpack.github.io/) that lets you edit JSX and have changes appear immediately in the browser without reloading the page. |
|||
* **[jsx-loader](https://npmjs.org/package/jsx-loader):** Loader for [webpack](https://webpack.github.io/). |
|||
* **[express-jsxtransform](https://www.npmjs.org/package/express-jsxtransform):** Middleware for [Express](https://www.npmjs.org/package/express). |
|||
* **[gradle-react-plugin](https://github.com/ehirsch/gradle-react-plugin):** Transform jsx sources during a gradle build. |
|||
* **[grunt-react](https://npmjs.org/package/grunt-react):** [GruntJS](https://gruntjs.com/) task. |
|||
* **[gulp-react](https://npmjs.org/package/gulp-react):** [GulpJS](https://gulpjs.com/) plugin. |
|||
* **[brunch-react](https://www.npmjs.org/package/react-brunch):** [Brunch](https://brunch.io/) plugin. |
|||
* **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin):** [RequireJS](https://requirejs.org/) plugin. |
|||
* **[react-meteor](https://github.com/benjamn/react-meteor):** [Meteor](https://www.meteor.com/) plugin. |
|||
* **[pyReact](https://github.com/facebook/react-python):** [Python](https://www.python.org/) bridge to JSX. |
|||
* **[react-rails](https://github.com/facebook/react-rails):** Ruby gem for using JSX with [Ruby on Rails](https://rubyonrails.org/). |
|||
* **[react-laravel](https://github.com/talyssonoc/react-laravel):** PHP package for using ReactJS with [Laravel](https://laravel.com/). |
|||
* **[ReactJS.NET](https://reactjs.net/):** .NET library for React and JSX. |
|||
* **[sbt-reactjs](https://github.com/ddispaltro/sbt-reactjs)** SBT/Play/Scala JSX compiler plugin |
|||
* **[mimosa-react](https://github.com/dbashford/mimosa-react):** [Mimosa](http://mimosa.io) plugin. |
|||
* **[react-grails-asset-pipeline](https://github.com/peh/react-grails-asset-pipeline):** Assets for react and precompilation of jsx files in [Grails](https://grails.org/). |
|||
* **[gore-gulp](https://github.com/goreutils/gore-gulp):** Wrapper around [webpack](https://webpack.github.io/), [eslint](https://eslint.org/), [mocha](https://mochajs.org/) for ease of use and zero configuration. |
|||
* **[webpack](https://github.com/webpack/webpack):** Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff. |
|||
* **[webpack-bbq](https://github.com/wenbing/webpack-bbq):** transform your src to lib, supports server rendering and static rendering. |
|||
* **[jsxtransformer](https://github.com/cronn-de/jsxtransformer):** Compile pipeline for jsx files in Java |
|||
* **[babylon-jsx](https://github.com/marionebl/babylon-jsx)**: Transform JSX to ES2015 with babylon sans babel |
|||
* **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** - A simple CLI to create and build Express server for your create-react-app projects, featuring Server-side rendering and Code-splitting. |
@ -1,19 +0,0 @@ |
|||
--- |
|||
id: misc |
|||
title: Miscellaneous |
|||
layout: community |
|||
permalink: community/misc.html |
|||
--- |
|||
|
|||
* **[react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux)** - Localization library for React/Redux. |
|||
|
|||
* **[react-inspector](https://github.com/xyc/react-inspector):** Use DevTools-like object inspectors inside your React app. |
|||
* **[jreact](https://github.com/KnisterPeter/jreact):** Rendering react server-side within a JVM (Java 7 or Java 8) |
|||
* **[react-jss](https://github.com/cssinjs/jss/tree/master/packages/react-jss):** Inject and mount jss styles in React components. |
|||
* **[django-react](https://github.com/markfinger/django-react):** Server-side rendering of React components for django apps. |
|||
* **[react-engine](https://github.com/paypal/react-engine):** Composite render engine for isomorphic express apps to render both plain react views and react-router views. |
|||
* **[react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer):** A visual way to see what is (re)rendering and why. |
|||
* **[javascript-monads](https://github.com/dschalk/javascript-monads):** As this project matures, the monads are becoming more than mere toys. React is used in unorthodox ways, so if you want to use React the way they do at Facebook, this is not for you. Transpiled code for the three monad classes can be downloaded by entering "npm install reactive-monads". |
|||
* **[ReactCSS](http://reactcss.com/):** Inline Styles in JS with support for React. |
|||
* **[ReactQuestionnaire](https://github.com/kouryuu/react-questionnaire):** Simple react components for building a questionnaire or survey. |
|||
* **[renderjs.io](https://renderjs.io/):** SEO for Reactjs. Service for making reactjs application crawlable and shareable. |
@ -1,20 +0,0 @@ |
|||
--- |
|||
id: model-management |
|||
title: Model Management |
|||
layout: community |
|||
permalink: community/model-management.html |
|||
--- |
|||
|
|||
* **[Alt](https://alt.js.org/):** Pure vanilla flux made isomorphic and without the boilerplate. |
|||
* **[astarisx](https://zuudo.github.io/astarisx/):** Highly Composable MVVM Framework for React with built-in pushState router. |
|||
* **[avers](https://github.com/wereHamster/avers):** A modern client-side model abstraction library. |
|||
* **[backbone-react-component](https://github.com/magalhas/backbone-react-component):** Use multiple Backbone models and collections with React components both on the client and server sides. |
|||
* **[Baobab](https://github.com/Yomguithereal/baobab):** Persistent data tree supporting cursors. |
|||
* **[cortex](https://github.com/mquan/cortex/):** A JavaScript library for centrally managing data with React. |
|||
* **[DeLorean](https://github.com/deloreanjs/delorean):** A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily. |
|||
* **[Elsa](https://github.com/JonAbrams/elsa):** A Babel plugin that makes your arrays and objects immutable by default… and gives them super powers! |
|||
* **[Immutable](https://github.com/facebook/immutable-js):** Immutable data structures designed to be more JavaScript-y than Mori. |
|||
* **[js-data](https://www.js-data.io/):** A framework-agnostic frontend datastore, that will also fetch your data. |
|||
* **[McFly](https://github.com/kenwheeler/mcfly):** A lightweight Flux library that adds factories for Stores & Actions. |
|||
* **[NuclearJS](https://github.com/optimizely/nuclear-js):** Immutable, reactive Flux architecture. UI Agnostic. |
|||
* **[Reflux](https://github.com/spoike/refluxjs):** An event-based implementation of the Flux architecture that integrates with React components. |
@ -1,18 +0,0 @@ |
|||
--- |
|||
id: routing |
|||
title: Routing |
|||
layout: community |
|||
permalink: community/routing.html |
|||
--- |
|||
|
|||
* **[Aviator](https://github.com/swipely/aviator)** - Aviator is a front-end router built for modular single page applications. ([Example](https://gist.github.com/hojberg/9549330)). |
|||
* **[Backbone](https://backbonejs.org/)** - Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. |
|||
* **[component-router](https://github.com/in-flux/component-router):** Flux-based routing solution for components |
|||
* **[Director](https://github.com/flatiron/director)** - A tiny and isomorphic URL router for JavaScript. |
|||
* **[Finch](http://stoodder.github.io/finchjs/)** - A simple, yet powerful, javascript route handling library. |
|||
* **[mvc-router](https://github.com/rajeev-k/mvc-router)** Use the Model-View-Controller (MVC) pattern to build React applications. |
|||
* **[Reach Router](https://reach.tech/router)** An Accessible Router for React |
|||
* **[react-mini-router](https://github.com/larrymyers/react-mini-router)** A minimal URL router mixin. |
|||
* **[react-passage](https://github.com/dollarshaveclub/react-passage):** Passage helps when linking or redirecting to routes that may or may not be in your react app. |
|||
* **[react-router](https://github.com/rackt/react-router)** - A popular declarative router for React |
|||
* **[react-router-component](https://github.com/andreypopp/react-router-component)** Declarative routing. |
@ -1,41 +0,0 @@ |
|||
--- |
|||
id: starter-kits |
|||
title: Starter Kits |
|||
layout: community |
|||
permalink: community/starter-kits.html |
|||
--- |
|||
|
|||
## Recommended by the React Team {#recommended-by-the-react-team} |
|||
|
|||
* **[Create React App](https://github.com/facebook/create-react-app)** - An officially supported way to start a client-side React project with no configuration |
|||
* **[Next.js](https://nextjs.org/)** - Framework for server-rendered or statically-exported React apps |
|||
* **[Gatsby](https://www.gatsbyjs.org/)** - Static site generator for React optimized for speed |
|||
* **[nwb](https://github.com/insin/nwb)** - A toolkit for React apps, libraries and other npm modules for the web |
|||
* **[razzle](https://github.com/jaredpalmer/razzle)** - Create server-rendered universal JavaScript applications with no configuration |
|||
* **[Neutrino](https://neutrino.js.org/)** - Create and build modern JavaScript applications with zero initial configuration |
|||
* **[Parcel](https://parceljs.org)** - Fast, zero configuration web application bundler |
|||
|
|||
## Other Starter Kits {#other-starter-kits} |
|||
|
|||
* **[kyt](https://github.com/nytimes/kyt)** - The framework that the New York Times uses to develop and build their web properties. It's somewhat opinionated but configurable, and includes starter kits with options to build full-stack or static/client-side apps with the following tools: Express, React, static assets, latest ES, CSS/Sass Modules, Jest, code-splitting, ESLint/Prettier, StyleLint, PostCSS, and inline SVGs. |
|||
* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate providing a virtual development environment and production ready build workflow out of the box. (React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support) |
|||
* **[React + Redux + Saga Boilerplate](https://github.com/gilbarbara/react-redux-saga-boilerplate)** - |
|||
Ready to grow boilerplate with react-router, redux, saga, webpack 3, jest w/ coverage and enzyme. |
|||
* **[Create React App + Redux + React Router](https://github.com/notrab/create-react-app-redux)**: Based on Create React App, this boilerplate comes with Redux, Redux Thunk and React Router all configured ready to go. |
|||
* **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app. |
|||
* **[Este](https://github.com/este/este):** Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included. |
|||
* **[Rekit](https://github.com/supnate/rekit)** - Toolkit and boilerplates for building scalable web applications with React, Redux and React-router. |
|||
* **[webcube](https://github.com/dexteryy/Project-WebCube)** - A JS infrastructure for modern Universal JS web app/sites and static websites. Provides built-in support and simplification for Redux sub-app, reducer bundle, router, immutable, eslint + prettier, docker, monorepo and many other tools. |
|||
* **[starter-react-flux](https://github.com/SokichiFujita/starter-react-flux)** A generator for React and Flux project with Flux-Utils, Jest, Immutable.js, React Addons, Webpack, ESLint, Babel and ES2015. |
|||
* **[react-async-starter](https://github.com/didierfranc/react-async-starter):** React + Redux + Fetch + ES7 Async with Webpack, Babel and hot reloading. |
|||
* **[Kriasoft React Starter Kit](https://github.com/kriasoft/react-starter-kit):** Gulp, Webpack, BrowserSync + [React Starter Kit for Visual Studio](https://marketplace.visualstudio.com/items?itemName=KonstantinTarkus.ReactjsStarterKit) |
|||
* **[electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate)** A React + Flux Electron application boilerplate based on React, Flux, React Router, Webpack, React Hot Loader |
|||
* **[react-boilerplate](https://github.com/mxstbr/react-boilerplate)** Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha. |
|||
* **[vortigern](https://github.com/barbar/vortigern)** A universal boilerplate for building web applications w/ TypeScript, React, Redux and more. |
|||
* **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** CLI to initialize universal create-react-app without ejecting. Supports Server-side rendering with Code-splitting, and Node Stream rendering. |
|||
* **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available. |
|||
* **[bae](https://github.com/siddharthkp/bae)** Zero config toolkit. SSR (with data fetching) + routing + streaming + styling (with styled-components) + HMR out of the box. |
|||
* **[breko-hub](https://github.com/tomatau/breko-hub)** A production ready boilerplate for universal react applications. Complete with code splitting, server render (using koa), redux, sagas, debugging, hot-reloading (live updates on the server), css-modules, scss, super fast integration tests and unit tests. There's also a big focus on clean code and smaller files. |
|||
* **[appseed](https://github.com/rosoftdeveloper/appseed)** A production ready boilerplate for UI-Ready react applications. The frontend can be bundled with various backends: Flask, Laravel, Express. |
|||
* **[Crisp React](https://github.com/winwiz1/crisp-react)** A boilerplate for React + Express integration in TypeScript. Written for performance and debugging convenience. Supports multiple SPAs. Production ready. |
|||
|
@ -1,86 +0,0 @@ |
|||
--- |
|||
id: ui-components |
|||
title: UI Components |
|||
layout: community |
|||
permalink: community/ui-components.html |
|||
--- |
|||
|
|||
## Free Components {#free-components} |
|||
* **[Amaze UI React](https://github.com/amazeui/amazeui-react) (in Chinese):** [Amaze UI](https://github.com/allmobilize/amazeui) components built with React. |
|||
* **[Ant Design of React](https://github.com/ant-design/ant-design)** An enterprise-class UI design language and React-based implementation. |
|||
* **[Base Web](http://baseweb.design):** A foundation for initiating, evolving, and unifying web products. |
|||
* **[Belle](https://github.com/nikgraf/belle/):** Configurable React Components with great UX. |
|||
* **[Chakra UI](https://chakra-ui.com/)**: Simple, modular and accessible component library. |
|||
* **[chartify](https://github.com/kirillstepkin/chartify)**: Ultra lightweight and customizable React.js chart component. |
|||
* **[Elemental UI](http://elemental-ui.com):** A UI toolkit for React websites and apps, themeable and composed of individually packaged components |
|||
* **[Grommet](https://grommet.io/)** The most advanced open source UX framework for enterprise applications. |
|||
* **[Halogen](https://yuanyan.github.io/halogen/):** A collection of highly customizable loading spinner animations with React. |
|||
* **[Khan Academy's component library](https://khan.github.io/react-components/)** |
|||
* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)**: compiles markdown into safe React JSX without using dangerous escape hatches. |
|||
* **[Material-UI](https://material-ui.com/):** React components that implement Google's Material Design. |
|||
* **[Mobiscroll Lite for React](https://mobiscroll.com/forms/react):** A collection of 15 free UI components ranging from inputs, selects, sliders, alerts to rating. |
|||
* **[Onsen UI React Components](https://onsen.io/v2/react.html):** UI components for hybrid mobile apps with both Material Design for Android and flat design for iOS. |
|||
* **[PrimeReact](https://www.primefaces.org/primereact/):** A rich UI component suite for React featuring 70+ open source components. |
|||
* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** Flex grid with inline styles. |
|||
* **[Material Components for React](https://github.com/material-components/material-components-web-react)** MDC React is the official implementation of Google's Material Design Components. |
|||
* **[React Native for Web](https://github.com/necolas/react-native-web)** Makes it possible to run React Native components and APIs on the web using React DOM. |
|||
* **[react-amiga-guru-meditation](https://github.com/gfazioli/react-amiga-guru-meditation):** React JS Class to display a Amiga Guru Meditation Tribute |
|||
* **[react-autosuggest](https://github.com/moroshko/react-autosuggest)** WAI-ARIA compliant React autosuggest component |
|||
* **[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd):** Beautiful, accessible drag and drop for lists with React.js |
|||
* **[react-bootstrap](https://github.com/stevoland/react-bootstrap):** Bootstrap 3 components built with React. |
|||
* **[react-bootstrap-dialog](https://github.com/akiroom/react-bootstrap-dialog):** React Dialog component for react-bootstrap, instead of `window.alert` or `window.confirm` |
|||
* **[react-bootstrap-table2](https://github.com/react-bootstrap-table/react-bootstrap-table2):** It's a react table for Bootstrap. |
|||
* **[react-component](https://github.com/react-component/):** A collection of react components maintained by Alibaba/Alipay employee. |
|||
* **[react-data-menu](https://github.com/dkozar/react-data-menu):** Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other components or screen edges. |
|||
* **[react-date-picker](https://github.com/Hacker0x01/react-datepicker):** A simple and reusable datepicker component for React. |
|||
* **[react-dates](https://github.com/OpusCapita/react-dates):** Date-inputs + date-picker |
|||
* **[react-dnd](https://github.com/gaearon/react-dnd)** Flexible HTML5 drag-and-drop mixin for React with full DOM control |
|||
* **[react-document-title](https://github.com/gaearon/react-document-title)** Declarative, nested, stateful, isomorphic document.title for React |
|||
* **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone):** React Dropzone for File-Uploads |
|||
* **[react-forms](https://prometheusresearch.github.io/react-forms/):** Form rendering and validation for React |
|||
* **[react-highlight](https://github.com/akiran/react-highlight):** React component for syntax highlighting |
|||
* **[react-image](https://github.com/mbrevda/react-image):** Like `<img />` and Enhanced Image Component for React. |
|||
* **[react-input-autosize](https://github.com/JedWatson/react-input-autosize):** Like `<input />` but resizes automatically to fit all its content. |
|||
* **[react-intense](https://github.com/brycedorn/react-intense):** A component for viewing large images up close |
|||
* **[react-joyride](https://github.com/gilbarbara/react-joyride):** Create walkthroughs and guided tours for your ReactJS apps. |
|||
* **[react-ladda](https://github.com/jsdir/react-ladda):** React wrapper for Ladda buttons. |
|||
* **[react-lorem-component](https://github.com/martinandert/react-lorem-component):** Lorem Ipsum placeholder component. |
|||
* **[react-notification](https://github.com/pburtchaell/react-notification):** Snackbar style notifications |
|||
* **[react-select](https://github.com/JedWatson/react-select):** Native React Select / Multiselect input field, similar to Selectize / Chosen / Select2 |
|||
* **[react-selectize](https://furqanzafar.github.io/react-selectize/):** A stateless & flexible Select component, designed as a drop in replacement for React.DOM.Select, inspired by Selectize |
|||
* **[react-sigma](https://www.npmjs.com/package/react-sigma)**: Lightweight but powerful library for drawing network graphs |
|||
* **[react-slick](https://github.com/akiran/react-slick):** Carousel component built with React |
|||
* **[react-sparklines](https://borisyankov.github.io/react-sparklines/):** Beautiful and expressive sparklines component |
|||
* **[react-spreadsheet](https://github.com/felixrieseberg/React-Spreadsheet-Component):** React Spreadsheets / Editable tables with Excel-Style keyboard input and navigation |
|||
* **[react-toggle](https://github.com/gfazioli/react-toggle):** A React UI component to display a toggle button control |
|||
* **[react-tappable](https://github.com/JedWatson/react-tappable)** A Tappable React Component that provides native-feeling onTap events for mobile React apps |
|||
* **[react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize):** Like `<textarea />` but resizes automatically to fit all its content. |
|||
* **[react-toastify](https://github.com/fkhadra/react-toastify):** React notification made easy |
|||
* **[React-TimeAgo](https://www.npmjs.org/package/react-timeago)** A minimal live updating Time Ago component that smartly converts any time to a 'ago' or 'from now' format and keeps it updated. |
|||
* **[react-translate-component](https://github.com/martinandert/react-translate-component):** React component for i18n. |
|||
* **[react-treeview](https://github.com/chenglou/react-treeview):** Easy, light, flexible tree view. |
|||
* **[react-uwp](https://www.react-uwp.com)** A set of React Components that Implement Microsoft's UWP Design & Fluent Design.. |
|||
* **[react-validate-framework](https://github.com/MinJieLiu/react-validate-framework)**: A lightweight and extensible React validation component. |
|||
* **[reactstrap](https://reactstrap.github.io/):** Simple Bootstrap 4 components built with [tether](http://tether.io/) |
|||
* **[Reakit](https://reakit.io/):** Toolkit for building accessible rich web apps with React. |
|||
* **[recharts](https://github.com/recharts/recharts)**: A composable charting library built on React components. |
|||
* **[Selectivity](https://arendjr.github.io/selectivity/):** Modular and light-weight selection library. |
|||
* **[Semantic-ui](https://react.semantic-ui.com/)**: The official Semantic-UI-React integration, Advanced components and declarative UI. |
|||
* **[storybook-addon-material-ui](https://github.com/sm-react/storybook-addon-material-ui)** A storybook addon for material-ui. |
|||
* **[tcomb-form](https://github.com/gcanti/tcomb-form):** Automatically generate form markup, automatic labels and inline validation from a domain model. |
|||
* **[valuelink](https://github.com/Volicon/valuelink):** Full-featured two-way data binding and forms validation with extended React links. |
|||
* **[video-react](https://github.com/video-react/video-react)**: A web video player built for the HTML5 world using React library. |
|||
* **[Winterfell](https://github.com/andrewhathaway/Winterfell):** Generate complex, validated and extendable JSON-based forms in React |
|||
* **[wix-style-react](https://github.com/wix/wix-style-react):** Common React UI components for all Wix verticals developing in React |
|||
|
|||
## Fee Based Components {#fee-based-components} |
|||
|
|||
* **[ag-Grid](https://www.ag-grid.com)** Advanced data grid / data table for React. |
|||
* **[DevExtreme Reactive](https://devexpress.github.io/devextreme-reactive/react/)** High-performance plugin-based Data Grid, Scheduler and Chart components for Bootstrap and Material Design. |
|||
* **[ExtReact components](https://www.sencha.com/products/extreact//)**: 115+ Ready-to-Use UI Components. |
|||
* **[Grapecity Wijmo UI Components for React](https://www.grapecity.com/en/react/)**: Expand your React UI options with Wijmo’s complete collection of JavaScript components. |
|||
* **[jQWidgets React components](https://www.jqwidgets.com/react/)**: Enterprise Ready 70+ UI Components. |
|||
* **[KendoReact](https://www.telerik.com/kendo-react-ui/)**: UI for React Developers. |
|||
* **[Mobiscroll React UI Components](https://mobiscroll.com/react)** Mobile UI Controls for the Productive React Developer. |
|||
* **[React UI Toolkit](https://react-ui-tools.com/)**: 115+ professionally maintainted UI components ranging from a robust grid to charts and more. Try for FREE and build React apps faster. |
|||
* **[Flatlogic React Admin Templates](https://flatlogic.com/templates/react)** 5+ Paid and Free React Admin templates with a lot of components to speed up web development. No jQuery. |
@ -1,173 +0,0 @@ |
|||
--- |
|||
id: videos-it-IT |
|||
title: Video |
|||
permalink: docs/videos-it-IT.html |
|||
prev: conferences-it-IT.html |
|||
next: complementary-tools-it-IT.html |
|||
--- |
|||
|
|||
### Riconsiderare le best practice - JSConf.eu {#riconsiderare-le-best-practice---jsconfeu} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"A Facebook e Instagram, con React stiamo provando a spingerci oltre i limiti di ciò che è possibile realizzare sul web. Il mio talk comincerà con una breve introduzione al framework, e poi approfondirà tre argomenti controversi: Gettare via la nozione dei template e costruire le viste con JavaScript, effettuare il “ri-rendering” dell'intera applicazione quando i dati cambiano, e un'implementazione leggera del DOM e degli eventi." -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Pensare in react - tagtree.tv {#pensare-in-react---tagtreetv} |
|||
|
|||
Un video di [tagtree.tv](http://tagtree.tv/) che espone i principi di [Pensare in React](/docs/thinking-in-react.html) mentre costruisci una semplice applicazione |
|||
<figure><a href="http://tagtree.tv/thinking-in-react"><img src="../images/docs/thinking-in-react-tagtree.png"></a></figure> |
|||
|
|||
* * * |
|||
|
|||
### I Segreti del DOM Virtuale - MtnWest JS {#i-segreti-del-dom-virtuale---mtnwest-js} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"In questo talk discuterò perché abbiamo costruito un DOM virtuale, i vantaggi rispetto ad altri sistemi, e la sua rilevanza per il futuro della tecnologia dei browser." -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Pensare in grande con React {#pensare-in-grande-con-react} |
|||
|
|||
"Sulla carta, tutti questi framework JS sembrano promettenti: implementazioni pulite, design veloce del codice, esecuzione perfetta. Ma che succede quando metti JavaScript sotto stress? Che succede se gli dài in pasto 6 megabyte di codice? In questo talk investigheremo come si comporta React in situazioni di stress elevato, e come ha aiutato il nostro team a costruire codice sicuro ad una scala enorme." |
|||
<figure><a href="https://skillsmatter.com/skillscasts/5429-going-big-with-react#video"><img src="https://i.vimeocdn.com/video/481670116_650.jpg"></a></figure> |
|||
|
|||
* * * |
|||
|
|||
### CodeWinds {#codewinds} |
|||
|
|||
[Pete Hunt](http://www.petehunt.net/) ha parlato con [Jeff Barczewski](http://jeff.barczewski.com/) a proposito di React nell'Episodio 4 di CodeWinds. |
|||
<figure><a href="http://codewinds.com/4"><img src="../images/docs/codewinds-004.png"></a></figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
02:08 - Cos'è React e perché usarlo?<br /> |
|||
03:08 - La relazione simbiotica di ClojureScript e React<br /> |
|||
04:54 - La storia di React e il perché è stato creato<br /> |
|||
09:43 - Aggiornare una pagina web con React senza usare data binding<br /> |
|||
13:11 - Usare il DOM virtuale per cambiare il DOM del browser<br /> |
|||
13:57 - Programmare con React, rendering in HTML, canvas, ed altro<br /> |
|||
16:45 - Lavorare con i designer. Paragone con Ember ed AngularJS<br /> |
|||
21:45 - Il Compilatore JSX che unisce HTML e il javascript di React<br /> |
|||
23:50 - Autobuilding JSX e strumenti nel browser per React<br /> |
|||
24:50 - Trucchi e suggerimenti per lavorare con React, primi passi<br /> |
|||
</td><td> |
|||
27:17 - Rendering HTML lato server con Node.js. Rendering backend<br /> |
|||
29:20 - React evoluto tramite sopravvivenza del più adatto a Facebook<br /> |
|||
30:15 - Idee per avere lo stato sul server e il client, usando web sockets.<br /> |
|||
32:05 - React-multiutente - stato mutevole distribuito usando Firebase<br /> |
|||
33:03 - Miglior debug con React usando le transizioni di stato, ripetere eventi<br /> |
|||
34:08 - Differenze con i Web Components<br /> |
|||
34:25 - Compagnie rilevanti che usano React<br /> |
|||
35:16 - Si può creare un plugin backend di React per generare PDF?<br /> |
|||
36:30 - Futuro di React, cosa viene dopo?<br /> |
|||
39:38 - Contribuire e ricevere aiuto<br /> |
|||
</td></tr></table> |
|||
|
|||
[Leggi le note dell'episodio](http://codewinds.com/4) |
|||
|
|||
* * * |
|||
|
|||
### JavaScript Jabber {#javascript-jabber} |
|||
|
|||
[Pete Hunt](http://www.petehunt.net/) e [Jordan Walke](https://github.com/jordwalke) hanno parlato di React in JavaScript Jabber 73. |
|||
<figure><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../images/docs/javascript-jabber.png"></a></figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
01:34 – Introduzione di Pete Hunt<br /> |
|||
02:45 – Introduzione di Jordan Walke<br /> |
|||
04:15 – React<br /> |
|||
06:38 – 60 Frame Al Secondo<br /> |
|||
09:34 – Data Binding<br /> |
|||
12:31 – Performance<br /> |
|||
17:39 – Algoritmo di Differenza<br /> |
|||
19:36 – Manipolazione del DOM |
|||
</td><td> |
|||
23:06 – Supporto per node.js<br /> |
|||
24:03 – rendr<br /> |
|||
26:02 – JSX<br /> |
|||
30:31 – requestAnimationFrame<br /> |
|||
34:15 – React e le Applicazioni<br /> |
|||
38:12 – Utenti React Khan Academy<br /> |
|||
39:53 – Farlo funzionare |
|||
</td></tr></table> |
|||
|
|||
[Leggi la trascrizione completa](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) |
|||
|
|||
* * * |
|||
|
|||
### Introduzione a React.js - Facebook Seattle {#introduzione-a-reactjs---facebook-seattle} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Di [Tom Occhino](http://tomocchino.com/) e [Jordan Walke](https://github.com/jordwalke) |
|||
|
|||
* * * |
|||
|
|||
### Backbone + React + Middleman Screencast {#backbone--react--middleman-screencast} |
|||
<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Backbone è una grande maniera di interfacciare una API REST con React. Questo screencast mostra come integrare i due usando [Backbone-React-Component](https://github.com/magalhas/backbone-react-component). Middleman è il framework utilizzato in questo esempio, ma può essere facilmente sostituito con altri framework. Si può trovare un template supportato per questo esempio [qui](https://github.com/jbhatab/middleman-backbone-react-template). -- [Open Minded Innovations](http://www.openmindedinnovations.com/) |
|||
|
|||
* * * |
|||
|
|||
### Sviluppare Interfacce Utente Con React - Super VanJS {#sviluppare-interfacce-utente-con-react---super-vanjs} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Di [Steven Luscher](https://github.com/steveluscher) |
|||
|
|||
* * * |
|||
|
|||
### Introduzione a React - LAWebSpeed meetup {#introduzione-a-react---lawebspeed-meetup} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Di [Stoyan Stefanov](http://www.phpied.com/) |
|||
|
|||
* * * |
|||
|
|||
### React, o come rendere la vita più semplice - FrontEnd Dev Conf '14 {#react-o-come-rendere-la-vita-più-semplice---frontend-dev-conf-14} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
**In Russo** di [Alexander Solovyov](http://solovyov.net/) |
|||
|
|||
* * * |
|||
|
|||
### "Programmazione funzionale del DOM" - Meteor DevShop 11 {#programmazione-funzionale-del-dom---meteor-devshop-11} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### "Ripensare lo Sviluppo di Applicazioni Web a Facebook" - Facebook F8 Conference 2014 {#ripensare-lo-sviluppo-di-applicazioni-web-a-facebook---facebook-f8-conference-2014} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### React e Flux: Costruire Applicazioni con un Flusso Dati Unidirezionale - Forward JS 2014 {#react-e-flux-costruire-applicazioni-con-un-flusso-dati-unidirezionale---forward-js-2014} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Gli ingegneri di Facebook [Bill Fisher](https://twitter.com/fisherwebdev) e [Jing Chen](https://twitter.com/jingc) parlano di Flux e React, e di come usare un'architettura dell'applicazione con un flusso di dati unidirezionale rende gran parte del loro codice più pulito. |
|||
|
|||
* * * |
|||
|
|||
### Rendering Lato Server di Applicazioni Isomorfiche a SoundCloud {#rendering-lato-server-di-applicazioni-isomorfiche-a-soundcloud} |
|||
|
|||
<iframe src="https://player.vimeo.com/video/108488724" width="100%" height="365" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> |
|||
|
|||
[Andres Suarez](https://github.com/zertosh) ci accompagna alla scoperta di come [SoundCloud](https://developers.soundcloud.com/blog/) usa React e Flux per il rendering lato server. |
|||
|
|||
[Slide e codice d'esempio](https://github.com/zertosh/ssr-demo-kit) |
|||
|
|||
* * * |
|||
|
|||
### Introduzione a React Native (+Playlist) - React.js Conf 2015 {#introduzione-a-react-native-playlist---reactjs-conf-2015} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
[Tom Occhino](https://twitter.com/tomocchino) ripercorre il passato e il presente di React nel 2015, e ci mostra dove è diretto nell'immediato futuro. |
@ -1,174 +0,0 @@ |
|||
--- |
|||
id: videos-ko-KR |
|||
title: 비디오들 |
|||
permalink: docs/videos-ko-KR.html |
|||
prev: conferences-ko-KR.html |
|||
next: complementary-tools-ko-KR.html |
|||
--- |
|||
|
|||
### Rethinking best practices - JSConf.eu {#rethinking-best-practices---jsconfeu} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"페이스북과 인스타그램에서, 우리는 React 를 이용해 웹에서 벌어질 수 있는 한계를 뛰어넘으려 노력하고 있습니다. 저는 프레임워크에 대한 짤막한 소개로 시작해서, 논쟁이 벌어질 수 있는 다음의 세가지 주제로 넘어갈겁니다. 템플릿의 개념을 버리고 JavaScript 를 이용해 View 를 구축하기, 자료가 변할때 전체 어플리케이션을 다시 그리기(“re-rendering”), 그리고 DOM과 events의 경량화된 구현 입니다." -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Thinking in react - tagtree.tv {#thinking-in-react---tagtreetv} |
|||
|
|||
[tagtree.tv](http://tagtree.tv/)의 비디오는 간단한 어플리케이션을 구성하면서 [Thinking in React](/docs/thinking-in-react-ko-KR.html)의 원리들을 전달합니다. |
|||
<figure><a href="http://tagtree.tv/thinking-in-react"><img src="../images/docs/thinking-in-react-tagtree.png"></a></figure> |
|||
|
|||
* * * |
|||
|
|||
### Secrets of the Virtual DOM - MtnWest JS {#secrets-of-the-virtual-dom---mtnwest-js} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"이번에는 왜 우리가 virtual DOM을 만들었는지, 이것이 다른 시스템들과는 어떻게 다른지, 그리고 브라우져 기술들의 미래와 어떻게 관련이 있는지에 대해서 이야기 해 볼 겁니다." -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Going big with React {#going-big-with-react} |
|||
|
|||
"이 발표에서, 이 모든 JS 프레임워크가 다음을 약속하는것처럼 보입니다: 깨끗한 구현들, 빠른 코드 디자인, 완전한 수행. 그런데 당신이 JavaScript 스트레스 테스트를 할때, 어떤 일이 발생합니까? 혹은 6MB의 코드를 던지면 무슨일이 발생합니까? 이번에는 높은 스트레스 환경에서 React가 어떻게 작동하는지, 그리고 이것이 우리 팀이 방대한 크기의 코드를 안전하게 구성하는데 어떻게 도움이 되어줄지를 조사해 볼겁니다." |
|||
[](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video) |
|||
|
|||
* * * |
|||
|
|||
### CodeWinds {#codewinds} |
|||
|
|||
CodeWinds Episode 4 에서 [Pete Hunt](http://www.petehunt.net/)와 [Jeff Barczewski](http://jeff.barczewski.com/)가 React에 대해서 이야기 합니다. |
|||
|
|||
<figure><a href="http://codewinds.com/4"><img src="../images/docs/codewinds-004.png"></a></figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
02:08 - What is React and why use it?<br /> |
|||
03:08 - The symbiotic relationship of ClojureScript and React<br /> |
|||
04:54 - The history of React and why it was created<br /> |
|||
09:43 - Updating web page with React without using data binding<br /> |
|||
13:11 - Using the virtual DOM to change the browser DOM<br /> |
|||
13:57 - Programming with React, render targets HTML, canvas, other<br /> |
|||
16:45 - Working with designers. Contrasted with Ember and AngularJS<br /> |
|||
21:45 - JSX Compiler bridging HTML and React javascript<br /> |
|||
23:50 - Autobuilding JSX and in browser tools for React<br /> |
|||
24:50 - Tips and tricks to working with React, getting started<br /> |
|||
</td><td> |
|||
27:17 - Rendering HTML on the server with Node.js. Rendering backends<br /> |
|||
29:20 - React evolved through survival of the fittest at Facebook<br /> |
|||
30:15 - Ideas for having state on server and client, using web sockets.<br /> |
|||
32:05 - React-multiuser - distributed shared mutable state using Firebase<br /> |
|||
33:03 - Better debugging with React using the state transitions, replaying events<br /> |
|||
34:08 - Differences from Web Components<br /> |
|||
34:25 - Notable companies using React<br /> |
|||
35:16 - Could a React backend plugin be created to target PDF?<br /> |
|||
36:30 - Future of React, what's next?<br /> |
|||
39:38 - Contributing and getting help<br /> |
|||
</td></tr></table> |
|||
|
|||
[방송 자료 읽어보기](http://codewinds.com/4) |
|||
|
|||
* * * |
|||
|
|||
### JavaScript Jabber {#javascript-jabber} |
|||
|
|||
JavaScript Jabber 73에서 [Pete Hunt](http://www.petehunt.net/)와 [Jordan Walke](https://github.com/jordwalke)가 React에 대해서 이야기했습니다. |
|||
|
|||
<figure><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../images/docs/javascript-jabber.png"></a></figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
01:34 – Pete Hunt Introduction<br /> |
|||
02:45 – Jordan Walke Introduction<br /> |
|||
04:15 – React<br /> |
|||
06:38 – 60 Frames Per Second<br /> |
|||
09:34 – Data Binding<br /> |
|||
12:31 – Performance<br /> |
|||
17:39 – Diffing Algorithm<br /> |
|||
19:36 – DOM Manipulation |
|||
</td><td> |
|||
23:06 – Supporting node.js<br /> |
|||
24:03 – rendr<br /> |
|||
26:02 – JSX<br /> |
|||
30:31 – requestAnimationFrame<br /> |
|||
34:15 – React and Applications<br /> |
|||
38:12 – React Users Khan Academy<br /> |
|||
39:53 – Making it work |
|||
</td></tr></table> |
|||
|
|||
[전체 기록 읽어보기](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) |
|||
|
|||
* * * |
|||
|
|||
### Introduction to React.js - Facebook Seattle {#introduction-to-reactjs---facebook-seattle} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
By [Tom Occhino](http://tomocchino.com/), [Jordan Walke](https://github.com/jordwalke) |
|||
|
|||
* * * |
|||
|
|||
### Backbone + React + Middleman Screencast {#backbone--react--middleman-screencast} |
|||
<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Backbone은 React로 REST API를 제공하기 위한 아주 좋은 방법입니다. 이 화면중개는 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)을 이용해서 어떻게 이 두가지를 연동하는지 보여줍니다. Middleman은 이 예제에서 사용되는 프레임워크이지만, 쉽게 다른 프레임워크로 대체하실 수 있습니다. 지원되는 템플릿은 [이곳](https://github.com/jbhatab/middleman-backbone-react-template)에서 찾으실 수 있습니다. -- [열린 마음의 혁명들](http://www.openmindedinnovations.com/) |
|||
|
|||
* * * |
|||
|
|||
### Developing User Interfaces With React - Super VanJS {#developing-user-interfaces-with-react---super-vanjs} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
By [Steven Luscher](https://github.com/steveluscher) |
|||
|
|||
* * * |
|||
|
|||
### Introduction to React - LAWebSpeed meetup {#introduction-to-react---lawebspeed-meetup} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
by [Stoyan Stefanov](http://www.phpied.com/) |
|||
|
|||
* * * |
|||
|
|||
### React, or how to make life simpler - FrontEnd Dev Conf '14 {#react-or-how-to-make-life-simpler---frontend-dev-conf-14} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
**러시아어** by [Alexander Solovyov](http://solovyov.net/) |
|||
|
|||
* * * |
|||
|
|||
### "Functional DOM programming" - Meteor DevShop 11 {#functional-dom-programming---meteor-devshop-11} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014 {#rethinking-web-app-development-at-facebook---facebook-f8-conference-2014} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014 {#react-and-flux-building-applications-with-a-unidirectional-data-flow---forward-js-2014} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Facebook 개발자 [Bill Fisher](https://twitter.com/fisherwebdev)와 [Jing Chen](https://twitter.com/jingc)가 Flux 와 React 에 대해서 이야기합니다. 그리고 어떻게 단일 방향의 자료흐름을 사용하는 어플리케이션 구조가 방대한 코드를 정리하는지에 대해서 이야기합니다." |
|||
|
|||
* * * |
|||
|
|||
### Server-Side Rendering of Isomorphic Apps at SoundCloud {#server-side-rendering-of-isomorphic-apps-at-soundcloud} |
|||
|
|||
<iframe src="https://player.vimeo.com/video/108488724" width="100%" height="365" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Server-side rendering을 위해 [SoundCloud](https://developers.soundcloud.com/blog/)가 React 와 Flux를 사용하는지 by [Andres Suarez](https://github.com/zertosh) |
|||
[발표 자료와 예제 코드](https://github.com/zertosh/ssr-demo-kit) |
|||
|
|||
* * * |
|||
|
|||
### Introducing React Native (+Playlist) - React.js Conf 2015 {#introducing-react-native-playlist---reactjs-conf-2015} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/v/KVZ-P-ZI6W4&index=1&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
2015년에 [Tom Occhino](https://twitter.com/tomocchino)님이 React의 과거와 현재를 리뷰하고 나아갈 방향을 제시했습니다. |
@ -1,173 +0,0 @@ |
|||
--- |
|||
id: videos-zh-CN |
|||
title: 视频 |
|||
permalink: docs/videos-zh-CN.html |
|||
prev: conferences-zh-CN.html |
|||
next: complementary-tools-zh-CN.html |
|||
--- |
|||
|
|||
### Rethinking best practices - JSConf.eu {#rethinking-best-practices---jsconfeu} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"在 Facebook 和 Instagram, 我们正在努力挑战React在web上能达到的极限。我的讲话会从对框架的简单介绍开始,然后深入三个有争议的话题:扔掉模板的概念并用JavaScript构建views, 当数据改变 “re-rendering” 你的整个应用,以及一个DOM和events的轻量级实现。" -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Thinking in react - tagtree.tv {#thinking-in-react---tagtreetv} |
|||
|
|||
一个 [tagtree.tv](http://tagtree.tv/) 传达 [Thinking in React](/docs/thinking-in-react.html) 原则的视频 在构建一个简单app时。 |
|||
<figure><a href="http://tagtree.tv/thinking-in-react"><img src="../images/docs/thinking-in-react-tagtree.png"></a></figure> |
|||
|
|||
* * * |
|||
|
|||
### Secrets of the Virtual DOM - MtnWest JS {#secrets-of-the-virtual-dom---mtnwest-js} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"在这次讲座里,我会讨论为什么我们构建了一个虚拟 DOM,它比起其他系统如何,以及它与未来浏览器技术的关系。" -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Going big with React {#going-big-with-react} |
|||
|
|||
"理论上,所有的JS框架都大有可为:干净的实现,快速的代码设计,完美的执行。但是当你压力测试时Javascript会怎样?当你丢进6MB的代码时会怎样?在这次演讲中,我们会探究React在高压环境下如何表现,以及它如何帮助我们的团队在大规模时构建安全代码。 " |
|||
<figure><a href="https://skillsmatter.com/skillscasts/5429-going-big-with-react#video"><img src="https://i.vimeocdn.com/video/481670116_650.jpg"></a></figure> |
|||
|
|||
* * * |
|||
|
|||
### CodeWinds {#codewinds} |
|||
|
|||
[Pete Hunt](http://www.petehunt.net/) 与 [Jeff Barczewski](http://jeff.barczewski.com/) 在 CodeWinds Episode 4 上关于 React 的谈话. |
|||
<figure><a href="http://codewinds.com/4"><img src="../images/docs/codewinds-004.png"></a></figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
02:08 - 什么是React,为什么我们用它?<br /> |
|||
03:08 - ClojureScript 和 React 的共生关系<br /> |
|||
04:54 - React 的历史以及为什么它被创造<br /> |
|||
09:43 - 用React更新Web页面,而不绑定数据<br /> |
|||
13:11 - 用虚拟DOM来改变浏览器DOM<br /> |
|||
13:57 - 用React编程,绘制目标HTML,canvas和其他<br /> |
|||
16:45 - 和设计师一起工作,对比于Ember 和 AngularJS<br /> |
|||
21:45 - JSX编译器桥接HTML和 React javascript<br /> |
|||
23:50 - React的自动绑定JSX以及浏览器内工具<br /> |
|||
24:50 - 用React工作的提示和技巧,入门<br /> |
|||
</td><td> |
|||
27:17 - 在服务器端用Node.js渲染HTML。后端渲染<br /> |
|||
29:20 - React在Facebook通过优胜劣汰进化<br /> |
|||
30:15 - 用web sockets,在服务器端和客户端持有状态的想法持有<br /> |
|||
32:05 - 多用户React - 用 Firebase 分布式共享可变状态<br /> |
|||
33:03 - 用状态转换,事件重放来更好的调式React<br /> |
|||
34:08 - 来自Web组件的不同之处<br /> |
|||
34:25 - 使用React的著名公司<br /> |
|||
35:16 - 一个React的后端插件可以用来创建PDF吗?<br /> |
|||
36:30 - React的未来,下一步是什么?<br /> |
|||
39:38 - 贡献和获得帮助<br /> |
|||
</td></tr></table> |
|||
|
|||
[Read the episode notes](http://codewinds.com/4) |
|||
|
|||
* * * |
|||
|
|||
### JavaScript Jabber {#javascript-jabber} |
|||
|
|||
[Pete Hunt](http://www.petehunt.net/) 和 [Jordan Walke](https://github.com/jordwalke) 在 JavaScript Jabber 73 上关于React的谈话. |
|||
<figure><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../images/docs/javascript-jabber.png"></a></figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
01:34 – Pete Hunt 介绍<br /> |
|||
02:45 – Jordan Walke 介绍<br /> |
|||
04:15 – React<br /> |
|||
06:38 – 60 帧每秒<br /> |
|||
09:34 – 数据绑定<br /> |
|||
12:31 – 性能<br /> |
|||
17:39 – Diffing 算法<br /> |
|||
19:36 – DOM 操纵 |
|||
</td><td> |
|||
23:06 – 支持 node.js<br /> |
|||
24:03 – rendr<br /> |
|||
26:02 – JSX<br /> |
|||
30:31 – requestAnimationFrame<br /> |
|||
34:15 – React 和应用<br /> |
|||
38:12 – React 用户 Khan Academy<br /> |
|||
39:53 – 使其工作 |
|||
</td></tr></table> |
|||
|
|||
[Read the full transcript](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) |
|||
|
|||
* * * |
|||
|
|||
### Introduction to React.js - Facebook Seattle {#introduction-to-reactjs---facebook-seattle} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
由 [Tom Occhino](http://tomocchino.com/) 和 [Jordan Walke](https://github.com/jordwalke) |
|||
|
|||
* * * |
|||
|
|||
### Backbone + React + Middleman Screencast {#backbone--react--middleman-screencast} |
|||
<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Backbone 是一个在用React实现 REST API 接口的极好方法。这个屏博展示了用 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)如何整合两者. Middleman 是在本例中使用的框架但很容易被替换成其他框架。对此可支持的template可以在[这里](https://github.com/jbhatab/middleman-backbone-react-template) 找到. -- [Open Minded Innovations](http://www.openmindedinnovations.com/) |
|||
|
|||
* * * |
|||
|
|||
### Developing User Interfaces With React - Super VanJS {#developing-user-interfaces-with-react---super-vanjs} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
来自 [Steven Luscher](https://github.com/steveluscher) |
|||
|
|||
* * * |
|||
|
|||
### Introduction to React - LAWebSpeed meetup {#introduction-to-react---lawebspeed-meetup} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
来自 [Stoyan Stefanov](http://www.phpied.com/) |
|||
|
|||
* * * |
|||
|
|||
### React, or how to make life simpler - FrontEnd Dev Conf '14 {#react-or-how-to-make-life-simpler---frontend-dev-conf-14} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
**俄语** by [Alexander Solovyov](http://solovyov.net/) |
|||
|
|||
* * * |
|||
|
|||
### "Functional DOM programming" - Meteor DevShop 11 {#functional-dom-programming---meteor-devshop-11} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014 {#rethinking-web-app-development-at-facebook---facebook-f8-conference-2014} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014 {#react-and-flux-building-applications-with-a-unidirectional-data-flow---forward-js-2014} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Facebook 工程师 [Bill Fisher](https://twitter.com/fisherwebdev) 和 [Jing Chen](https://twitter.com/jingc) 谈论 Flux 和 React, 以及如何使用单向数据流的程序架构清理他们的代码 . |
|||
|
|||
* * * |
|||
|
|||
### Server-Side Rendering of Isomorphic Apps at SoundCloud {#server-side-rendering-of-isomorphic-apps-at-soundcloud} |
|||
|
|||
<iframe src="https://player.vimeo.com/video/108488724" width="100%" height="365" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> |
|||
|
|||
来自 [Andres Suarez](https://github.com/zertosh) 的演练,关于 [SoundCloud](https://developers.soundcloud.com/blog/) 如何使用 React 和 Flux 在服务器端渲染. |
|||
|
|||
[幻灯片和示例代码](https://github.com/zertosh/ssr-demo-kit) |
|||
|
|||
* * * |
|||
|
|||
### Introducing React Native (+Playlist) - React.js Conf 2015 {#introducing-react-native-playlist---reactjs-conf-2015} |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
[Tom Occhino](https://twitter.com/tomocchino) 回顾了React的过去和现在,在2015年。梳理了下一步要做什么。 |
Loading…
Reference in new issue