diff --git a/conf.d/rewrite.conf b/conf.d/rewrite.conf index e81088109e5..18301cc0b11 100644 --- a/conf.d/rewrite.conf +++ b/conf.d/rewrite.conf @@ -38,7 +38,7 @@ rewrite /help/support /help/contact-us permanent; rewrite /get-started/develop/(.*) /developing/frameworks/\$1 permanent; rewrite /resources /developing/developer-resources permanent; rewrite /tutorial/angular/(.*) /developing/angular-tutorial/\$1 permanent; -rewrite /tutorial/react/(.*) /developing/next-tutorial/\$1 permanent; +rewrite /tutorial/react/(.*) /developing/react-tutorial/\$1 permanent; rewrite /tutorial/vue/(.*) /developing/vue-tutorial/\$1 permanent; # Data-visualization diff --git a/gatsby-node.js b/gatsby-node.js index 9fd2b63495b..d4834afc2c2 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -58,7 +58,7 @@ exports.createPages = ({ actions }) => { }); createRedirect({ fromPath: '/tutorial/react/overview', - toPath: '/developing/next-tutorial/overview', + toPath: '/developing/react-tutorial/overview', isPermanent: true, }); createRedirect({ diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index e0c8653a770..9ea3c9d6fee 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -43,8 +43,8 @@ path: /developing/dev-resources/ - title: Angular tutorial path: /developing/angular-tutorial/overview/ - - title: NextJS tutorial - path: /developing/next-tutorial/overview/ + - title: React tutorial + path: /developing/react-tutorial/overview/ - title: Vue tutorial path: /developing/vue-tutorial/overview/ - title: Contributing diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx index 2900488ce18..248681d729b 100755 --- a/src/pages/all-about-carbon/what-is-carbon.mdx +++ b/src/pages/all-about-carbon/what-is-carbon.mdx @@ -112,7 +112,7 @@ work and contribute patterns back to the system. ### We support adoption **We conduct training classes, run meetups, and offer certifications.** We offer -tutorials in Angular, React using NextJS, and Vue. We run +tutorials in Angular, React using Next.js, and Vue. We run [meetups](/whats-happening/meetups) and design reviews on a regular basis. We're also available to teach at conferences, bootcamp labs, and wherever else we're needed. diff --git a/src/pages/all-about-carbon/who-uses-carbon.mdx b/src/pages/all-about-carbon/who-uses-carbon.mdx index d43ef3a0f23..f8956e80298 100755 --- a/src/pages/all-about-carbon/who-uses-carbon.mdx +++ b/src/pages/all-about-carbon/who-uses-carbon.mdx @@ -133,7 +133,7 @@ Here are some ways developers can begin engaging with Carbon. [design principles](https://www.ibm.com/design/language/). - Check out a tutorial in your framework of choice - ([React using NextJS](/developing/next-tutorial/overview/), + ([React using Next.js](/developing/react-tutorial/overview/), [Angular (community)](/developing/angular-tutorial/overview/) or [Vue (community)](/developing/vue-tutorial/overview/)). diff --git a/src/pages/developing/frameworks/react.mdx b/src/pages/developing/frameworks/react.mdx index fc99e0fec6a..c7ffcf8f038 100755 --- a/src/pages/developing/frameworks/react.mdx +++ b/src/pages/developing/frameworks/react.mdx @@ -80,7 +80,7 @@ Design System. Components require the use of a build pipeline in your project. This could be in the form of a bundler, framework, or other build tool. Some examples include -NextJS, Vite, Parcel, and Webpack. A comprehensive list is available in the +Next.js, Vite, Parcel, and Webpack. A comprehensive list is available in the [react documentation](https://react.dev/learn/start-a-new-react-project). To use a component, you can import it directly from the package: diff --git a/src/pages/developing/get-started.mdx b/src/pages/developing/get-started.mdx index 3b606641674..1650acf830d 100644 --- a/src/pages/developing/get-started.mdx +++ b/src/pages/developing/get-started.mdx @@ -41,7 +41,7 @@ as well as our GitHub repos and Storybooks for your framework of choice. ### Take a tutorial -We offer tutorials in Angular, React using NextJS, and Vue to guide you in +We offer tutorials in Angular, React using Next.js, and Vue to guide you in creating an app with the Carbon Design System. We’ll teach you the ins and outs of using Carbon components, and introduce web development best practices along the way. @@ -49,8 +49,8 @@ the way. diff --git a/src/pages/developing/next-tutorial/faq.mdx b/src/pages/developing/react-tutorial/faq.mdx similarity index 92% rename from src/pages/developing/next-tutorial/faq.mdx rename to src/pages/developing/react-tutorial/faq.mdx index 821d81371c0..eadc475d586 100644 --- a/src/pages/developing/next-tutorial/faq.mdx +++ b/src/pages/developing/react-tutorial/faq.mdx @@ -1,8 +1,8 @@ --- title: FAQs description: - Welcome to Carbon! This tutorial will guide you in creating a NextJS app with - the Carbon Design System. + Welcome to Carbon! This tutorial will guide you in creating a React app using + Next.js with the Carbon Design System. tabs: [ 'Overview', @@ -44,4 +44,4 @@ tabs: -It can also be demonstrated by deploying your app. Please see further documentation -[here](/developing/next-tutorial/step-5#build-for-production-and-deploy). +[here](/developing/react-tutorial/step-5#build-for-production-and-deploy). diff --git a/src/pages/developing/next-tutorial/images/carbon-badge.png b/src/pages/developing/react-tutorial/images/carbon-badge.png similarity index 100% rename from src/pages/developing/next-tutorial/images/carbon-badge.png rename to src/pages/developing/react-tutorial/images/carbon-badge.png diff --git a/src/pages/developing/next-tutorial/overview.mdx b/src/pages/developing/react-tutorial/overview.mdx similarity index 64% rename from src/pages/developing/next-tutorial/overview.mdx rename to src/pages/developing/react-tutorial/overview.mdx index 8e660f4a9e0..5aaa5741685 100644 --- a/src/pages/developing/next-tutorial/overview.mdx +++ b/src/pages/developing/react-tutorial/overview.mdx @@ -1,8 +1,8 @@ --- title: Tutorial overview description: - Welcome to Carbon! This tutorial will guide you in creating a NextJS app with - the Carbon Design System. + Welcome to Carbon! This tutorial will guide you in creating a React app using + Next.js with the Carbon Design System. tabs: [ 'Overview', @@ -20,9 +20,10 @@ import Preview from 'components/Preview'; -Welcome to Carbon! This tutorial will guide you in creating a NextJS app with -the Carbon Design System. We'll teach you the ins and outs of using Carbon -components, while introducing web development best practices along the way. +Welcome to Carbon! This tutorial will guide you in creating a React app using +Next.js with the Carbon Design System. We'll teach you the ins and outs of using +Carbon components, while introducing web development best practices along the +way. @@ -55,18 +56,26 @@ page. ## Prerequisites -### NextJS +### React -This is a web development tutorial that builds a NextJS application that uses -the Carbon React components. If you're just getting started with React and enjoy -learning-by-doing, check out the official NextJS -[introduction](https://nextjs.org/learn/foundations/about-nextjs). You'll want -to supplement that with their +This is a web development tutorial that uses the Carbon React components built +with [Next.js](#Next.js). If you're just getting started with React and enjoy +learning-by-doing, check out the official React +[intro tutorial](https://react.dev/learn/tutorial-tic-tac-toe). You'll want to +supplement that with their +[step-by-step guide](https://react.dev/blog/2023/03/16/introducing-react-dev). + +### Next.js + +As mentioned, we will be building this app using Next.js. Don't worry, no prior +knowledge about Next.js will be needed. Check out the official Next.js +[introduction](https://nextjs.org/learn/foundations/about-nextjs). If you want +to learn more you can supplement that with their [step-by-step tutorial](https://nextjs.org/learn/basics/create-nextjs-app). ### ES6/ES2015 -NextJS apps often use the latest and greatest from JavaScript (ES6/ES2015). +React apps often use the latest and greatest from JavaScript (ES6/ES2015). You'll want to be up to speed on the most commonly used features of the language. [Let's Learn ES6](https://www.youtube.com/playlist?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX) @@ -92,13 +101,13 @@ Each step in this tutorial illustrates a different aspect of developing web applications with Carbon. We recommend starting with step 1, but you can pick up any step and take it from there. -1. [**Installing Carbon**](/developing/next-tutorial/step-1) +1. [**Installing Carbon**](/developing/react-tutorial/step-1) - Create a web app with the UI shell component. -2. [**Building pages**](/developing/next-tutorial/step-2) +2. [**Building pages**](/developing/react-tutorial/step-2) - Build out pages with the grid and various components. -3. [**Using APIs**](/developing/next-tutorial/step-3) +3. [**Using APIs**](/developing/react-tutorial/step-3) - Populate the data table with an external data source. -4. [**Creating components**](/developing/next-tutorial/step-4) +4. [**Creating components**](/developing/react-tutorial/step-4) - Extend Carbon by creating your own components. -5. [**Deploying to Vercel**](/developing/next-tutorial/step-5) +5. [**Deploying to Vercel**](/developing/react-tutorial/step-5) - Build and host your app in a production environment. diff --git a/src/pages/developing/next-tutorial/step-1.mdx b/src/pages/developing/react-tutorial/step-1.mdx similarity index 94% rename from src/pages/developing/next-tutorial/step-1.mdx rename to src/pages/developing/react-tutorial/step-1.mdx index f0ab2a404e0..c8676aa94ac 100644 --- a/src/pages/developing/next-tutorial/step-1.mdx +++ b/src/pages/developing/react-tutorial/step-1.mdx @@ -1,8 +1,8 @@ --- title: 1. Installing Carbon description: - Welcome to Carbon! This tutorial will guide you in creating a NextJS app with - the Carbon Design System. + Welcome to Carbon! This tutorial will guide you in creating a React app using + Next.js with the Carbon Design System. tabs: [ 'Overview', @@ -21,7 +21,7 @@ import Preview from 'components/Preview'; Starting from a base Create Next App, let's install Carbon and begin using -Carbon components. By the end you will have a NextJS app that uses the UI Shell +Carbon components. By the end you will have a Next.js app that uses the UI Shell to navigate between pages. @@ -122,7 +122,7 @@ git checkout -b v11-next-step-1 upstream/v11-next-step-1 ## Build and start We have the repository forked to your GitHub account, cloned down to your -machine, and the starting branch checked out. Next, install the NextJS app's +machine, and the starting branch checked out. Next, install the Next.js app's dependencies with: ```bash @@ -141,11 +141,11 @@ After the build and dependencies are installed, you can start the app with: yarn dev ``` -This is a NextJS 13 app with a home page, its root layout and a global style +This is a Next.js 13 app with a home page, its root layout and a global style sheet. Your default browser should open up with an empty page that says: -`Hello Carbon! Well, not quite yet. This is the starting point for the Carbon NextJS tutorial.` +`Hello Carbon! Well, not quite yet. This is the starting point for the Carbon React tutorial.` ## Install Carbon @@ -206,7 +206,7 @@ of the file: } ``` -In NextJS 13 there is a global style sheet and then every page has it own, +In Next.js 13 there is a global style sheet and then every page has it own, optional, style sheet. Next, we'll import a `Button` from Carbon to test that our dependencies are @@ -227,7 +227,7 @@ In the `Page` component return, you can now replace: ```html path=src/app/page.js
Hello Carbon! Well, not quite yet. This is the starting point for the Carbon - NextJS tutorial. + React tutorial.
``` @@ -379,7 +379,7 @@ With: Next we'll render our UI Shell by importing our `TutorialHeader` component and `Content` into a provider components in the Root Layout. We do this because -layout components in NextJS 13 are server-side components. +layout components in Next.js 13 are server-side components. @@ -396,7 +396,7 @@ import { Providers } from './providers'; export const metadata = { title: 'Carbon + Next13', - description: 'IBM Carbon Tutorial with NextJS 13', + description: 'IBM Carbon Tutorial with Next.js 13', }; export default function RootLayout({ children }) { @@ -442,9 +442,9 @@ src/app └── repos ``` -NextJS uses these folders for page routing which is built into the framework, we -do not need separate React routing. In each there is a `page.js` and optionally -a `layout.js` and styling sheet. +Next.js uses these folders for page routing which is built into the framework, +we do not need separate React routing. In each there is a `page.js` and +optionally a `layout.js` and styling sheet. Create the following files in the `home` folder: @@ -509,10 +509,10 @@ Navigate to the repos page by adding `/repos` at the end of your locally hosted site to see your repos page. Awesome! We've just created our content pages with automatic page routing -courtesy of NextJS. +courtesy of Next.js. After that we need to do a couple of quick fixes to the UI Shell to work with -NextJS links. +Next.js links. Add the `Link` import in `TutorialHeader.js`: @@ -521,9 +521,9 @@ import Link from 'next/link'; ``` We need to use the `Link` component instead of the default anchor elements to -prevent full page reload when navigating to different pages with React Router. -To use `Link`, we wrap `HeaderName` component and pass through `href` elements -to it: +prevent full page reload when navigating to different pages in Next.js +applications. To use `Link`, we wrap `HeaderName` component and pass through +`href` elements to it: ```javascript path=src/components/TutorialHeader/TutorialHeader.js @@ -661,7 +661,7 @@ upstream changes. ### Pull request (PR) Finally, visit -[carbon-next-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) +[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) to "Compare & pull request". In doing so, make sure that you are comparing to `v11-next-step-1` into `base: v11-next-step-1`. Take notice of the [Netlify](https://www.netlify.com) bot that deploys a preview of your PR every diff --git a/src/pages/developing/next-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx similarity index 98% rename from src/pages/developing/next-tutorial/step-2.mdx rename to src/pages/developing/react-tutorial/step-2.mdx index 85b0e264f4c..d0cd41caf9a 100644 --- a/src/pages/developing/next-tutorial/step-2.mdx +++ b/src/pages/developing/react-tutorial/step-2.mdx @@ -1,8 +1,8 @@ --- title: 2. Building pages description: - Welcome to Carbon! This tutorial will guide you in creating a NextJS app with - the Carbon Design System. + Welcome to Carbon! This tutorial will guide you in creating a React app using + Next.js with the Carbon Design System. tabs: [ 'Overview', @@ -20,9 +20,9 @@ import Preview from 'components/Preview'; -Now that we have a NextJS app using the UI Shell, it's time to build a few -static pages. In this step, we'll become comfortable with the Carbon grid and -various Carbon components. +Now that we have our app using the UI Shell, it's time to build a few static +pages. In this step, we'll become comfortable with the Carbon grid and various +Carbon components. @@ -62,7 +62,7 @@ This tutorial has an accompanying GitHub repository called we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/developing/next-tutorial/step-1#fork-clone-and-branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -98,7 +98,7 @@ yarn start ``` You should see something similar to where the -[previous step](/developing/next-tutorial/step-1) left off. +[previous step](/developing/react-tutorial/step-1) left off. ## Add landing page grid @@ -938,7 +938,7 @@ git push origin v11-next-step-2 **Note:** Having issues pushing your changes? -[Step 1](/developing/next-tutorial/step-1#git-commit-and-push) has +[Step 1](/developing/react-tutorial/step-1#git-commit-and-push) has troubleshooting notes that may help. @@ -946,7 +946,7 @@ troubleshooting notes that may help. ### Pull request (PR) Finally, visit -[carbon-next-tutorial](https://github.com/carbon-design-system/carbon-tutorial) +[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to "Compare & pull request". In doing so, make sure that you are comparing to `v11-next-step-2` into `base: v11-next-step-2`. diff --git a/src/pages/developing/next-tutorial/step-3.mdx b/src/pages/developing/react-tutorial/step-3.mdx similarity index 96% rename from src/pages/developing/next-tutorial/step-3.mdx rename to src/pages/developing/react-tutorial/step-3.mdx index 5aaad48cbf4..b72afef293e 100644 --- a/src/pages/developing/next-tutorial/step-3.mdx +++ b/src/pages/developing/react-tutorial/step-3.mdx @@ -1,8 +1,8 @@ --- title: 3. Using APIs description: - Welcome to Carbon! This tutorial will guide you in creating a NextJS app with - the Carbon Design System. + Welcome to Carbon! This tutorial will guide you in creating a React app using + Next.js with the Carbon Design System. tabs: [ 'Overview', @@ -64,11 +64,11 @@ of what you will build (see repositories page): ## Fork, clone and branch This tutorial has an accompanying GitHub repository called -[carbon-next-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) +[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/developing/next-tutorial/step-1#fork-clone-and-branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -95,7 +95,7 @@ yarn start ``` You should see something similar to where the -[previous step](/developing/next-tutorial/step-2) left off. Stop your app with +[previous step](/developing/react-tutorial/step-2) left off. Stop your app with `CTRL-C` and let's get everything installed. ## Install dependencies @@ -503,7 +503,7 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1]() +[Step 1]() has troubleshooting notes that may help. @@ -527,7 +527,7 @@ git push origin v11-next-step-3 **Note:** Having issues pushing your changes? -[Step 1](/developing/next-tutorial/step-1#git-commit-and-push) has +[Step 1](/developing/react-tutorial/step-1#git-commit-and-push) has troubleshooting notes that may help. @@ -535,7 +535,7 @@ troubleshooting notes that may help. ### Pull request (PR) Finally, visit -[carbon-next-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) +[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) to "Compare & pull request". In doing so, make sure that you are comparing to `v11-next-step-3` into `base: v11-next-step-3`. diff --git a/src/pages/developing/next-tutorial/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx similarity index 96% rename from src/pages/developing/next-tutorial/step-4.mdx rename to src/pages/developing/react-tutorial/step-4.mdx index 6a62e85baea..ae25c2955d7 100644 --- a/src/pages/developing/next-tutorial/step-4.mdx +++ b/src/pages/developing/react-tutorial/step-4.mdx @@ -1,8 +1,8 @@ --- title: 4. Creating components description: - Welcome to Carbon! This tutorial will guide you in creating a NextJS app with - the Carbon Design System. + Welcome to Carbon! This tutorial will guide you in creating a React app using + Next.js with the Carbon Design System. tabs: [ 'Overview', @@ -65,11 +65,11 @@ of what you'll build (see bottom of page): ## Fork, clone and branch This tutorial has an accompanying GitHub repository called -[carbon-next-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) +[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/developing/next-tutorial/step-1#fork-clone-and-branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -105,7 +105,7 @@ yarn start ``` You should see something similar to where the -[previous step](/developing/next-tutorial/step-3) left off. +[previous step](/developing/react-tutorial/step-3) left off. ## Review design @@ -446,7 +446,7 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1]() +[Step 1]() has troubleshooting notes that may help. @@ -470,7 +470,7 @@ git push origin v11-next-step-4 **Note:** Having issues pushing your changes? -[Step 1](/developing/next-tutorial/step-1#git-commit-and-push) has +[Step 1](/developing/react-tutorial/step-1#git-commit-and-push) has troubleshooting notes that may help. @@ -478,7 +478,7 @@ troubleshooting notes that may help. ### Pull request (PR) Finally, visit -[carbon-next-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) +[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial-nextjs) to "Compare & pull request". In doing so, make sure that you are comparing to `v11-next-step-4` into `base: v11-next-step-4`. diff --git a/src/pages/developing/next-tutorial/step-5.mdx b/src/pages/developing/react-tutorial/step-5.mdx similarity index 91% rename from src/pages/developing/next-tutorial/step-5.mdx rename to src/pages/developing/react-tutorial/step-5.mdx index 043920c2898..ef8d96e63ad 100644 --- a/src/pages/developing/next-tutorial/step-5.mdx +++ b/src/pages/developing/react-tutorial/step-5.mdx @@ -1,8 +1,8 @@ --- title: 5. Deploying to Vercel description: - Welcome to Carbon! This tutorial will guide you in creating a NextJS app with - the Carbon Design System. + Welcome to Carbon! This tutorial will guide you in creating a React app using + Next.js with the Carbon Design System. tabs: [ 'Overview', @@ -28,8 +28,7 @@ environment. Fork, clone and branch -Build for production -Deploying to Vercel +Build for production and deploy @@ -54,7 +53,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/developing/next-tutorial/step-1#fork-clone-and-branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -90,7 +89,7 @@ yarn start ``` You should see something similar to where the -[previous step](/developing/next-tutorial/step-4) left off. +[previous step](/developing/react-tutorial/step-4) left off. ## Build for production and deploy @@ -103,7 +102,7 @@ yarn build ``` Looking at `package.json`, you'll find `yarn build` to run `next build`. This -builds the app for production to the `build` folder. It bundles NextJS in +builds the app for production to the `build` folder. It bundles Next.js in production mode and optimizes the build for the best performance. It even goes so far to minify files and include hashes in filenames for caching. diff --git a/src/pages/developing/next-tutorial/wrapping-up.mdx b/src/pages/developing/react-tutorial/wrapping-up.mdx similarity index 100% rename from src/pages/developing/next-tutorial/wrapping-up.mdx rename to src/pages/developing/react-tutorial/wrapping-up.mdx