diff --git a/beta/.gitignore b/beta/.gitignore index c842b12a3..69060a26c 100644 --- a/beta/.gitignore +++ b/beta/.gitignore @@ -35,6 +35,4 @@ yarn-error.log* .vercel # external fonts -public/fonts/Optimistic_Display_W_Lt.woff2 -public/fonts/Optimistic_Display_W_Md.woff2 -public/fonts/Optimistic_Display_W_Bd.woff2 +public/fonts/Optimistic_*.woff2 diff --git a/beta/next.config.js b/beta/next.config.js index 208895f9a..2ea3e916e 100644 --- a/beta/next.config.js +++ b/beta/next.config.js @@ -2,8 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -const redirects = require('./src/redirects.json'); - /** * @type {import('next').NextConfig} **/ @@ -19,19 +17,6 @@ const nextConfig = { env: { SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS, }, - async redirects() { - return redirects.redirects; - }, - // TODO: this causes extra router.replace() on every page. - // Let's disable until we figure out what's going on. - // rewrites() { - // return [ - // { - // source: '/feed.xml', - // destination: '/_next/static/feed.xml', - // }, - // ]; - // }, webpack: (config, {dev, isServer, ...options}) => { if (process.env.ANALYZE) { const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); diff --git a/beta/package.json b/beta/package.json index 6e2d373a6..acef2acfc 100644 --- a/beta/package.json +++ b/beta/package.json @@ -6,7 +6,7 @@ "scripts": { "analyze": "ANALYZE=true next build", "dev": "next-remote-watch ./src/content", - "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js && node ./scripts/downloadFonts.js", + "build": "next build && node ./scripts/downloadFonts.js", "lint": "next lint", "lint:fix": "next lint --fix", "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", diff --git a/beta/public/images/og-blog.png b/beta/public/images/og-blog.png new file mode 100644 index 000000000..fbc8dd10b Binary files /dev/null and b/beta/public/images/og-blog.png differ diff --git a/beta/public/images/og-community.png b/beta/public/images/og-community.png new file mode 100644 index 000000000..6b4e0d491 Binary files /dev/null and b/beta/public/images/og-community.png differ diff --git a/beta/public/images/og-home.png b/beta/public/images/og-home.png new file mode 100644 index 000000000..6fe07b495 Binary files /dev/null and b/beta/public/images/og-home.png differ diff --git a/beta/public/images/og-learn.png b/beta/public/images/og-learn.png new file mode 100644 index 000000000..8e329db0a Binary files /dev/null and b/beta/public/images/og-learn.png differ diff --git a/beta/public/images/og-reference.png b/beta/public/images/og-reference.png new file mode 100644 index 000000000..3ce656e8d Binary files /dev/null and b/beta/public/images/og-reference.png differ diff --git a/beta/public/images/og-unknown.png b/beta/public/images/og-unknown.png new file mode 100644 index 000000000..6fe07b495 Binary files /dev/null and b/beta/public/images/og-unknown.png differ diff --git a/beta/scripts/downloadFonts.js b/beta/scripts/downloadFonts.js index 098513ac9..62fe5bcad 100644 --- a/beta/scripts/downloadFonts.js +++ b/beta/scripts/downloadFonts.js @@ -15,3 +15,15 @@ execSync( execSync( 'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2' ); +execSync( + 'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_SBd.woff2 --output public/fonts/Optimistic_Display_W_SBd.woff2' +); +execSync( + 'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Rg.woff2 --output public/fonts/Optimistic_Text_W_Rg.woff2' +); +execSync( + 'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Md.woff2 --output public/fonts/Optimistic_Text_W_Md.woff2' +); +execSync( + 'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Bd.woff2 --output public/fonts/Optimistic_Text_W_Bd.woff2' +); diff --git a/beta/scripts/generateBlogIndex.js b/beta/scripts/generateBlogIndex.js deleted file mode 100644 index b9deaa585..000000000 --- a/beta/scripts/generateBlogIndex.js +++ /dev/null @@ -1,69 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); -const parseISO = require('date-fns/parseISO'); -const readingTime = require('reading-time'); -const {markdownToHtml} = require('../plugins/markdownToHtml'); - -/** - * This looks at the ./src/pages/blog directory and creates a route manifest that can be used - * in the sidebar and footers, and (in theory) category and author pages. - * - * For now, the blog manifest is a big array in reverse chronological order. - */ -Promise.resolve() - .then(async () => { - const routes = []; - const blogPosts = await globby('src/pages/blog/**/*.md'); - - for (let postpath of blogPosts) { - const [year, month, day, title] = postpath - .replace('src/pages/blog/', '') - .split('/'); - - const rawStr = await fs.readFile(postpath, 'utf8'); - const {data, excerpt, content} = fm(rawStr, { - excerpt: function firstLine(file, options) { - file.excerpt = file.content.split('\n').slice(0, 2).join(' '); - }, - }); - const rendered = await markdownToHtml(excerpt.trimLeft().trim()); - - routes.unshift({ - path: postpath.replace('src/pages', ''), - date: [year, month, day].join('-'), - title: data.title, - author: data.author, - excerpt: rendered, - readingTime: readingTime(content).text, - }); - } - - const sorted = routes.sort((post1, post2) => - parseISO(post1.date) > parseISO(post2.date) ? -1 : 1 - ); - const blogManifest = { - routes: sorted, - }; - const blogRecentSidebar = { - routes: [ - { - title: 'Recent Posts', - path: '/blog', - heading: true, - routes: sorted.slice(0, 25), - }, - ], - }; - - await fs.writeFile( - path.resolve('./src/blogIndex.json'), - JSON.stringify(blogManifest, null, 2) - ); - await fs.writeFile( - path.resolve('./src/blogIndexRecent.json'), - JSON.stringify(blogRecentSidebar, null, 2) - ); - }) - .catch(console.error); diff --git a/beta/scripts/generateRSS.js b/beta/scripts/generateRSS.js deleted file mode 100644 index a08c7e2ad..000000000 --- a/beta/scripts/generateRSS.js +++ /dev/null @@ -1,46 +0,0 @@ -const RSS = require('rss'); -const fs = require('fs-extra'); -const authorsJson = require('../src/authors.json'); -const blogIndexJson = require('../src/blogIndex.json'); -const parse = require('date-fns/parse'); - -function removeFromLast(path, key) { - const i = path.lastIndexOf(key); - return i === -1 ? path : path.substring(0, i); -} - -const SITE_URL = 'https://reactjs.org'; - -function generate() { - const feed = new RSS({ - title: 'React.js Blog', - site_url: SITE_URL, - feed_url: SITE_URL + '/feed.xml', - }); - - blogIndexJson.routes.map((meta) => { - feed.item({ - title: meta.title, - guid: removeFromLast(meta.path, '.'), - url: SITE_URL + removeFromLast(meta.path, '.'), - date: parse(meta.date, 'yyyy-MM-dd', new Date()), - description: meta.description, - custom_elements: [].concat( - meta.author.map((author) => ({ - author: [{ name: authorsJson[author].name }], - })) - ), - }); - }); - - const rss = feed.xml({ indent: true }); - - fs.writeFileSync('./.next/static/feed.xml', rss); -} - -try { - generate(); -} catch (error) { - console.error('Error generating rss feed'); - throw error; -} diff --git a/beta/scripts/generateRedirects.js b/beta/scripts/generateRedirects.js deleted file mode 100644 index b6e23b58a..000000000 --- a/beta/scripts/generateRedirects.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -const resolve = require('path').resolve; -const {writeFile} = require('fs-extra'); -const readFileSync = require('fs').readFileSync; -const safeLoad = require('js-yaml').safeLoad; -const path = require('path'); -const versionsFile = resolve(__dirname, '../../content/versions.yml'); -const file = readFileSync(versionsFile, 'utf8'); -const versions = safeLoad(file); -const redirectsFilePath = path.join('vercel.json'); - -function writeRedirectsFile(redirects, redirectsFilePath) { - if (!redirects.length) { - return null; - } - - /** - * We will first read the old config to validate if the redirect already exists in the json - */ - const vercelConfigPath = resolve(__dirname, '../../vercel.json'); - const vercelConfigFile = readFileSync(vercelConfigPath); - const oldConfigContent = JSON.parse(vercelConfigFile); - /** - * Map data as vercel expects it to be - */ - - let vercelRedirects = {}; - - redirects.forEach((redirect) => { - const {fromPath, isPermanent, toPath} = redirect; - - vercelRedirects[fromPath] = { - destination: toPath, - permanent: !!isPermanent, - }; - }); - - /** - * Make sure we dont have the same redirect already - */ - oldConfigContent.redirects.forEach((data) => { - if(vercelRedirects[data.source]){ - delete vercelRedirects[data.source]; - } - }); - - /** - * Serialize the object to array of objects - */ - let newRedirects = []; - Object.keys(vercelRedirects).forEach((value) => - newRedirects.push({ - source: value, - destination: vercelRedirects[value].destination, - permanent: !!vercelRedirects[value].isPermanent, - }) - ); - - /** - * We already have a vercel.json so we spread the new contents along with old ones - */ - const newContents = { - ...oldConfigContent, - redirects: [...oldConfigContent.redirects, ...newRedirects], - }; - writeFile(redirectsFilePath, JSON.stringify(newContents, null, 2)); -} - -// versions.yml structure is [{path: string, url: string, ...}, ...] -writeRedirectsFile( - versions - .filter((version) => version.path && version.url) - .map((version) => ({ - fromPath: version.path, - toPath: version.url, - })), - redirectsFilePath -); diff --git a/beta/scripts/migrations/migrateBlogPosts.js b/beta/scripts/migrations/migrateBlogPosts.js deleted file mode 100644 index 8b93c23ab..000000000 --- a/beta/scripts/migrations/migrateBlogPosts.js +++ /dev/null @@ -1,50 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); -const parse = require('date-fns/parse'); - -/** - * This script takes the gatsby blog posts directory and migrates it. - * - * In gatsby, blog posts were put in markdown files title YYYY-MM-DD-post-title.md. - * This script looks at that directory and then moves posts into folders paths - * that match the end URL structure of /blog/YYYY/MM/DD/postitle.md - * - * This allows us to use MDX in blog posts. - */ - -// I dropped them into src/pages/oldblog -// @todo remove after migration -// I am not proud of this. Also, the blog posts needed to be cleaned up for MDX, don't run this again. -Promise.resolve() - .then(async () => { - const blogManifest = {}; - const blogPosts = await globby('src/pages/oldblog/*.md'); - // console.log(blogPosts); - for (let postpath of blogPosts.sort()) { - const rawStr = await fs.readFile(postpath, 'utf8'); - // console.log(rawStr); - const {data, content} = fm(rawStr); - const cleanPath = postpath.replace('src/pages/oldblog/', ''); - const yrStr = parseInt(cleanPath.substr(0, 4), 10); // 2013-06-02 - // console.log(yrStr); - const dateStr = cleanPath.substr(0, 10); // 2013-06-02 - const postFileName = cleanPath.substr(11); - // console.log(postFileName, dateStr); - const datePath = dateStr.split('-').join('/'); - // console.log(datePath); - const newPath = './src/pages/blog/' + datePath + '/' + postFileName; - // console.log(newPath); - await fs.ensureFile(path.resolve(newPath)); - await fs.writeFile( - path.resolve(newPath), - rawStr - .replace('
', '
') - .replace('
', '
') - .replace('layout: post', '') - .replace('\nauthor', '\nlayout: Post\nauthor') - ); - } - }) - .catch(console.error); diff --git a/beta/scripts/migrations/migratePermalinks.js b/beta/scripts/migrations/migratePermalinks.js deleted file mode 100644 index ad0303d4a..000000000 --- a/beta/scripts/migrations/migratePermalinks.js +++ /dev/null @@ -1,35 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); - -/** - * This script ensures that every file in the docs folder is named corresponding - * to its respective frontmatter permalink. In the old site, the path of the page was set by - * the `permalink` in markdown frontmatter, and not the name of the file itself or it's id. - * In the new Next.js site, with its filesystem router, the name of the file must - * match exactly to its `permalink`. - */ -Promise.resolve() - .then(async () => { - const pages = await globby('src/pages/docs/**/*.{md,mdx}'); - for (let sourcePath of pages.sort()) { - const rawStr = await fs.readFile(sourcePath, 'utf8'); - const {data, content} = fm(rawStr); - const currentPath = sourcePath - .replace('src/pages/', '') - .replace('.md', ''); - const permalink = data.permalink.replace('.html', ''); - if (permalink !== currentPath) { - const destPath = 'src/pages/' + permalink + '.md'; - try { - await fs.move(sourcePath, destPath); - console.log(`MOVED: ${sourcePath} --> ${destPath}`); - } catch (error) { - console.error(`ERROR: ${sourcePath} --> ${destPath}`); - console.error(error); - } - } - } - }) - .catch(console.error); diff --git a/beta/scripts/migrations/migrateRedirects.js b/beta/scripts/migrations/migrateRedirects.js deleted file mode 100644 index 5e0a6ed0e..000000000 --- a/beta/scripts/migrations/migrateRedirects.js +++ /dev/null @@ -1,117 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); - -/** - * This script takes a look at all the redirect frontmatter and converts it - * into a Next.js compatible redirects list. It also merges it with netlify's - * _redirects, which we moved by hand below. - * - * @remarks - * In the old gatsby site, redirects were specified in docs and blog post - * frontmatter that looks like: - * - * --- - * redirect_from: - * - /docs/old-path.html#maybe-an-anchor - * --- - */ - -const netlifyRedirects = [ - { - source: '/html-jsx.html', - destination: 'https://magic.reactjs.net/htmltojsx.htm', - permanent: true, - }, - { - source: '/tips/controlled-input-null-value.html', - destination: '/docs/forms.html#controlled-input-null-value', - permanent: false, // @todo why were these not permanent on netlify? - }, - { - source: '/concurrent', - destination: '/docs/concurrent-mode-intro.html', - permanent: false, - }, - { - source: '/hooks', - destination: '/docs/hooks-intro.html', - permanent: false, - }, - { - source: '/tutorial', - destination: '/tutorial/tutorial.html', - permanent: false, - }, - { - source: '/your-story', - destination: 'https://www.surveymonkey.co.uk/r/MVQV2R9', - permanent: true, - }, - { - source: '/stories', - destination: 'https://medium.com/react-community-stories', - permanent: true, - }, -]; - -Promise.resolve() - .then(async () => { - let contentRedirects = []; - let redirectPageCount = 0; - - // Get all markdown pages - const pages = await globby('src/pages/**/*.{md,mdx}'); - for (let filepath of pages) { - // Read file as string - const rawStr = await fs.readFile(filepath, 'utf8'); - // Extract frontmatter - const {data, content} = fm(rawStr); - // Look for redirect yaml - if (data.redirect_from) { - redirectPageCount++; - - let destinationPath = filepath - .replace('src/pages', '') - .replace('.md', ''); - - // Fix /docs/index -> /docs - if (destinationPath === '/docs/index') { - destinationPath = '/docs'; - } - - if (destinationPath === '/index') { - destinationPath = '/'; - } - - for (let sourcePath of data.redirect_from) { - contentRedirects.push({ - source: '/' + sourcePath, // add slash - destination: destinationPath, - permanent: true, - }); - } - } - } - console.log( - `Found ${redirectPageCount} pages with \`redirect_from\` frontmatter` - ); - console.log( - `Writing ${contentRedirects.length} redirects to redirects.json` - ); - - await fs.writeFile( - path.resolve('./src/redirects.json'), - JSON.stringify( - { - redirects: [...contentRedirects, ...netlifyRedirects], - }, - null, - 2 - ) - ); - - console.log('✅ Done writing redirects'); - }) - .catch(console.error); diff --git a/beta/src/authors.json b/beta/src/authors.json deleted file mode 100644 index 76cd5aedd..000000000 --- a/beta/src/authors.json +++ /dev/null @@ -1,130 +0,0 @@ -{ - "acdlite": { - "name": "Andrew Clark", - "url": "https://twitter.com/acdlite" - }, - "benigeri": { - "name": "Paul Benigeri", - "url": "https://github.com/benigeri" - }, - "bvaughn": { - "name": "Brian Vaughn", - "url": "https://github.com/bvaughn" - }, - "chenglou": { - "name": "Cheng Lou", - "url": "https://twitter.com/_chenglou" - }, - "clemmy": { - "name": "Clement Hoang", - "url": "https://twitter.com/c8hoang" - }, - "Daniel15": { - "name": "Daniel Lo Nigro", - "url": "https://d.sb/" - }, - "fisherwebdev": { - "name": "Bill Fisher", - "url": "https://twitter.com/fisherwebdev" - }, - "flarnie": { - "name": "Flarnie Marchan", - "url": "https://twitter.com/ProbablyFlarnie" - }, - "gaearon": { - "name": "Dan Abramov", - "url": "https://twitter.com/dan_abramov" - }, - "jaredly": { - "name": "Jared Forsyth", - "url": "https://twitter.com/jaredforsyth" - }, - "jgebhardt": { - "name": "Jonas Gebhardt", - "url": "https://twitter.com/jonasgebhardt" - }, - "jimfb": { - "name": "Jim Sproch", - "url": "http: //www.jimsproch.com" - }, - "jingc": { - "name": "Jing Chen", - "url": "https://twitter.com/jingc" - }, - "josephsavona": { - "name": "Joseph Savona", - "url": "https://twitter.com/en_JS" - }, - "keyanzhang": { - "name": "Keyan Zhang", - "url": "https://twitter.com/keyanzhang" - }, - "kmeht": { - "name": "Kunal Mehta", - "url": "https://github.com/kmeht" - }, - "LoukaN": { - "name": "Lou Husson", - "url": "https://twitter.com/loukan42" - }, - "matthewjohnston4": { - "name": "Matthew Johnston", - "url": "https://github.com/matthewathome" - }, - "nhunzaker": { - "name": "Nathan Hunzaker", - "url": "https://github.com/nhunzaker" - }, - "petehunt": { - "name": "Pete Hunt", - "url": "https://twitter.com/floydophone" - }, - "rachelnabors": { - "name": "Rachel Nabors", - "url": "https://twitter.com/rachelnabors" - }, - "schrockn": { - "name": "Nick Schrock", - "url": "https://twitter.com/schrockn" - }, - "sebmarkbage": { - "name": "Sebastian Markbåge", - "url": "https://twitter.com/sebmarkbage" - }, - "sophiebits": { - "name": "Sophie Alpert", - "url": "https://sophiebits.com/" - }, - "steveluscher": { - "name": "Steven Luscher", - "url": "https://twitter.com/steveluscher" - }, - "tesseralis": { - "name": "Nat Alison", - "url": "https://twitter.com/tesseralis" - }, - "threepointone": { - "name": "Sunil Pai", - "url": "https://twitter.com/threepointone" - }, - "timer": { - "name": "Joe Haddad", - "url": "https://twitter.com/timer150" - }, - "vjeux": { - "name": "Vjeux", - "url": "https://twitter.com/vjeux" - }, - "wincent": { - "name": "Greg Hurrell", - "url": "https://twitter.com/wincent" - }, - "zpao": { - "name": "Paul O’Shannessy", - "url": "https://twitter.com/zpao" - }, - "tomocchino": { - "name": "Tom Occhino", - "url": "https://twitter.com/tomocchino" - } -} diff --git a/beta/src/blogIndex.json b/beta/src/blogIndex.json deleted file mode 100644 index 088a1f82c..000000000 --- a/beta/src/blogIndex.json +++ /dev/null @@ -1,1400 +0,0 @@ -{ - "routes": [ - { - "path": "/blog/2020/08/10/react-v17-rc.md", - "date": "2020-08-10", - "title": "React v17.0 Release Candidate: No New Features", - "author": [ - "gaearon", - "rachelnabors" - ], - "excerpt": "

Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2020/02/26/react-v16.13.0.md", - "date": "2020-02-26", - "title": "React v16.13.0", - "author": [ - "threepointone" - ], - "excerpt": "

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md", - "date": "2019-11-06", - "title": "Building Great User Experiences with Concurrent Mode and Suspense", - "author": [ - "josephsavona" - ], - "excerpt": "

At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com.

\n", - "readingTime": "17 min read" - }, - { - "path": "/blog/2019/10/22/react-release-channels.md", - "date": "2019-10-22", - "title": "Preparing for the Future with React Prereleases", - "author": [ - "acdlite" - ], - "excerpt": "

To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/08/15/new-react-devtools.md", - "date": "2019-08-15", - "title": "Introducing the New React DevTools", - "author": [ - "bvaughn" - ], - "excerpt": "

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2019/08/08/react-v16.9.0.md", - "date": "2019-08-08", - "title": "React v16.9.0 and the Roadmap Update", - "author": [ - "gaearon", - "bvaughn" - ], - "excerpt": "

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2019/02/23/is-react-translated-yet.md", - "date": "2019-02-23", - "title": "Is React Translated Yet? ¡Sí! Sim! はい！", - "author": [ - "tesseralis" - ], - "excerpt": "

We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into over 30 languages! You can find them on the new Languages page.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/02/06/react-v16.8.0.md", - "date": "2019-02-06", - "title": "React v16.8: The One With Hooks", - "author": [ - "gaearon" - ], - "excerpt": "

With React 16.8, React Hooks are available in a stable release!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2018/12/19/react-v-16-7.md", - "date": "2018-12-19", - "title": "React v16.7: No, This Is Not the One With Hooks", - "author": [ - "acdlite" - ], - "excerpt": "

Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2018/11/27/react-16-roadmap.md", - "date": "2018-11-27", - "title": "React 16.x Roadmap", - "author": [ - "gaearon" - ], - "excerpt": "

You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/11/13/react-conf-recap.md", - "date": "2018-11-13", - "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering", - "author": [ - "tomocchino" - ], - "excerpt": "

This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2018/10/23/react-v-16-6.md", - "date": "2018-10-23", - "title": "React v16.6.0: lazy, memo and contextType", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/10/01/create-react-app-v2.md", - "date": "2018-10-01", - "title": "Create React App 2.0: Babel 7, Sass, and More", - "author": [ - "timer", - "gaearon" - ], - "excerpt": "

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/09/10/introducing-the-react-profiler.md", - "date": "2018-09-10", - "title": "Introducing the React Profiler", - "author": [ - "bvaughn" - ], - "excerpt": "

React 16.5 adds support for a new DevTools profiler plugin.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2018/08/01/react-v-16-4-2.md", - "date": "2018-08-01", - "title": "React v16.4.2: Server-side vulnerability fix", - "author": [ - "gaearon" - ], - "excerpt": "

We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md", - "date": "2018-06-07", - "title": "You Probably Don't Need Derived State", - "author": [ - "bvaughn" - ], - "excerpt": "

React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/05/23/react-v-16-4.md", - "date": "2018-05-23", - "title": "React v16.4.0: Pointer Events", - "author": [ - "acdlite" - ], - "excerpt": "

The latest minor release adds support for an oft-requested feature: pointer events!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/03/29/react-v-16-3.md", - "date": "2018-03-29", - "title": "React v16.3.0: New lifecycles and context API", - "author": [ - "bvaughn" - ], - "excerpt": "

A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/03/27/update-on-async-rendering.md", - "date": "2018-03-27", - "title": "Update on Async Rendering", - "author": [ - "bvaughn" - ], - "excerpt": "

For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, Dan unveiled some of the exciting new possibilities async rendering unlocks. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md", - "date": "2018-03-01", - "title": "Sneak Peek: Beyond React 16", - "author": [ - "sophiebits" - ], - "excerpt": "

Dan Abramov from our team just spoke at JSConf Iceland 2018 with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md", - "date": "2017-12-15", - "title": "Behind the Scenes: Improving the Repository Infrastructure", - "author": [ - "gaearon", - "bvaughn" - ], - "excerpt": "

As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.

\n", - "readingTime": "30 min read" - }, - { - "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md", - "date": "2017-12-07", - "title": "Introducing the React RFC Process", - "author": [ - "acdlite" - ], - "excerpt": "

We’re adopting an RFC (“request for comments”) process for contributing ideas to React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md", - "date": "2017-11-28", - "title": "React v16.2.0: Improved Support for Fragments", - "author": [ - "clemmy" - ], - "excerpt": "

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2017/09/26/react-v16.0.md", - "date": "2017-09-26", - "title": "React v16.0", - "author": [ - "acdlite" - ], - "excerpt": "

We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2017/09/25/react-v15.6.2.md", - "date": "2017-09-25", - "title": "React v15.6.2", - "author": [ - "nhunzaker" - ], - "excerpt": "

Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2017/09/08/dom-attributes-in-react-16.md", - "date": "2017-09-08", - "title": "DOM Attributes in React 16", - "author": [ - "gaearon" - ], - "excerpt": "

In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it. For example, this:

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2017/07/26/error-handling-in-react-16.md", - "date": "2017-07-26", - "title": "Error Handling in React 16", - "author": [ - "gaearon" - ], - "excerpt": "

As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2017/06/13/react-v15.6.0.md", - "date": "2017-06-13", - "title": "React v15.6.0", - "author": [ - "flarnie" - ], - "excerpt": "

Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2017/05/18/whats-new-in-create-react-app.md", - "date": "2017-05-18", - "title": "What's New in Create React App", - "author": [ - "gaearon" - ], - "excerpt": "

Less than a year ago, we introduced Create React App as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2017/04/07/react-v15.5.0.md", - "date": "2017-04-07", - "title": "React v15.5.0", - "author": [ - "acdlite" - ], - "excerpt": "

It’s been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a complete rewrite of React’s internals. We take stability seriously, and are committed to bringing those improvements to all of our users with minimal effort.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2016/11/16/react-v15.4.0.md", - "date": "2016-11-16", - "title": "React v15.4.0", - "author": [ - "gaearon" - ], - "excerpt": "

Today we are releasing React 15.4.0.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2016/09/28/our-first-50000-stars.md", - "date": "2016-09-28", - "title": "Our First 50,000 Stars", - "author": [ - "vjeux" - ], - "excerpt": "

Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.

\n", - "readingTime": "10 min read" - }, - { - "path": "/blog/2016/08/05/relay-state-of-the-state.md", - "date": "2016-08-05", - "title": "Relay: State of the State", - "author": [ - "josephsavona" - ], - "excerpt": "

This month marks a year since we released Relay and we’d like to share an update on the project and what’s next.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2016/07/22/create-apps-with-no-configuration.md", - "date": "2016-07-22", - "title": "Create Apps with No Configuration", - "author": [ - "gaearon" - ], - "excerpt": "

Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2016/07/13/mixins-considered-harmful.md", - "date": "2016-07-13", - "title": "Mixins Considered Harmful", - "author": [ - "gaearon" - ], - "excerpt": "

“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2016/07/11/introducing-reacts-error-code-system.md", - "date": "2016-07-11", - "title": "Introducing React's Error Code System", - "author": [ - "keyanzhang" - ], - "excerpt": "

Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2016/04/08/react-v15.0.1.md", - "date": "2016-04-08", - "title": "React v15.0.1", - "author": [ - "zpao" - ], - "excerpt": "

Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we’ve been working since then to make sure we get fixes into your hands as quickly as possible.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2016/04/07/react-v15.md", - "date": "2016-04-07", - "title": "React v15.0", - "author": [ - "gaearon" - ], - "excerpt": "

We would like to thank the React community for reporting issues and regressions in the release candidates on our issue tracker. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.

\n", - "readingTime": "15 min read" - }, - { - "path": "/blog/2016/03/29/react-v0.14.8.md", - "date": "2016-03-29", - "title": "React v0.14.8", - "author": [ - "gaearon" - ], - "excerpt": "

We have already released two release candidates for React 15, and the final version is coming soon.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2016/03/16/react-v15-rc2.md", - "date": "2016-03-16", - "title": "React v15.0 Release Candidate 2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2016/03/07/react-v15-rc1.md", - "date": "2016-03-07", - "title": "React v15.0 Release Candidate", - "author": [ - "zpao" - ], - "excerpt": "

Sorry for the small delay in releasing this. As we said, we’ve been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood ████████████████████████████████████. WOW!

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2016/02/19/new-versioning-scheme.md", - "date": "2016-02-19", - "title": "New Versioning Scheme", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Today we’re announcing that we’re switching to major revisions for React. The current version is 0.14.7. The next release will be: 15.0.0

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2016/01/12/discontinuing-ie8-support.md", - "date": "2016-01-12", - "title": "Discontinuing IE 8 Support in React DOM", - "author": [ - "sophiebits" - ], - "excerpt": "

Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn’t have to worry about most browser bugs.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md", - "date": "2016-01-08", - "title": "(A => B) !=> (B => A)", - "author": [ - "jimfb" - ], - "excerpt": "

The documentation for componentWillReceiveProps states that componentWillReceiveProps will be invoked when the props change as the result of a rerender. Some people assume this means “if componentWillReceiveProps is called, then the props must have changed”, but that conclusion is logically incorrect.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/12/29/react-v0.14.4.md", - "date": "2015-12-29", - "title": "React v0.14.4", - "author": [ - "sophiebits" - ], - "excerpt": "

Happy December! We have a minor point release today. It has just a few small bug fixes.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2015/12/18/react-components-elements-and-instances.md", - "date": "2015-12-18", - "title": "React Components, Elements, and Instances", - "author": [ - "gaearon" - ], - "excerpt": "

The difference between components, their instances, and elements confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/12/16/ismounted-antipattern.md", - "date": "2015-12-16", - "title": "isMounted is an Antipattern", - "author": [ - "jimfb" - ], - "excerpt": "

As we move closer to officially deprecating isMounted, it’s worth understanding why the function is an antipattern, and how to write code without the isMounted function.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md", - "date": "2015-12-04", - "title": "React.js Conf 2016 Diversity Scholarship", - "author": [ - "zpao" - ], - "excerpt": "

I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it’s important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/11/18/react-v0.14.3.md", - "date": "2015-11-18", - "title": "React v0.14.3", - "author": [ - "zpao" - ], - "excerpt": "

It’s time for another installment of React patch releases! We didn’t break anything in v0.14.2 but we do have a couple of other bugs we’re fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it’s still valuable to support. So we’re now building react-dom-server.js, which will be shipped to Bower and in the dist/ directory of the react-dom package on npm. This file works the same way as react-dom.js and therefore requires that the primary React build has already been included on the page.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/11/02/react-v0.14.2.md", - "date": "2015-11-02", - "title": "React v0.14.2", - "author": [ - "zpao" - ], - "excerpt": "

We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the react-dom package, we moved react from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using react as a peer dependency.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/10/28/react-v0.14.1.md", - "date": "2015-10-28", - "title": "React v0.14.1", - "author": [ - "zpao" - ], - "excerpt": "

After a couple weeks of having more people use v0.14, we’re ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/10/19/reactiflux-is-moving-to-discord.md", - "date": "2015-10-19", - "title": "Reactiflux is moving to Discord", - "author": [ - "benigeri" - ], - "excerpt": "

TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: http://join.reactiflux.com

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/10/07/react-v0.14.md", - "date": "2015-10-07", - "title": "React v0.14", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2015/10/01/react-render-and-top-level-api.md", - "date": "2015-10-01", - "title": "ReactDOM.render and the Top Level React API", - "author": [ - "jimfb", - "sebmarkbage" - ], - "excerpt": "

When you’re in React’s world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/09/14/community-roundup-27.md", - "date": "2015-09-14", - "title": "Community Round-up #27 – Relay Edition", - "author": [ - "steveluscher" - ], - "excerpt": "

In the weeks following the open-source release of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let’s take a look at some of the things we’ve achieved, together!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/09/10/react-v0.14-rc1.md", - "date": "2015-09-10", - "title": "React v0.14 Release Candidate", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re happy to announce our first release candidate for React 0.14! We gave you a sneak peek in July at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/09/02/new-react-developer-tools.md", - "date": "2015-09-02", - "title": "New React Developer Tools", - "author": [ - "sophiebits" - ], - "excerpt": "

A month ago, we posted a beta of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/08/13/reacteurope-roundup.md", - "date": "2015-08-13", - "title": "ReactEurope Round-up", - "author": [ - "matthewjohnston4" - ], - "excerpt": "

Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn’t have been possible without the help and support of the React community.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/08/11/relay-technical-preview.md", - "date": "2015-08-11", - "title": "Relay Technical Preview", - "author": [ - "josephsavona" - ], - "excerpt": "

Relay

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/08/03/new-react-devtools-beta.md", - "date": "2015-08-03", - "title": "New React Devtools Beta", - "author": [ - "jaredly" - ], - "excerpt": "

We’ve made an entirely new version of the devtools, and we want you to try it

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/07/03/react-v0.14-beta-1.md", - "date": "2015-07-03", - "title": "React v0.14 Beta 1", - "author": [ - "sophiebits" - ], - "excerpt": "

This week, many people in the React community are at ReactEurope in the beautiful (and very warm) city of Paris, the second React conference that’s been held to date. At our last conference, we released the first beta of React 0.13, and we figured we’d do the same today with our first beta of React 0.14, giving you something to play with if you’re not at the conference or you’re looking for something to do on the way home.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/06/12/deprecating-jstransform-and-react-tools.md", - "date": "2015-06-12", - "title": "Deprecating JSTransform and react-tools", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re announcing the deprecation of react-tools and JSTransform.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/05/22/react-native-release-process.md", - "date": "2015-05-22", - "title": "React Native Release Process", - "author": [ - "vjeux" - ], - "excerpt": "

The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to move fast with stable infra, we are introducing a real release process with a two-week release schedule.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/05/08/react-v0.13.3.md", - "date": "2015-05-08", - "title": "React v0.13.3", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: context. We also improved developer ergonomics just a little bit, making some warnings better.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2015/05/01/graphql-introduction.md", - "date": "2015-05-01", - "title": "GraphQL Introduction", - "author": [ - "schrockn" - ], - "excerpt": "

At the React.js conference in late January 2015, we revealed our next major technology in the React family: Relay.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/04/18/react-v0.13.2.md", - "date": "2015-04-18", - "title": "React v0.13.2", - "author": [ - "zpao" - ], - "excerpt": "

Yesterday the React Native team shipped v0.4. Those of us working on the web team just a few feet away couldn’t just be shown up like that so we’re shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/04/17/react-native-v0.4.md", - "date": "2015-04-17", - "title": "React Native v0.4", - "author": [ - "vjeux" - ], - "excerpt": "

It’s been three weeks since we open sourced React Native and there’s been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus 35 plugins and 1 app in the app store! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/03/30/community-roundup-26.md", - "date": "2015-03-30", - "title": "Community Round-up #26", - "author": [ - "vjeux" - ], - "excerpt": "

We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/03/26/introducing-react-native.md", - "date": "2015-03-26", - "title": "Introducing React Native", - "author": [ - "sophiebits" - ], - "excerpt": "

In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We’re happy to announce that we’re open-sourcing React Native and you can start building your apps with it today.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md", - "date": "2015-03-19", - "title": "Building The Facebook News Feed With Relay", - "author": [ - "josephsavona" - ], - "excerpt": "

At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we’ll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven’t already we recommend reading our introductory blog post or watching the conference talk.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2015/03/16/react-v0.13.1.md", - "date": "2015-03-16", - "title": "React v0.13.1", - "author": [ - "zpao" - ], - "excerpt": "

It’s been less than a week since we shipped v0.13.0 but it’s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/03/10/react-v0.13.md", - "date": "2015-03-10", - "title": "React v0.13", - "author": [ - "sophiebits" - ], - "excerpt": "

Today, we’re happy to release React v0.13!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/03/04/community-roundup-25.md", - "date": "2015-03-04", - "title": "Community Round-up #25", - "author": [ - "matthewjohnston4" - ], - "excerpt": "

React 101

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/03/03/react-v0.13-rc2.md", - "date": "2015-03-03", - "title": "React v0.13 RC2", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Thanks to everybody who has already been testing the release candidate. We’ve received some good feedback and as a result we’re going to do a second release candidate. The changes are minimal. We haven’t changed the behavior of any APIs we exposed in the previous release candidate. Here’s a summary of the changes:

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/02/24/streamlining-react-elements.md", - "date": "2015-02-24", - "title": "Streamlining React Elements", - "author": [ - "sebmarkbage" - ], - "excerpt": "

React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we’re adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.

\n", - "readingTime": "10 min read" - }, - { - "path": "/blog/2015/02/24/react-v0.13-rc1.md", - "date": "2015-02-24", - "title": "React v0.13 RC", - "author": [ - "zpao" - ], - "excerpt": "

Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/02/20/introducing-relay-and-graphql.md", - "date": "2015-02-20", - "title": "Introducing Relay and GraphQL", - "author": [ - "wincent" - ], - "excerpt": "

Data fetching for React applications

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2015/02/18/react-conf-roundup-2015.md", - "date": "2015-02-18", - "title": "React.js Conf Round-up 2015", - "author": [ - "steveluscher" - ], - "excerpt": "

It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we’ve been using internally at Facebook for some time: GraphQL, Relay, and React Native.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2015/01/27/react-v0.13.0-beta-1.md", - "date": "2015-01-27", - "title": "React v0.13.0 Beta 1", - "author": [ - "sebmarkbage" - ], - "excerpt": "

React 0.13 has a lot of nice features but there is one particular feature that I’m really excited about. I couldn’t wait for React.js Conf to start tomorrow morning.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/12/19/react-js-conf-diversity-scholarship.md", - "date": "2014-12-19", - "title": "React.js Conf Diversity Scholarship", - "author": [ - "zpao" - ], - "excerpt": "

Today I’m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/12/18/react-v0.12.2.md", - "date": "2014-12-18", - "title": "React v0.12.2", - "author": [ - "zpao" - ], - "excerpt": "

We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/11/25/community-roundup-24.md", - "date": "2014-11-25", - "title": "Community Round-up #24", - "author": [ - "steveluscher" - ], - "excerpt": "

Keep it Simple

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/11/24/react-js-conf-updates.md", - "date": "2014-11-24", - "title": "React.js Conf Updates", - "author": [ - "vjeux" - ], - "excerpt": "

Yesterday was the React.js Conf call for presenters submission deadline. We were

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/10/28/react-v0.12.md", - "date": "2014-10-28", - "title": "React v0.12", - "author": [ - "zpao" - ], - "excerpt": "

We’re happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/27/react-js-conf.md", - "date": "2014-10-27", - "title": "React.js Conf", - "author": [ - "vjeux" - ], - "excerpt": "

Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been “some day”. In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/10/17/community-roundup-23.md", - "date": "2014-10-17", - "title": "Community Round-up #23", - "author": [ - "LoukaN" - ], - "excerpt": "

This round-up is a special edition on Flux. If you expect to see diagrams showing arrows that all point in the same direction, you won’t be disappointed!

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/16/react-v0.12-rc1.md", - "date": "2014-10-16", - "title": "React v0.12 RC", - "author": [ - "sebmarkbage" - ], - "excerpt": "

We are finally ready to share the work we’ve been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we’re shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we’ve highlighted the interesting and breaking changes below.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/14/introducing-react-elements.md", - "date": "2014-10-14", - "title": "Introducing React Elements", - "author": [ - "sebmarkbage" - ], - "excerpt": "

The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the ReactElement type really FAST, jest unit testing easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/09/24/testing-flux-applications.md", - "date": "2014-09-24", - "title": "Testing Flux Applications", - "author": [ - "fisherwebdev" - ], - "excerpt": "

A more up-to-date version of this post is available as part of the Flux documentation.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2014/09/16/react-v0.11.2.md", - "date": "2014-09-16", - "title": "React v0.11.2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing React v0.11.2 to add a few small features.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/09/12/community-round-up-22.md", - "date": "2014-09-12", - "title": "Community Round-up #22", - "author": [ - "LoukaN" - ], - "excerpt": "

This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/09/03/introducing-the-jsx-specification.md", - "date": "2014-09-03", - "title": "Introducing the JSX Specification", - "author": [ - "sebmarkbage" - ], - "excerpt": "

At Facebook we’ve been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We’ve also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/08/03/community-roundup-21.md", - "date": "2014-08-03", - "title": "Community Round-up #21", - "author": [ - "LoukaN" - ], - "excerpt": "

React Router

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/07/30/flux-actions-and-the-dispatcher.md", - "date": "2014-07-30", - "title": "Flux: Actions and the Dispatcher", - "author": [ - "fisherwebdev" - ], - "excerpt": "

Flux is the application architecture Facebook uses to build JavaScript applications. It’s based on a unidirectional data flow. We’ve built everything from small widgets to huge applications with Flux, and it’s handled everything we’ve thrown at it. Because we’ve found it to be a great way to structure our code, we’re excited to share it with the open source community. Jing Chen presented Flux at the F8 conference, and since that time we’ve seen a lot of interest in it. We’ve also published an overview of Flux and a TodoMVC example, with an accompanying tutorial.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/07/28/community-roundup-20.md", - "date": "2014-07-28", - "title": "Community Round-up #20", - "author": [ - "LoukaN" - ], - "excerpt": "

It’s an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/07/25/react-v0.11.1.md", - "date": "2014-07-25", - "title": "React v0.11.1", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they’ve begun upgrading.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/07/17/react-v0.11.md", - "date": "2014-07-17", - "title": "React v0.11", - "author": [ - "zpao" - ], - "excerpt": "

Update: We missed a few important changes in our initial post and changelog. We’ve updated this post with details about Descriptors and Prop Type Validation.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/07/13/react-v0.11-rc1.md", - "date": "2014-07-13", - "title": "React v0.11 RC", - "author": [ - "zpao" - ], - "excerpt": "

It’s that time again… we’re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/06/27/community-roundup-19.md", - "date": "2014-06-27", - "title": "Community Round-up #19", - "author": [ - "chenglou" - ], - "excerpt": "

React Meetups!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/05/29/one-year-of-open-source-react.md", - "date": "2014-05-29", - "title": "One Year of Open-Source React", - "author": [ - "chenglou" - ], - "excerpt": "

Today marks the one-year open-source anniversary of React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/05/06/flux.md", - "date": "2014-05-06", - "title": "Flux: An Application Architecture for React", - "author": [ - "fisherwebdev", - "jingc" - ], - "excerpt": "

We recently spoke at one of f8’s breakout session about Flux, a data flow architecture that works well with React. Check out the video here:

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/04/04/reactnet.md", - "date": "2014-04-04", - "title": "Use React and JSX in ASP.NET MVC", - "author": [ - "Daniel15" - ], - "excerpt": "

Today we’re happy to announce the initial release of

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/03/28/the-road-to-1.0.md", - "date": "2014-03-28", - "title": "The Road to 1.0", - "author": [ - "zpao" - ], - "excerpt": "

When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We’ve learned a lot over the past 9 months and we’ve thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I’m writing a bit more about them to give our users a better insight into our plans.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/21/react-v0.10.md", - "date": "2014-03-21", - "title": "React v0.10", - "author": [ - "zpao" - ], - "excerpt": "

Hot on the heels of the release candidate earlier this week, we’re ready to call v0.10 done. The only major issue we discovered had to do with the react-tools package, which has been updated. We’ve copied over the changelog from the RC with some small clarifying changes.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/19/react-v0.10-rc1.md", - "date": "2014-03-19", - "title": "React v0.10 RC", - "author": [ - "zpao" - ], - "excerpt": "

v0.9 has only been out for a month, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don’t have a long list of changes to talk about.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/14/community-roundup-18.md", - "date": "2014-03-14", - "title": "Community Round-up #18", - "author": [ - "jgebhardt" - ], - "excerpt": "

In this Round-up, we are taking a few closer looks at React’s interplay with different frameworks and architectures.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/02/24/community-roundup-17.md", - "date": "2014-02-24", - "title": "Community Round-up #17", - "author": [ - "jgebhardt" - ], - "excerpt": "

It’s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/02/20/react-v0.9.md", - "date": "2014-02-20", - "title": "React v0.9", - "author": [ - "sophiebits" - ], - "excerpt": "

I’m excited to announce that today we’re releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/02/16/react-v0.9-rc1.md", - "date": "2014-02-16", - "title": "React v0.9 RC", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re almost ready to release React v0.9! We’re posting a release candidate so that you can test your apps on it; we’d much prefer to find show-stopping bugs now rather than after we release.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/02/15/community-roundup-16.md", - "date": "2014-02-15", - "title": "Community Round-up #16", - "author": [ - "jgebhardt" - ], - "excerpt": "

There have been many posts recently covering the why and how of React. This week’s community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/02/05/community-roundup-15.md", - "date": "2014-02-05", - "title": "Community Round-up #15", - "author": [ - "jgebhardt" - ], - "excerpt": "

Interest in React seems to have surged ever since David Nolen (@swannodette)‘s introduction of Om in his post “The Future of JavaScript MVC Frameworks”.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/01/06/community-roundup-14.md", - "date": "2014-01-06", - "title": "Community Round-up #14", - "author": [ - "vjeux" - ], - "excerpt": "

The theme of this first round-up of 2014 is integration. I’ve tried to assemble a list of articles and projects that use React in various environments.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/01/02/react-chrome-developer-tools.md", - "date": "2014-01-02", - "title": "React Chrome Developer Tools", - "author": [ - "sebmarkbage" - ], - "excerpt": "

With the new year, we thought you’d enjoy some new tools for debugging React code. Today we’re releasing the React Developer Tools, an extension to the Chrome Developer Tools. Download them from the Chrome Web Store.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/12/30/community-roundup-13.md", - "date": "2013-12-30", - "title": "Community Round-up #13", - "author": [ - "vjeux" - ], - "excerpt": "

Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/12/23/community-roundup-12.md", - "date": "2013-12-23", - "title": "Community Round-up #12", - "author": [ - "vjeux" - ], - "excerpt": "

React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/12/19/react-v0.8.0.md", - "date": "2013-12-19", - "title": "React v0.8", - "author": [ - "zpao" - ], - "excerpt": "

I’ll start by answering the obvious question:

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/12/18/react-v0.5.2-v0.4.2.md", - "date": "2013-12-18", - "title": "React v0.5.2, v0.4.2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing an update to address a potential XSS vulnerability that can arise when using user data as a key. Typically “safe” data is used for a key, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/11/18/community-roundup-11.md", - "date": "2013-11-18", - "title": "Community Round-up #11", - "author": [ - "vjeux" - ], - "excerpt": "

This round-up is the proof that React has taken off from its Facebook’s root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/11/06/community-roundup-10.md", - "date": "2013-11-06", - "title": "Community Round-up #10", - "author": [ - "vjeux" - ], - "excerpt": "

This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2013/10/29/react-v0-5-1.md", - "date": "2013-10-29", - "title": "React v0.5.1", - "author": [ - "zpao" - ], - "excerpt": "

This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/10/16/react-v0.5.0.md", - "date": "2013-10-16", - "title": "React v0.5", - "author": [ - "zpao" - ], - "excerpt": "

This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we’ve worked hard to improve performance and memory usage. We’ve also worked hard to make sure we are being consistent in our usage of DOM properties.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/10/03/community-roundup-9.md", - "date": "2013-10-03", - "title": "Community Round-up #9", - "author": [ - "vjeux" - ], - "excerpt": "

We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we’ll probably organize more in the future.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/09/24/community-roundup-8.md", - "date": "2013-09-24", - "title": "Community Round-up #8", - "author": [ - "vjeux" - ], - "excerpt": "

A lot has happened in the month since our last update. Here are some of the more interesting things we’ve found. But first, we have a couple updates before we share links.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2013/08/26/community-roundup-7.md", - "date": "2013-08-26", - "title": "Community Round-up #7", - "author": [ - "vjeux" - ], - "excerpt": "

It’s been three months since we open sourced React and it is going well. Some stats so far:

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/08/19/use-react-and-jsx-in-python-applications.md", - "date": "2013-08-19", - "title": "Use React and JSX in Python Applications", - "author": [ - "kmeht" - ], - "excerpt": "

Today we’re happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It’s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/08/05/community-roundup-6.md", - "date": "2013-08-05", - "title": "Community Round-up #6", - "author": [ - "vjeux" - ], - "excerpt": "

This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It’s great to see the adoption of React growing.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md", - "date": "2013-07-30", - "title": "Use React and JSX in Ruby on Rails", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/07/26/react-v0-4-1.md", - "date": "2013-07-26", - "title": "React v0.4.1", - "author": [ - "zpao" - ], - "excerpt": "

React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/07/23/community-roundup-5.md", - "date": "2013-07-23", - "title": "Community Round-up #5", - "author": [ - "vjeux" - ], - "excerpt": "

We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/07/17/react-v0-4-0.md", - "date": "2013-07-17", - "title": "React v0.4.0", - "author": [ - "zpao" - ], - "excerpt": "

Over the past 2 months we’ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we’re proud to announce the availability of React v0.4!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md", - "date": "2013-07-11", - "title": "New in React v0.4: Prop Validation and Default Values", - "author": [ - "zpao" - ], - "excerpt": "

Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/07/03/community-roundup-4.md", - "date": "2013-07-03", - "title": "Community Round-up #4", - "author": [ - "vjeux" - ], - "excerpt": "

React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/02/react-v0-4-autobind-by-default.md", - "date": "2013-07-02", - "title": "New in React v0.4: Autobind by Default", - "author": [ - "zpao" - ], - "excerpt": "

React v0.4 is very close to completion. As we finish it off, we’d like to share with you some of the major changes we’ve made since v0.3. This is the first of several posts we’ll be making over the next week.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/06/27/community-roundup-3.md", - "date": "2013-06-27", - "title": "Community Round-up #3", - "author": [ - "vjeux" - ], - "excerpt": "

The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/06/21/react-v0-3-3.md", - "date": "2013-06-21", - "title": "React v0.3.3", - "author": [ - "zpao" - ], - "excerpt": "

We have a ton of great stuff coming in v0.4, but in the meantime we’re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/06/19/community-roundup-2.md", - "date": "2013-06-19", - "title": "Community Round-up #2", - "author": [ - "vjeux" - ], - "excerpt": "

Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/06/12/community-roundup.md", - "date": "2013-06-12", - "title": "Community Round-up #1", - "author": [ - "vjeux" - ], - "excerpt": "

React was open sourced two weeks ago and it’s time for a little round-up of what has been going on.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/06/05/why-react.md", - "date": "2013-06-05", - "title": "Why did we build React?", - "author": [ - "petehunt" - ], - "excerpt": "

There are a lot of JavaScript MVC frameworks out there. Why did we build React

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/06/02/jsfiddle-integration.md", - "date": "2013-06-02", - "title": "JSFiddle Integration", - "author": [ - "vjeux" - ], - "excerpt": "

JSFiddle just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this base React JSFiddle, fork it and share it! A fiddle without JSX is also available.

\n", - "readingTime": "1 min read" - } - ] -} \ No newline at end of file diff --git a/beta/src/blogIndexRecent.json b/beta/src/blogIndexRecent.json deleted file mode 100644 index 8bf964b5c..000000000 --- a/beta/src/blogIndexRecent.json +++ /dev/null @@ -1,207 +0,0 @@ -{ - "title": "Recent Posts", - "heading": true, - "path": "/blog", - "routes": [ - { - "path": "/blog/2020/08/10/react-v17-rc.md", - "date": "2020-08-10", - "title": "React v17.0 Release Candidate: No New Features", - "author": ["gaearon", "rachelnabors"], - "excerpt": "

Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2020/02/26/react-v16.13.0.md", - "date": "2020-02-26", - "title": "React v16.13.0", - "author": ["threepointone"], - "excerpt": "

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md", - "date": "2019-11-06", - "title": "Building Great User Experiences with Concurrent Mode and Suspense", - "author": ["josephsavona"], - "excerpt": "

At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com.

\n", - "readingTime": "17 min read" - }, - { - "path": "/blog/2019/10/22/react-release-channels.md", - "date": "2019-10-22", - "title": "Preparing for the Future with React Prereleases", - "author": ["acdlite"], - "excerpt": "

To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/08/15/new-react-devtools.md", - "date": "2019-08-15", - "title": "Introducing the New React DevTools", - "author": ["bvaughn"], - "excerpt": "

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2019/08/08/react-v16.9.0.md", - "date": "2019-08-08", - "title": "React v16.9.0 and the Roadmap Update", - "author": ["gaearon", "bvaughn"], - "excerpt": "

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2019/02/23/is-react-translated-yet.md", - "date": "2019-02-23", - "title": "Is React Translated Yet? ¡Sí! Sim! はい！", - "author": ["tesseralis"], - "excerpt": "

We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into over 30 languages! You can find them on the new Languages page.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/02/06/react-v16.8.0.md", - "date": "2019-02-06", - "title": "React v16.8: The One With Hooks", - "author": ["gaearon"], - "excerpt": "

With React 16.8, React Hooks are available in a stable release!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2018/12/19/react-v-16-7.md", - "date": "2018-12-19", - "title": "React v16.7: No, This Is Not the One With Hooks", - "author": ["acdlite"], - "excerpt": "

Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2018/11/27/react-16-roadmap.md", - "date": "2018-11-27", - "title": "React 16.x Roadmap", - "author": ["gaearon"], - "excerpt": "

You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/11/13/react-conf-recap.md", - "date": "2018-11-13", - "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering", - "author": ["tomocchino"], - "excerpt": "

This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2018/10/23/react-v-16-6.md", - "date": "2018-10-23", - "title": "React v16.6.0: lazy, memo and contextType", - "author": ["sebmarkbage"], - "excerpt": "

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/10/01/create-react-app-v2.md", - "date": "2018-10-01", - "title": "Create React App 2.0: Babel 7, Sass, and More", - "author": ["timer", "gaearon"], - "excerpt": "

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/09/10/introducing-the-react-profiler.md", - "date": "2018-09-10", - "title": "Introducing the React Profiler", - "author": ["bvaughn"], - "excerpt": "

React 16.5 adds support for a new DevTools profiler plugin.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2018/08/01/react-v-16-4-2.md", - "date": "2018-08-01", - "title": "React v16.4.2: Server-side vulnerability fix", - "author": ["gaearon"], - "excerpt": "

We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md", - "date": "2018-06-07", - "title": "You Probably Don't Need Derived State", - "author": ["bvaughn"], - "excerpt": "

React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/05/23/react-v-16-4.md", - "date": "2018-05-23", - "title": "React v16.4.0: Pointer Events", - "author": ["acdlite"], - "excerpt": "

The latest minor release adds support for an oft-requested feature: pointer events!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/03/29/react-v-16-3.md", - "date": "2018-03-29", - "title": "React v16.3.0: New lifecycles and context API", - "author": ["bvaughn"], - "excerpt": "

A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/03/27/update-on-async-rendering.md", - "date": "2018-03-27", - "title": "Update on Async Rendering", - "author": ["bvaughn"], - "excerpt": "

For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, Dan unveiled some of the exciting new possibilities async rendering unlocks. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md", - "date": "2018-03-01", - "title": "Sneak Peek: Beyond React 16", - "author": ["sophiebits"], - "excerpt": "

Dan Abramov from our team just spoke at JSConf Iceland 2018 with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md", - "date": "2017-12-15", - "title": "Behind the Scenes: Improving the Repository Infrastructure", - "author": ["gaearon", "bvaughn"], - "excerpt": "

As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.

\n", - "readingTime": "30 min read" - }, - { - "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md", - "date": "2017-12-07", - "title": "Introducing the React RFC Process", - "author": ["acdlite"], - "excerpt": "

We’re adopting an RFC (“request for comments”) process for contributing ideas to React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md", - "date": "2017-11-28", - "title": "React v16.2.0: Improved Support for Fragments", - "author": ["clemmy"], - "excerpt": "

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2017/09/26/react-v16.0.md", - "date": "2017-09-26", - "title": "React v16.0", - "author": ["acdlite"], - "excerpt": "

We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2017/09/25/react-v15.6.2.md", - "date": "2017-09-25", - "title": "React v15.6.2", - "author": ["nhunzaker"], - "excerpt": "

Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.

\n", - "readingTime": "3 min read" - } - ] -} diff --git a/beta/src/components/Breadcrumbs.tsx b/beta/src/components/Breadcrumbs.tsx index 9bd630b12..96b50cd30 100644 --- a/beta/src/components/Breadcrumbs.tsx +++ b/beta/src/components/Breadcrumbs.tsx @@ -3,12 +3,10 @@ */ import {Fragment} from 'react'; -import {useRouteMeta} from 'components/Layout/useRouteMeta'; import Link from 'next/link'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; -function Breadcrumbs() { - const {breadcrumbs} = useRouteMeta(); - if (!breadcrumbs) return null; +function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) { return (
{breadcrumbs.map( diff --git a/beta/src/components/DocsFooter.tsx b/beta/src/components/DocsFooter.tsx index 6a8597705..3932d0910 100644 --- a/beta/src/components/DocsFooter.tsx +++ b/beta/src/components/DocsFooter.tsx @@ -5,9 +5,8 @@ import NextLink from 'next/link'; import {memo} from 'react'; import cn from 'classnames'; -import {removeFromLast} from 'utils/removeFromLast'; import {IconNavArrow} from './Icon/IconNavArrow'; -import {RouteMeta} from './Layout/useRouteMeta'; +import type {RouteMeta} from './Layout/getRouteMeta'; export type DocsPageFooterProps = Pick< RouteMeta, @@ -33,7 +32,7 @@ export const DocsPageFooter = memo( ) : (
@@ -43,7 +42,7 @@ export const DocsPageFooter = memo( ) : (
diff --git a/beta/src/components/Layout/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx index 0832be686..6bb8a4aac 100644 --- a/beta/src/components/Layout/Feedback.tsx +++ b/beta/src/components/Layout/Feedback.tsx @@ -8,8 +8,9 @@ import {ga} from '../../utils/analytics'; export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { const {asPath} = useRouter(); + const cleanedPath = asPath.split(/[\?\#]/)[0]; // Reset on route changes. - return ; + return ; } const thumbsUpIcon = ( diff --git a/beta/src/components/Layout/Footer.tsx b/beta/src/components/Layout/Footer.tsx index dc2ac0071..e6dd303b9 100644 --- a/beta/src/components/Layout/Footer.tsx +++ b/beta/src/components/Layout/Footer.tsx @@ -127,13 +127,13 @@ export function Footer() { Code of Conduct - + Acknowledgements - + Docs Contributors - Meet the Team + Meet the Team Blog {/* Community Resources */}
diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx deleted file mode 100644 index c44298c05..000000000 --- a/beta/src/components/Layout/MarkdownPage.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {useRouter} from 'next/router'; -import {DocsPageFooter} from 'components/DocsFooter'; -import {Seo} from 'components/Seo'; -import PageHeading from 'components/PageHeading'; -import {useRouteMeta} from './useRouteMeta'; -import {useActiveSection} from '../../hooks/useActiveSection'; -import {TocContext} from '../MDX/TocContext'; - -import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock'); - -export interface MarkdownProps { - meta: Frontmatter & {description?: string}; - children?: React.ReactNode; - toc: Array<{ - url: string; - text: React.ReactNode; - depth: number; - }>; -} - -export function MarkdownPage< - T extends {title: string; status?: string} = {title: string; status?: string} ->({children, meta, toc}: MarkdownProps) { - const {route, nextRoute, prevRoute} = useRouteMeta(); - const section = useActiveSection(); - const title = meta.title || route?.title || ''; - const description = meta.description || route?.description || ''; - const isHomePage = section === 'home'; - return ( - <> -
- - {!isHomePage && ( - - )} -
-
- {children} -
- -
-
- - ); -} diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index 6422ecdb0..4285ece7f 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -12,13 +12,11 @@ import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'; import {IconClose} from 'components/Icon/IconClose'; import {IconHamburger} from 'components/Icon/IconHamburger'; import {Search} from 'components/Search'; -import {useActiveSection} from 'hooks/useActiveSection'; import {Logo} from '../../Logo'; import {Feedback} from '../Feedback'; import NavLink from './NavLink'; -import {SidebarContext} from 'components/Layout/useRouteMeta'; import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree'; -import type {RouteItem} from '../useRouteMeta'; +import type {RouteItem} from '../getRouteMeta'; import sidebarLearn from '../../../sidebarLearn.json'; import sidebarReference from '../../../sidebarReference.json'; @@ -92,17 +90,22 @@ const lightIcon = ( ); -export default function Nav() { +export default function Nav({ + routeTree, + breadcrumbs, + section, +}: { + routeTree: RouteItem; + breadcrumbs: RouteItem[]; + section: 'learn' | 'reference' | 'home'; +}) { const [isOpen, setIsOpen] = useState(false); const [showFeedback, setShowFeedback] = useState(false); const scrollParentRef = useRef(null); const feedbackAutohideRef = useRef(null); - const section = useActiveSection(); const {asPath} = useRouter(); const feedbackPopupRef = useRef(null); - // In desktop mode, use the route tree for current route. - let routeTree: RouteItem = useContext(SidebarContext); // In mobile mode, let the user switch tabs there and back without navigating. // Seed the tab state from the router, but keep it independent. const [tab, setTab] = useState(section); @@ -344,6 +347,7 @@ export default function Nav() { // This avoids unnecessary animations and visual flicker. key={isOpen ? 'mobile-overlay' : 'desktop-or-hidden'} routeTree={routeTree} + breadcrumbs={breadcrumbs} isForceExpanded={isOpen} /> diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx index cafba9d36..ecb6cc903 100644 --- a/beta/src/components/Layout/Page.tsx +++ b/beta/src/components/Layout/Page.tsx @@ -6,52 +6,86 @@ import {Suspense} from 'react'; import * as React from 'react'; import {useRouter} from 'next/router'; import {Nav} from './Nav'; -import {RouteItem, SidebarContext} from './useRouteMeta'; -import {useActiveSection} from 'hooks/useActiveSection'; import {Footer} from './Footer'; import {Toc} from './Toc'; import SocialBanner from '../SocialBanner'; +import {DocsPageFooter} from 'components/DocsFooter'; +import {Seo} from 'components/Seo'; +import PageHeading from 'components/PageHeading'; +import {getRouteMeta} from './getRouteMeta'; +import {TocContext} from '../MDX/TocContext'; import sidebarLearn from '../../sidebarLearn.json'; import sidebarReference from '../../sidebarReference.json'; import type {TocItem} from 'components/MDX/TocContext'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; + +import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock'); interface PageProps { children: React.ReactNode; toc: Array; + routeTree: RouteItem; + meta: {title?: string; description?: string}; + section: 'learn' | 'reference' | 'home'; } -export function Page({children, toc}: PageProps) { +export function Page({children, toc, routeTree, meta, section}: PageProps) { const {asPath} = useRouter(); - const section = useActiveSection(); - let routeTree = sidebarLearn as RouteItem; - switch (section) { - case 'reference': - routeTree = sidebarReference as RouteItem; - break; - } + const cleanedPath = asPath.split(/[\?\#]/)[0]; + const {route, nextRoute, prevRoute, breadcrumbs} = getRouteMeta( + cleanedPath, + routeTree + ); + const title = meta.title || route?.title || ''; + const description = meta.description || route?.description || ''; + const isHomePage = cleanedPath === '/'; return ( <> - -
-
-
- {/* No fallback UI so need to be careful not to suspend directly inside. */} - -
-
-
- {children} -
-
-
- -
- {toc.length > 0 && } -
+
+
+
+ {/* No fallback UI so need to be careful not to suspend directly inside. */} + +
+
+
+
+ + {!isHomePage && ( + + )} +
+
+ + {children} + +
+ +
+
+
+
+
+ +
+ {toc.length > 0 && }
- +
); } diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 85fe5713e..5a3b519c2 100644 --- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -5,16 +5,15 @@ import {useRef, useLayoutEffect, Fragment} from 'react'; import cn from 'classnames'; -import {RouteItem} from 'components/Layout/useRouteMeta'; import {useRouter} from 'next/router'; -import {removeFromLast} from 'utils/removeFromLast'; -import {useRouteMeta} from '../useRouteMeta'; import {SidebarLink} from './SidebarLink'; import useCollapse from 'react-collapsed'; import usePendingRoute from 'hooks/usePendingRoute'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; interface SidebarRouteTreeProps { isForceExpanded: boolean; + breadcrumbs: RouteItem[]; routeTree: RouteItem; level?: number; } @@ -72,31 +71,13 @@ function CollapseWrapper({ export function SidebarRouteTree({ isForceExpanded, + breadcrumbs, routeTree, level = 0, }: SidebarRouteTreeProps) { - const {breadcrumbs} = useRouteMeta(routeTree); - const cleanedPath = useRouter().asPath.split(/[\?\#]/)[0]; + const slug = useRouter().asPath.split(/[\?\#]/)[0]; const pendingRoute = usePendingRoute(); - - const slug = cleanedPath; const currentRoutes = routeTree.routes as RouteItem[]; - const expandedPath = currentRoutes.reduce( - (acc: string | undefined, curr: RouteItem) => { - if (acc) return acc; - const breadcrumb = breadcrumbs.find((b) => b.path === curr.path); - if (breadcrumb) { - return curr.path; - } - if (curr.path === cleanedPath) { - return cleanedPath; - } - return undefined; - }, - undefined - ); - - const expanded = expandedPath; return (
    {currentRoutes.map( @@ -104,40 +85,43 @@ export function SidebarRouteTree({ {path, title, routes, wip, heading, hasSectionHeader, sectionHeader}, index ) => { - const pagePath = path && removeFromLast(path, '.'); - const selected = slug === pagePath; - + const selected = slug === path; let listItem = null; - if (!path || !pagePath || heading) { + if (!path || !path || heading) { // if current route item has no path and children treat it as an API sidebar heading listItem = ( ); } else if (routes) { // if route has a path and child routes, treat it as an expandable sidebar item - const isExpanded = isForceExpanded || expanded === path; + const isBreadcrumb = + breadcrumbs.length > 1 && + breadcrumbs[breadcrumbs.length - 1].path === path; + const isExpanded = isForceExpanded || isBreadcrumb || selected; listItem = (
  • @@ -148,8 +132,8 @@ export function SidebarRouteTree({ listItem = (
  • 0 ? breadcrumbs : [routeTree], }; } -export const SidebarContext = createContext({title: 'root'}); - // Performs a depth-first search to find the current route and its previous/next route -function getRouteMeta( +function buildRouteMeta( searchPath: string, currentRoute: RouteItem, - ctx: RouteMeta = {} + ctx: RouteMeta ): RouteMeta { const {routes} = currentRoute; @@ -101,7 +87,7 @@ function getRouteMeta( } for (const route of routes) { - getRouteMeta(searchPath, route, ctx); + buildRouteMeta(searchPath, route, ctx); } return ctx; diff --git a/beta/src/components/MDX/Link.tsx b/beta/src/components/MDX/Link.tsx index e7acbaa62..8986d07a5 100644 --- a/beta/src/components/MDX/Link.tsx +++ b/beta/src/components/MDX/Link.tsx @@ -41,7 +41,7 @@ function Link({ {modifiedChildren} ) : ( - + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} {modifiedChildren} diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index 195f89ed8..194986798 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -133,6 +133,15 @@ function LearnMore({ ); } +function ReadBlogPost({path}: {path: string}) { + return ( + + Read Post + + + ); +} + function Math({children}: {children: any}) { return ( }) { ); } -function LinkWithTodo({href, children, ...props}: JSX.IntrinsicElements['a']) { - if (href?.startsWith('TODO')) { - return children; - } - +function YouTubeIframe(props: any) { return ( - - {children} - +
    + - -## Snake in React {/*snake-in-react*/} - -[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React. - -> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js) -> ->
    diff --git a/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md b/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md deleted file mode 100644 index 59a41733c..000000000 --- a/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 'New in React v0.4: Prop Validation and Default Values' -author: [zpao] ---- - -Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults. - -## Validation {/*validation*/} - -Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast. - -React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own. - -```js -React.createClass({ - propTypes: { - // An optional string prop named "description". - description: React.PropTypes.string, - - // A required enum prop named "category". - category: React.PropTypes.oneOf(['News','Photos']).isRequired, - - // A prop named "dialog" that requires an instance of Dialog. - dialog: React.PropTypes.instanceOf(Dialog).isRequired - }, - ... -}); -``` - -## Default Values {/*default-values*/} - -One common pattern we've seen with our React code is to do something like this: - -```js -React.createClass({ - render: function () { - var value = this.props.value || 'default value'; - return
    {value}
    ; - }, -}); -``` - -Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way: - -```js -React.createClass({ - getDefaultProps: function() { - return { - value: 'default value' - }; - } - ... -}); -``` - -We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it. - ---- - -Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well. diff --git a/beta/src/content/blog/2013/07/17/react-v0-4-0.md b/beta/src/content/blog/2013/07/17/react-v0-4-0.md deleted file mode 100644 index 65a730234..000000000 --- a/beta/src/content/blog/2013/07/17/react-v0-4-0.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 'React v0.4.0' -author: [zpao] ---- - -Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4! - -This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next! - -React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful. - -When you're ready, [go download it](/docs/installation.html)! - -### React {/*react*/} - -- Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily. -- Support for more DOM elements and attributes (e.g., ``) -- Improved server-side rendering APIs. `React.renderComponentToString(, callback)` allows you to use React on the server and generate markup which can be sent down to the browser. -- `prop` improvements: validation and default values. [Read our blog post for details...](/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html) -- Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/docs/multiple-components.html) -- Removed `React.autoBind`. [Read our blog post for details...](/blog/2013/07/02/react-v0-4-autobind-by-default.html) -- Improvements to forms. We've written wrappers around ``, `