REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS

Let's start building single page apps with React...this is where it gets fun. We're going to start with routing - the core of any single page application. As you'll see, react router makes routing extremely simple. Each route simply gets a component.

GET THE SOURCE CODE:

React JS #1: Intro & Workspace Setup

React JS #2: Anatomy of a Component

React JS #3: Composing Multiple Components

React JS #4: State, Props & Data

React JS #5: Events & Data Changes

React JS #6: React Router & Intro to Single Page Apps

React JS #7: React Router Params & Queries

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

[rohitwaghela]

One Week back, I didn't know anything about REACT JS except the spelling. And now... guess what.. I can set up REACT environment and I can develop cool basic stuffs as well.

Thanks a lot for this amazing tutorial. This is the best tutorial I have come across for the React JS. :)

[dafreeman]

Tutorials on Youtube are the future of the internet, you are ahead of your time.

Viewers are able to give you instant feedback.

[DaveVoyles]

0:45 Creating a basic theme from StartBootStrap.com
3:08 NPM automatically adds ./node_modules/.bin to the node dev path
3:50 Getting started with routes
6:05 Making your first few routes
8:36 Creating a link

[botirlasorin]

my wife loves programming and she wanted to learn React. So far she had sleep issues but playing these videos in the background definitely helped her to sleep tight

[michaelanderwald]

Thanks for blitzing through this at such a fast pace. I'm too lazy to read, and most video tutorials can't keep my attention, but this is my tempo. I'd feel confident to apply for a React job now, knowing I could wing an interview somehow.

[raymondmata]

For anyone having issues with or

.pushState() and .replaceState() functions have been deprecated by react-router.
props.history has also been deprecated and replaced by props.router

replace with this.props.router.push() or this.props.router.replace for

[JohnK]

Jeezus thank you for explaining something that no one else seems to be able to explain 😂🤣. I actually understand this now.

[shaadishtiaque]

I started to learn reactJS one the last of 2015... In 2016, somehow I stopped learning and working on ReactJS... after a long break, I am learning it again... and it's beautiful ....

[georgeliss]

for someone fairly new to JS, this is a HUGE jump from the previous video....
need to learn Routes (?) first, and then I'll keep watching this series

[JamieMaguire_]

Thank you so so much Will! You're lessons have changed my grades at university, always recommend your channel to friends!

[sunstar]

Each Video contents are very rich and clear.
I like and love this video.

[ers]

8:26 - Highlight your code then press "Ctrl+Shift+W" to quickly wrap the selection with a tag.
By default it will wrap it with a <p> tag. Just start typing "div" and the "p" tag will be replaced with whatever you type in.
Or go to "Edit > Tag > Wrap Selection with a tag"

[naythaniel]

I honestly don't think there are any other good courses on React other than this one. Even the one on React's website is super basic. The React guys should link to this tutorial series. It's not easy to reason about how to build an actually useful app with React unless someone like you walks people through it.

[ManuelPicadoH]

I'm just waiting for the next one, pretty much the best explained react intro course I've seen so far.

[philiscoolerthanu]

Starting files repo for anyone interested. Thanks Will for a great series.

[PALASHGOYAL]

The best part was .. "alphabetically .. OCD ..aaah" hahahaha :D
Thanks for the wonderful tutorials!

[yokrammusic]

8:43 features a brand new HTML5 element, the <butt>

Love these videos man, awesome refresher on all the stuff i need to be sharp on for a new job!

[ers]

7:14 - Just highlight the lines you need to sort Alphabetically then press "Fn+F5" (or F9 on a PC) in SublimeText.
Or go to "Edit > Sort Lines"

[loorky]

I'm having a problem with hashHistory, i did everything like in the video but i get this error : .
/src/index.js
11:29-40 'react-router' does not contain an export named 'hashHistory'.

[rc-hhee]

Awesome Course, really really really really useful! Appreciate your great effort and time!