From the course: Interactive React for the Web
Unlock this course with a free trial
Join today to access over 25,500 courses taught by industry experts.
Adding in JSX for simpler code - React.js Tutorial
From the course: Interactive React for the Web
Adding in JSX for simpler code
- [Instructor] While it's all well and good to use create element, you'll pretty much never see that in React projects in the wild. Almost everything is written in JSX. In this video, we're going to change this little component over to using JSX. Now, it actually is still possible to do this without any build tools directly. You can use Babel/standalone, which will transform JSX into JavaScript in the browser. It can't easily run without a web server though. And setting all that up just for this example is probably not worth your time. If you wanted to, you could look down here at the script tags section of its documentation and try it out. But instead, we're going to allow Vite to start operating on our code and write our JSX that way. This is going to happen in two parts. The part that needs to happen in the HTML, and then the part where we change our JavaScript. So let's start in the HTML file. Currently we have our script tag, tinyapp.js. In order for Vite to know that this needs…
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 using script tags6m 15s
-
(Locked)
Adding in JSX for simpler code4m 15s
-
(Locked)
Identifying components and data6m 21s
-
Create a new component and array of data6m 5s
-
(Locked)
Introducing props to pass along data5m 16s
-
(Locked)
Introducing the useState hook to manage local data4m 47s
-
(Locked)
Adding a color selector3m 19s
-
(Locked)
Implementing an event handler to update state7m 37s
-
(Locked)
Solution: Activate color selector3m 33s
-
(Locked)
-
-
-