From the course: React for Web Designers
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Installing React on an existing site - React.js Tutorial
From the course: React for Web Designers
Installing React on an existing site
into the React water, and get React installed on our little project here. This is an existing website for H+ Sport. And this is the shop page. We're specifically going to be looking at a product page for these sneakers. As you can see there's nothing here so far. This is something we're going to be building up as we go. I'm going to switch over to the HTML files so you can see what our script tags look like. So here I am in Visual Studio Code. And as I said, this is an existing website. This is a static copy of a WordPress website, in fact. So there's a whole ton of HTML in this file. We're going to skip to the parts that are really important for us, as we're integrating React into this page. So first I'm going to use the go to line command, which is Control + G in Visual Studio Code by default. I'm going to go to a line 114. About halfway down the page. Something we're going to need when we're inserting our components into the page is a place for React to put them. So we have an ID…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Installing React on an existing site8m 7s
-
(Locked)
Identifying your components and data3m 19s
-
(Locked)
Set up first simple component5m 31s
-
(Locked)
Start using JSX with the help of Babel7m 57s
-
(Locked)
Attaching a data source3m 20s
-
(Locked)
Create a new component with array data5m 56s
-
(Locked)
Implement props4m 28s
-
(Locked)
Implement state with the useState hook5m 11s
-
(Locked)
Add the color selector component3m 27s
-
(Locked)
Change options, see reactions6m 14s
-
(Locked)
Challenge: Activate the color selector1m 58s
-
(Locked)
Solution3m 4s
-
(Locked)
-
-
-