#3 Try REACTJS Tutorial - Display Json Data

Sharing buttons:

hey there welcome to try react Jas

episode three and this one what we're

gonna be doing is just displaying JSON

data in any component doesn't actually

matter what component it is it's just

displaying JSON data itself now I do

recommend that you start with the

playlist at the very beginning start

with episode 1 otherwise you're gonna

probably get a little confused that's

gonna be true going forward

ok so I've already got my project all

set up and what I'm gonna do in here is

take a look at my posts data now this

post data is really simple JSON data

this is mimicking what a back-end API

service might send to you so to use this

what we're gonna do is open up inside of

our source we're gonna make a new folder

in here and I'm going to call it posts

and inside of that new folder I'm gonna

go ahead and make a new file called post


Jas this of course is going to be my

component a shortcut to remember what

how and what I do with components is

just opening up a pas copying that and

then paste this component in now a lot

of these things in here aren't really

that important so I can actually get rid

of everything up into the point of

something like that so that's the very

basic component and you know we can say

hello there or hello world whatever

you'd like ok cool so now that we've got

this I'm going to change this app to

post list and export that default to

post list and of course I'm gonna import

this now into my app Dutch is so inside

of here we're just gonna go ahead and do

import post lists from posts such post

list cool very simple import not a huge

deal here I'm gonna get rid of all this

and render out that component so we've

learned a couple things already one of

them being that this is a very simple

way to render component the other way is

look how simple creating a component

class actually is it's not that much

code to render out various things now

this is actually not that useful until

we actually

some external data and display whatever

that external data might be in this case

it's just a JSON dictionary now I can

actually keep this JSON dictionary and

not need a back-end service at all I can

still use this to help format how my

apps going to look so I want to import

that data itself and to do this we're

gonna say import and I'm gonna call this

post data from and then where is it from

well relative to post it's dot dot slash

data slash posts JSON now again these

are relative imports so it's going dot

dot meaning go back up to the source

level look for that data folder and then

posts JSON and since I've got this now I

can actually iterate through this data

by going like this so iterating through

the data is using post data or whatever

that post it is map and then we use two

parentheses in here and a fat arrow with

some curly brackets

this actually iterates through

everything inside of these curly

brackets we want to return something in

my case I'm just going to return the h1

of the item so I want to actually return

whatever the post title is so to get

this I'm gonna go ahead and say the post

detail and the index as in the index in

the array so looking back in the JSON

this is an array of data all right so

that's why I know I can iterate it and

each one of these things is what I'm

calling post detail so it's just the

iterated item this is an arbitrary name

that I gave it but it's fairly anchored

to what this data is so using that I can

put some curly brackets here post detail

dot using dot notation I can grab any

one of these items so in my case I'm

just gonna grab dot title pulls off that

h1 tag save it I now have my component

completed so we can test this by just

running npm run start what this is gonna

do is it's gonna run our server as you

may already know and it will give us our

react app and here so let me just look

at that and hello there hello world

setup react ok looks like

things are going well the next portion

of course is well let's actually get

more data here I'm gonna go ahead and

wrap a div tag around these things close

off that div and then put a P tag in

here and post detail is the name of the

argument I put there and then the

content for that blog is this

it's just content so poised detail dot

content and close off that ptang we save

that since NPM run is go or NPM run

start is going we can go back in and

what do you know we now have some

content in there very very simple way to

actually iterate through any sort of

array but also to more specifically

iterate through a JSON array thanks for

watching make sure you subscribe to get


otherwise we'll see you next time