Consistent practice is one of the most effective ways to improve your coding skills. So in addition to the core coding curriculum, you can now keep your programming skills sharp by solving a fun new coding challenge every single day.

Each day at midnight US Central time, a new programming puzzle will unlock on freecodecamp.org and the freeCodeCamp mobile app that you can solve in JavaScript and Python.

How to Start Solving Daily Coding Challenges

On the freeCodeCamp Mobile App:

1. Download the freeCodeCamp mobile app from the Google Play Store or the Apple App Store and open it.

2. Don’t forget to sign in if you want to save your progress. Then find todays challenge at the top and click “Start the challenge”:

3. Choose your preferred language:

4. Read the challenge instructions:

5. Write the code:

6. Pass the tests:

And voilà! You’ve completed the challenge.

On the Website:

1. Go to freecodecamp.org and make sure you’re logged in if you want to save your progress. Then scroll down to find the coding challenge of the day and click “Start”:

2. Choose your preferred language at the top

3. Read the challenge instructions, write the code, and pass the tests:

What if I Missed a Day?

Don’t worry if you miss a challenge. Both the mobile app and website include an archive page, where you can browse and complete past challenges at your own pace:

Start Your first Challenge Today

Today’s challenge is waiting for you. Open the freeCodeCamp app or head to freecodecamp.org to complete it. 🚀

This curriculum is made possible by The Solana Foundation, who gave our charity a grant to 100% fund development of this curriculum.

What will this curriculum teach you?

The Solana curriculum contains ten interactive practice projects that will guide you through learning the Solana protocol and their tools.

Through these projects, you will learn how to build and deploy smart contracts, dApps, work with their command line tools, and much more.

There are also five challenging integrated projects to test your knowledge.

How does it work?

The courses will run in a docker container using VS Code and the freeCodeCamp Courses extension.

Here's a Sample

Which Projects Will You Build as Part of the Solana Curriculum?

These projects consist of two interactive practice projects and one integrated project. Here are the projects:

1. Learn How to Set Up Solana by Building a Hello World Smart Contract
2. Learn How to Interact with On-Chain Programs
3. Build a Smart Contract
4. Learn Solana's Token Program by Minting a Fungible Token
5. Learn the Metaplex SDK by Minting an NFT
6. Build a University Certification NFT
7. Learn Anchor by Building Tic-Tac-Toe: Part 1
8. Learn Anchor by Building Tic-Tac-Toe: Part 2
9. Build an Anchor Leaderboard
10. Learn How to Build a Client-Side App: Part 1
11. Learn How to Build a Client-Side App: Part 2
12. Build a Client-Side App
13. Learn How to Build for Mainnet
14. Learn How to Deploy to Devnet
15. Build and Deploy Your Freeform App

How to Run the Courses

Follow the steps below to run the courses

Developer Environment Prerequisites

Before you get started, make sure you have these installed on your computer:

1. Docker Engine
2. VS Code and the Dev Containers extension
3. Git

How to Run the Curriculum in Docker

Follow these instructions to clone the repo and run the courses:

1. Open a terminal and clone the solana-curriculum repo with:

   git clone https://github.com/freeCodeCamp/solana-curriculum.git
   

2. Navigate to the solana-curriculum directory, and open it in a VSCode workspace with:

   code .
   

3. Press Ctrl / Cmd + Shift + P to open the command palette, and run Dev Containers: Rebuild Container and Reopen in Container. VS Code will build the container to run the projects in, it will take a few minutes the first time.

4. Once it's finished, press Ctrl / Cmd + Shift + P again and run freeCodeCamp: Run Course to start the courses. This will also take a moment.
5. The simple browser will open when it's done. If it's a blank white page, use the refresh button to update it and see the courses home page.
6. Click on one of the available projects to start a project.
7. Follow the instructions to complete the project.
8. Have fun!

If you want to switch projects, click the freeCodeCamp logo at the top to get back to the home page.

freeCodeCamp Also Offers a More General Web3 Course that Covers Blockchain Fundamentals

While you are waiting for these courses, you can try the Web3 curriculum which is now in open beta. It will teach you many Web3 and blockchain concepts you will want to know for the Solana curriculum.

Where you can Learn more about the Solana Foundation

You can learn more about The Solana Foundation on their website.

Over the past 9 months, several of our instructors have been hard at work on a comprehensive NEAR curriculum. This will focus on NEAR's blockchain protocol and the NEAR tool ecosystem.

This curriculum is made possible by NEAR Foundation, who gave our charity a grant to 100% fund development of this curriculum.

What will it contain?

The curriculum will contain at least ten interactive practice projects that will guide you through learning the NEAR protocol and their tools.

You'll learn how to build and deploy your own smart contracts, dApps, work with NEAR command line tools, and much more. There will also be five challenging integrated projects to test your knowledge.

How will it work?

These courses will run in a docker container using VS Code and the freeCodeCamp Courses extension.

Here's a Sample of the first Project

When Will it be Available?

The courses will be released in batches. As we finish creating a group of projects, typically consisting of two interactive practice projects and one integrated project, they will be released for you to complete. The first group is available now! and consists of these projects:

• Learn How to Set Up NEAR by Building a Hello World Smart Contract
• Learn NEAR Smart Contracts by Building a Word Guessing Game
• Build a Sentence Making Smart Contract

How to Run the Courses

Follow the steps below to run the courses

Developer Environment Prerequisites

Before you get started, make sure you have these installed on your computer:

1. Docker Engine
2. VS Code and the Dev Containers extension
3. Git

How to Run the Curriculum in Docker

Follow these instructions to clone the repo and run the courses:

1. Open a terminal and clone the near-curriculum repo with:

   git clone https://github.com/freeCodeCamp/near-curriculum.git
   

2. Navigate to the near-curriculum directory, and open it in a VSCode workspace with:

   code .
   

3. Press Ctrl / Cmd + Shift + P to open the command palette, and run Dev Containers: Rebuild Container and Reopen in Container. VS Code will build the container to run the projects in, it will take a few minutes the first time.

4. Once it's finished, press Ctrl / Cmd + Shift + P again and run freeCodeCamp: Run Course to start the courses. This will also take a moment.
5. The simple browser will open when it's done. If it's a blank white page, use the refresh button to update it and see the courses home page.
6. Click on one of the available projects to start a project.
7. Follow the instructions to complete the project.
8. Have fun!

If you want to switch projects, click the freeCodeCamp logo at the top to get back to the home page.

Sign up for updates

Fill out this google form to sign up to receive updates when new courses are released.

While You're Waiting

While you are waiting for these courses, you can try the Web3 curriculum (also under development). It will teach you many Web3 and blockchain concepts you will want to know for the NEAR curriculum.

Learn more about NEAR Foundation

You can learn more about NEAR Foundation by visiting their website.

Over the past 11 months, we've made considerable progress on our Web3 curriculum. Today I'm thrilled to say that parts of this curriculum are now in open beta. You can try them today.

Before we get into the details, I want to thank the KaijuKingz community, who made a donation to freeCodeCamp that made development of these courses possible. You can read more about their gift to the freeCodeCamp community here.

How to Approach These Web3 Courses

As a prerequisite for this course, we recommend first learning full stack web development. You can do this by working through the first 7 freeCodeCamp certifications and building their projects:

1. Responsive Web Design
2. JavaScript Algorithms and Data Structures
3. Front End Development Libraries
4. Data Visualization
5. Relational Database
6. Back End Development and APIs
7. Quality Assurance

We also recommend you know some knowledge of basic blockchain development concepts. freeCodeCamp has an in-depth 32-hour course that covers this, taught by developer and instructor Patrick Collins.

We also recommend learning some Rust, which you can learn interactively using freeCodeCamp's Rust course.

Again, these prerequisites are just our recommendations. Feel free to just dive in and return to those resources as you see fit.

Right now, we have designed five integrated Web3 projects for you to complete:

1. Build a Video Game Marketplace Blockchain
2. Build a Fundraising Smart Contract
3. Build a Peer-to-Peer Network
4. Build a Web3 Client-Side Package for your dApp
5. Build a Smart Contract in Rust

Each of these projects has its own set of instructions with tasks for you to fulfill, and tests to ensure you've implemented your project correctly. Complete all the tasks and get all the tests to pass to finish each project.

These 5 projects are just the beginning

We are also developing 10 interactive Web3 practice projects.

These will walk you through all the Web3 concepts you need to know to build these 5 integrated projects we're releasing today.

Why are we releasing the hard part (the 5 integrated projects) first? For the die-hard Web3 enthusiasts who don't mind using watching Patrick's course, reading official documentation, and referencing the many other free Web3 tutorials out there.

Soon it will be a smoother ride for anyone to learn these tools and concepts. But we wanted to first get something out there for the hardcore crowd.

Available interactive projects

As of January 2023, the first group of interactive practice projects is now fully available. They will teach you the concepts you need to know to complete the first integrated project. The new courses are:

1. Learn Digital Ledgers by Building a Blockchain
2. Learn Proof of Work Consensus by Building a Block Mining Algorithm
3. Learn Digital Signatures by Building a Wallet

The Web3 Curriculum is in open beta. We welcome your feedback and bug reports.

Note that these are in open beta – meaning that we will continue to refine them with your feedback.

You can help by joining our new Web3 Curriculum Discord server, introducing yourself, and helping other people who get stuck trying to build these 5 integrated projects.

You can also sign up for updates These will make it a lot easier to build these 5 integrated projects So in a way, you actually doing the hardest, most ambiguos part Sign up for updates below for when new courses are released.

How will it work?

The courses will run in a docker container using VS Code and the freeCodeCamp Courses extension.

Here's a sample

How to Run the Courses

Follow the steps below to run the courses

Developer Environment Prerequisites

Before you get started, make sure you have these installed on your computer:

1. Docker Engine
2. VS Code and the Dev Containers extension
3. Git

How to Run the Curriculum in Docker

Follow these instructions to clone the repo and run the courses:

1. Open a terminal and clone the web3-curriculum repo with:

   git clone https://github.com/freeCodeCamp/web3-curriculum.git
   

2. Navigate to the web3-curriculum directory, and open it in a VSCode workspace with:

   code .
   

3. Press Ctrl / Cmd + Shift + P to open the command palette, and run Dev Containers: Rebuild Container and Reopen in Container. VS Code will build the container to run the projects in, it will take a few minutes the first time.

4. Once it's finished, press Ctrl / Cmd + Shift + P again and run freeCodeCamp: Run Course to start the courses. This will also take a moment.
5. The simple browser will open when it's done. If it's a blank white page, use the refresh button to update it and see the courses home page.
6. Click on one of the available projects to start a project.
7. Follow the instructions to complete the project.
8. Have fun!

If you want to switch projects, click the freeCodeCamp logo at the top to get back to the home page.

Sign up for updates

Fill out this google form to receive updates when new courses are released.

Other Courses

We are also creating courses around the Solana and NEAR protocols.

View the Solana announcement article. View the NEAR announcement article.

Or, check out the web3.freecodecamp.org domain where we showcase all the courses.

This theme uses freeCodeCamp.org's distinct color scheme, typography, and UI design sensibilities.

This night mode theme is minimalistic, easy on the eyes, and will help you reach a coding flow state.

Here's a preview of what this night mode theme looks like:

VS Code Dark Mode Theme – freeCodeCamp Style

You can download this theme from the Visual Studio Marketplace.

Or you can just open up the extensions tab of your VS Code editor and search for "freeCodeCamp Dark Theme" to install it.

About the Dark Mode Theme

This theme is based off of freeCodeCamp's "Command Line Chic" visual aesthetic. If you want to feel like you're in Mr. Robot, this style is for you.

We designed this Night Mode theme to strike a balance between contrast and flavor, readability and flare.

If you are a design enthusiast, we've codified Command Line Chic in our nonprofit's Design Style Guide.

I think you're going to dig it. Happy coding.

During this full-length 300-hour course, you will learn to build more than a dozen projects. Some of them will involve step-by-step instructions, and others will be open ended, with elaborate test suites.

You will use real developer tools and software like VS Code, PostgreSQL, and the Linux / Unix command line to complete interactive tutorials and build projects.

What you will learn

• The Linux / Unix Command Line

• Relational Databases

• SQL and PostgreSQL

• Bash and Bash Scripting

• Git and GitHub

• Nano

• And a lot of other concepts and tools

This course was made possible by a grant from Class Central, a search engine and review site for online courses.

How to install Docker and run the Relational Database Curriculum

Docker will run a container on your computer that has the software and file structure required for these tutorials.

You will be working in that container using VSCode and the Dev Containers extension. Once it's running, the CodeRoad extension will run the tutorials we have created.

Prerequisites

Before you get started, you need to have a few things installed:

1. The Docker Engine

2. VS Code

3. The Dev Containers extension for VS Code

4. Git

How to Run a Project in Docker

Follow these steps to run the docker container and start a tutorial:

1. Clone the RDB Alpha repo to your computer with git clone https://github.com/freeCodeCamp/rdb-alpha

2. Open a terminal, navigate to the rdb-alpha directory, and open VS Code with code .

3. In VS Code, open the command palette with Ctrl / Cmd + Shift + P. Then, enter and run Dev Containers: Rebuild and Reopen in Container

4. A new VS Code window will open and begin building the Docker image. It will take several minutes to build the first time

5. Once the image is finished building, open the command palette again with Ctrl / Cmd + Shift + P, enter and run CodeRoad: Start. The command won't be available until the extension has finished installing in your container

6. In the CodeRoad window, click "Start New Tutorial"

7. Click the URL tab and enter the URL of the tutorial.json file for the project you want to start (ex: https://raw.githubusercontent.com/freeCodeCamp/learn-bash-by-building-a-boilerplate/main/tutorial.json) Full list of available tutorials below.

8. Click the "Start" button to start the lessons

How to Restart or Switch Projects

If you restart or switch projects, you will lose your progress on a tutorial you may have started along with any files or folders you may have created.

1. Open the command palette with Ctrl / Cmd + Shift + P, enter and run Dev-Containers: Rebuild Container

2. Wait for VS Code to reopen the reload the container

3. Open CodeRoad from the command palette like you did before, click "Start New Tutorial", and enter the URL of the tutorial.json file for the project you want to do

Available Courses

Here is a list of tutorials currently available. Open one of them and use its URL, as described in the instructions above, to start it.

• Learn Bash by Building a Boilerplate

• Learn Relational Databases by Building a Database of Video Game Characters

• Celestial Bodies Database

• Learn Bash Scripting by Building Five Programs

• Learn SQL by Building a Student Database: Part 1

• Learn SQL by Building a Student Database: Part 2

• World Cup Database

• Learn Advanced Bash by Building a Kitty Ipsum Translator

• Learn Bash and SQL by Building a Bike Rental Shop

• Salon Appointment Scheduler

• Learn Nano by Building a Castle

• Learn Git by Building an SQL Reference Object

• Periodic Table Database

• Number Guessing Game

Here's a video of me doing "Learn Bash by Building a Boilerplate" in 13 minutes and 38 seconds:

Also, Download the freeCodeCamp Dark Theme for VS Code

If you like the color scheme that these tutorials use, you can download the freeCodeCamp Dark Theme extension from the Visual Studio Marketplace.

You can learn more about the Dark Theme here.

Help us improve these courses by asking questions and giving us feedback

If you have any questions about these new Relational Database courses, get stuck at some point, or just have general feedback about them, you can create a thread on the freeCodeCamp Forum.

We also have our own Slack-like chat room system where you can ask questions and help contribute to our open source projects. Join our chat room system.

Happy Coding.

The way it works is simple. Instead of putting the text you want to display in the components, it all goes into a JSON file.

You then use the keys from the file in the components to get the text. You can add additional JSON files with the same keys and translated values for each desired language. Whatever language is set will determine which JSON file is used as the text for the app.

Follow the steps below to learn how to add this functionality to a React app.

Clone the boilerplate

If you want to code along, you can clone the boilerplate from GitHub or open the boilerplate on replit. It's a small React app with two pages and a few components:

The goal is to make the app available in English and Spanish.

If you are following along, I recommend taking a quick look at the components and file structure to get familiar with the code. The JS files in the src folder are the important ones you will be changing. The Nav, Home, and Page2 components contain all the text that needs to be translated.

Add the dependencies

react-i18next is based on i18next, so you will need both packages as dependencies to translate the app. You can add them with:

npm install --save react-i18next i18next

If you are following along, start the app with npm start so you can give the two pages a look.

Create the file structure

In the src folder, create an i18n folder to hold all the information related to translating the app. Here’s the structure I used that is pretty common:

src
+-- i18n
    +-- locales
    |    +-- en
    |        +-- translations.json
    |    +-- es
    |        +-- translations.json
    +-- config.js

The config.js file contains the set up for the i18n instance. The two JSON files will hold the text that goes in the app. en for English and es for Spanish. If you are following along, create the file structure in the boilerplate.

Configure the i18n instance

The i18n instance will hold all of your translations, the current language, and other info and methods needed. You can configure it in the config.js file like this:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  fallbackLng: 'en',
  lng: 'en',
  resources: {
    en: {
      translations: require('./locales/en/translations.json')
    },
    es: {
      translations: require('./locales/es/translations.json')
    }
  },
  ns: ['translations'],
  defaultNS: 'translations'
});

i18n.languages = ['en', 'es'];

export default i18n;

At the top, import the necessary dependencies. Next, the use(initReactI18next) will bind react-i18next to the i18n instance.

The first two properties of the init object parameter are a fallback language (fallbackLng) and default language (lng). I set both of these to English (en).

The resources are the JSON files with the translations that you created in the last step. The namespaces (ns) and default namespace (defaultNS) are the keys from the resources object.

You can split your translations into multiple files (namespaces) if you have a large app to simplify the files. In which case, you would add more than just the one file in the resources object and add it to the namespaces array. This app is small, so all the translations can go in one file.

Add the i18n instance to your app

In the index.js file of the boilerplate, which contains the entire app, import the i18n instance you created like this:

import './i18n/config';

Next, add an empty object to your two translations.json files so you don’t get any errors. You will fill in the keys later.

Translate a functional component with the useTranslation hook

The Nav.js file is the first component to translate. It’s a functional component, so you can use the useTranslation hook. Import it at the top with import { useTranslation } from 'react-i18next'.

Next, instead of using the implicit return with the component, add curly brackets and the return statement so you can declare a variable. Get the t function from the hook with const { t } = useTranslation();.

All together, it should look like something this:

import { useTranslation } from 'react-i18next';

const Nav = () => {
  const { t } = useTranslation();

  return (
    …
  );
}

The text you want to translate in this component is Home and Page 2. In your English translations.json file, add two properties to the object:

{
  "home": "Home",
  "page2": "Page 2"
}

Now, you can pass those keys to the t function to get the text. In the Nav.js component, use the t function to translate Home and Page 2 to the English text like this: t('key-from-json-file').

Here’s how those lines should look:

import { useTranslation } from ‘react-i18next;

const Nav = () => {
  const { t } = useTranslation();

  return (
    …

    <Link to="/">{t('home')}</Link>
    <Link to="/page2">{t('page2')}</Link>
  );
}

Preview in Spanish

The two nav buttons should be working for English. Add the same two keys to the Spanish JSON file so you can see what it will look like in Spanish. Here’s the translations:

{
  "home": "Casa",
  "page2": "Página 2"
}

After that, go to the config.js file, set the lng (default language) to es and reload the page. The nav links should show up in Spanish. When you are done, you can set the default language back to en.

Translate a class component using withTranslation

In the Home.js file, there are three sentences and a button to translate. You can use the t function again for most of them, but this one is a Class component so you need to use the withTranslation higher order component (HOC). Import it at the top with import { withTranslation } from 'react-i18next';.

Then, at the bottom of the file, export it with export default withTranslation()(Home);. Now the t function will be passed into the component’s props for use.

In the render method, get the function with const { t } = this.props. The code should look something like this:

import { withTranslation } from 'react-i18next';

class Home extends Component {
  …

  render() {
    const { t } = this.props;

    …
  }
}

export default withTranslation()(Home);

The first line to translate, Welcome, {username}, has a variable. You can pass an object to the t function with your variable like this: t('key-from-json-file', { variable: value }). It would look like this in the component:

<p>{t('welcome', { username: username })}</p>

Add that in place of of the "welcome" line. Then, in the English JSON file, add the new key: "welcome": "Welcome, {{username}}". The username variable passed to the t function will be placed in the string for you.

Also, add the property to the Spanish file: "welcome": "Bienvenido {{username}}". Follow the instructions from before if you want to preview it in Spanish.

Challenge yourself

You should be able to translate a few things on your own now. Try to do the next two lines, Change your username: and Submit, like the others.

Here are the properties for the English JSON file:

"change-username": "Change your username:",
"submit": "Submit"

And the Spanish translations:

"change-username": "Cambia tu nombre de usuario:",
"submit": "Enviar"

Add the above in the two JSON files. Then, translate the label and button text with the t function.

When you are done, the render part of Home.js should look like this:

render() {
  const { username } = this.state;
  const { t } = this.props;

  return (
    <div className='body'>
      <p>{t('welcome', {username: username})}</p>

      <div>
        <label>{t('change-username')}</label>
        <input type='text' onChange={this.updateUsername.bind(this)} />
        <button onClick={this.setUsername.bind(this)}>
          {t('submit')}
        </button>
      </div>

      <p>Click <Link to='/page2'>here</Link> to go to page 2, {username}</p>
    </div>
  );
}

Change the lng in config.js to en or es and reload the app to test the languages.

Translate basic nested elements with the Trans Component

Leave the last line on the home page for now and head over to the Page2.js file. The two sentences to translate contain other elements – a strong tag and a Link component.

The general rule is to use the t function from the previous examples when you can, but if you have elements or other components in the text, you will need to use the Trans component.

First, import Trans and withTranslation from react-i18next. Then, export the component using withTranslation again. It should look like this:

import { Trans, withTranslation } from 'react-i18next';

const Page2 = () => (
  …
);

export default withTranslation()(Page2);

If you have basic HTML tags in your text, you can wrap the Trans component around the key from your JSON file, and the tags will be added to the text.

Change the first <p> in the component to this:

<p><Trans>this-is-page2</Trans></p>

Then, add the key to the two translation.json files. For English:

"this-is-page2": "This is <strong>page 2</strong>"

And the Spanish JSON:

"this-is-page2": "Esta es la <strong>página 2</strong>"

The above will translate the first line of Page2.js. Default basic tags you can use with this method are br, strong, i, and p, but that list can be expanded in the config. Set the language in the config to Spanish to make sure it's working.

Translate complex nested elements with Trans

The next line has a nested Link component, so it's a little trickier. You need to use Trans again, but pass the key in its props as i18nKey and keep the Link as its child. The Link doesn’t need to have any text. Here’s how that looks:

<Trans i18nKey='go-to-home'>
  <Link to='/'></Link>
</Trans>

Be sure to keep the <p> tags. Add the associated property to the English JSON:

"go-to-home": "Go to <0>the home page</0>"

And the Spanish version:

"go-to-home": "Ir a la <0>pagina principal</0>"

The <0> tags represent the first child of the Trans component, in this case, Link. If there was another child, it would use <1> tags, and so on.

Change the language in the config if you want to see the two different locales.

Translate complex nested elements with a variable

One more line to translate. The last line in the Home.js file contains a nested Link element and a variable. You need to use Trans again so add it to the existing import at the top.

If you need to use a variable with Trans, it can be placed inside the element. So the last line:

<p>Click <Link to='/page2'>here</Link> to go to page 2, {username}</p>

Can be translated like this:

<Trans i18nKey='go-to-page2'>
  <Link to='/page2'></Link>
  {{username}}
</Trans>

The key is passed to Trans as a prop like before. The nested Link element and the {{ username }} variable need to be somewhere in the component, it doesn't matter where.

Be sure to add the values to the JSON files. For English:

"go-to-page2": "Click <0>here</0> to go to page 2, {{username}}"

And Spanish:

"go-to-page2": "Haga clic <0>aquí</0> para ir a la página 2, {{username}}"

How to change languages

All the desired text should be available in both English and Spanish now. The last thing to do is to make it easy to switch between languages.

The Footer.js file has a few buttons and a changeLanguage function. Import the useTranslation hook from react-i18next at the top of the file. At the top of the Footer component, get the i18n instance from it like this: const { i18n } = useTranslation();.

Finally, in the changeLanguage function, use the i18n.changeLanguage() method, passing e.target.value to it, to change the langauge.

All together, it looks like this:

import { useTranslation } from 'react-i18next';

const Footer = () => {
  const { i18n } = useTranslation();

  function changeLanguage(e) {
    i18n.changeLanguage(e.target.value);
  }

  return(
    <div className='footer'>
      <button onClick={changeLanguage} value='en'>English</button>
      <button onClick={changeLanguage} value='es'>Español</button>
    </div>
  )
}

Now, you should be able to switch languages by clicking the buttons on each page.

How to add languages

From here, the app is ready to be translated into any language quite easily. You just need to add another language to the config, and the JSON file with the translated text to go with it.

Conclusion

Hopefully, this gave you some insight into how to rapidly expand a React application into many world languages.

There are many more features and details with these tools. See the links below for more info.

Helpful Links

• View a demo of the finished project
• View the source code for the finished project
• The react-i18next documentation goes into more detail on some of the translation methods, server side rendering, testing, and additional uses with React.
• The i18next documentation has helpful information on additional configuration, the API, translating complex text, and additional features.