Import JSON file in React

One nice way (without adding a fake .js extension which is for code not for data and configs) is to use json-loader module. If you have used create-react-app to scaffold your project, the module is already included, you just need to import your json:

import Profile from './components/profile';

This answer explains more.

This old chestnut...

In short, you should be using require and letting node handle the parsing as part of the require call, not outsourcing it to a 3rd party module. You should also be taking care that your configs are bulletproof, which means you should check the returned data carefully.

But for brevity's sake, consider the following example:

For Example, let's say I have a config file 'admins.json' in the root of my app containing the following:

[{  "userName": "tech1337",  "passSalted": "xxxxxxxxxxxx"}]

Note the quoted keys, "userName", "passSalted"!

I can do the following and get the data out of the file with ease.

let admins = require('~/app/admins.json');console.log(admins[0].userName);

Now the data is in and can be used as a regular (or array of) object.

Simplest approach is following

// Save this as someJson.jsconst someJson = {  name: 'Name',  age: 20}export default someJson

then

import someJson from './someJson'