Learn React in 20min: Create your first React app for your startup / portfolio etc. | Samuel Delesque | Skillshare

Learn React in 20min: Create your first React app for your startup / portfolio etc.

Samuel Delesque, Maker of things at Oasa

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (24m)
    • 1. Intro

      0:55
    • 2. Part 1: Prerequisites

      6:10
    • 3. Part 2: Getting started with React

      4:26
    • 4. Part 3: React Routing

      3:20
    • 5. Part 4: Adding content and styling

      7:58
    • 6. Final

      0:51

About This Class

2340e23d

As a cofounder at Lokely, I am excitid to have the opportunity to teach you a little about how we build interfaces, and give you the tools to build your own.

In this class we will go over how to quickly build a prototype for an interface - wether you are building a portfolio, a landing page for your startup, or any other product requiring a simple website.

I will assume you have a basic knowledge of CSS, HTML and JS, and possibly have seen a bit of React or other Libraries before.

The aim of this class is not to dive too deep into the technicalities, but to give you a set of tools you can use right out of the box to build your product.

Here's a list of the tools we will get started with in Part 1:

Nodejs

- Git

Atom

- Webpack

Transcripts

1. Intro: Hey, my name is Sam. I'm a co founder. It locally on today I'm gonna teach you how to build the first react up whether you want to build a full on a product using react, or you want to just build a quick portfolio landing page for your start up. Whatever you're trying to build reactors, just a great tool to build interfaces with. So for today, I would expect that you know a little bit about issue Mel CSS and some basics about javascript. But I'm gonna take you through all the steps from getting your local environments that absolutely can work with all the tools that we have. So I have set up a little from a little boy Lippett for you guys, which includes whole Web pack set up and everything. So it will be released to get started on. I'm gonna run for all the steps in the next video. So hopefully see in the flats 2. Part 1: Prerequisites: So in this first video off creating you first react up. I'm just gonna go over some Softwares that you're gonna need to create that. So the first thing you need is a code editor. So if you don't have one already invited to go to Adam, But I Oh, it's on open source code in which ah works really well, in my opinion on which you can plug any extension into really easily, you can just go ahead and download that. Then the second thing you'll need is note. No Js on PM so beside you can just get to know jazz that dog and just hit this down it. But version 8.9 is a later, stable version. This is what we can a need for this tutorial and then the third and final things that we will need if you don't already have it is get to get is a source Management software, which allows it to collaborate, was other people Andi, pretty much everyone uses that fall storing code online. So if you don't have it, your head and down there, that and then you can just friends with an souls and then what? You're done. The last thing you'll need is, um, is a boiler plate. They're prepared for you guys. So you just got to get have that com slash locally slash react dash boil plate. Okay, so if you know, get happy, get, have, it's just on online platform to the managers. Your get Rippers. Repressed stories. So in this case, I just created ah, pre pick it up for you, which contains some of the basic elements of the only to build your first at. So if you go to this page, you will see a clone it under the gun here. Anything. Just go ahead on copies this year. Well on now let's get started. So, first of all, you should open a terminal. Once you have this terminal open, let us check that all the Softwares that just installed is running properly. So that's human checkers node. No dash B to chase version. Okay, so we have the latest node running. That's checks it. NPM is here as well. PM Version 5.5 is the latest. Let's check it for him. Get Get justice Boesen. Okay, so we have get running on. That's it. Announed just also going to check that. My Adam is working properly. I'm gonna open up, Adam. This is what it looks like. Okay, let's go back to the terminal. Ah, so the first thing we're gonna do is we can had into your home directory on here. I like to have a code in a folder called Kurds. I'm just going to see you into this, and then I'm gonna create an APP directory. Let's call it my portfolio. And then I'm gonna city into that. Um, so we want some hairs, and I can go ahead and close in this report. So you gonna copy this year old? I'm gonna say, get blown. This your URL and I want to put it into this. Follows, um, but not here in the end. Okay. Someone sits here, I can do it. A nice little A to display all the fans that we have here. Okay, this is the first tour that we're using here is get. So if you have never used get than I would recommend you reading a bit more about it on mine. So the first thing we're gonna do is we're gonna check out a new branch. So you're gonna get a new Brian tree going to call it, um fault. Uh, my boat. I told you, we're gonna, uh, base it off. Origin Master. Okay. So knife, get branch. It's going to say that we are the my portfolio branch, which is good. Okay. Says the next step is we want to install all the packages that are required for hap. So if you open up this folder in your finals and you'll see all the files Was this reports ? Let's go ahead and open this with Adam so I can just drag it into Adam and then this Take a quick look at all the 1000 we have in here. So first off, we have a package with Jason. That's a basic thousands you're having all in most tubs for projects and which allows you to tell NPM which dependencies are required. So we have a bunch of dependencies here. That's all the packages that we're gonna need. So figure about him. A terminal. I could just say npm stall on. This is simply going. Thio added no models folder here, which contains all the dependencies of where that are required for this. I said something that I would like you guys to install its because we're gonna be working with JSX files. So if you never what was reacting? JSX. Then I would recommend you to open your preferences. Here in Adam, go to install Andan search for Able nine bridge. I'm just unsolved this guy here. Okay. On double. Very simply allow you when you open at six. Fellow like this one? Um, it will highlight Also syntax exit. So it's nice and color than you don't have to stay at a black and white screen. Okay, so So I was that was it for the first part of this total. 3. Part 2: Getting started with React: All right. So now that we have all of her dependencies and sold and all of our software ready, let's go back to our folder. And on the only to do to stop running this up is to npm start. If I look into my practice drop Jason file here. Ah, this is a scripted that's gonna run. So we're going to start a Web pack server. What? What back there to do is it compiles all your source code into a bumble Such a browser can execute. Okay, so if I just go ahead and do this, you'll see that it's gonna stop. Had local server running here, local host 80 80. And it's gonna tell you, like how big the bumblers on on the modules that it put in there? Um, yeah, as your notice, it also open up a browser window for you directly. So you didn't have to do anything and forces on it already comes with a bit of content here , which is part of the base. Okay, so now how does all this work? So let's open up your pages on home. So this is very simply how you Brenda is a very simple react component visited only contains at Div with a class on on each one. So if you're not family, it was just sex at all. Then it'll look a lot like html on it. Pretty much is, uh, except you should be a bit careful because a Cypriot JavaScript all that all of this that looks like Osama gets compiled into JavaScript. So, for example, some of the attributes here you'll see the dim bears. JavaScript names roses on the HTML. So it's not diff class. It's class name Andi. If you haven't ad on element than you have to make sure to close it after those words is gonna complain. It's not issue. So once again, if I add an element, then you want to have self closing. Are close. It exists. Okay, so now that we have a little ab running, let's see, how do we add anything to it? So if I want to add something to my home page, it's adult paragraph here. I'm going to say is this is the home page on. I didn't do anything and the paper refreshed. That is because Weapon Detective that there was some changes to our files on it generated a new battle here. So you can see on was up. You're doing anything every time you make a change, That's a second paragraph. It just says another power graph. So what happens is every time you hit, save was a foul is gonna change. That's gonna notify *** and what back is going to notify your browser by sending a signal to it. So you browsers just listening to changes. So you don't Every time you change something in your code, you don't even need to to refresh your browser anything. It's just gonna be refreshed. That's a very nice thing about. And that's future off, Westpac. Okay. And so is the ways this ah boilerplate is set up is we have some elements here. Elements. I've just like sub page components, basically something something I haven't alert have a button. So if I want to, like, add a button to this page, let's just go ahead and add a button on. Want to say press me? Okay. And now, each time you add of those custom elements to your page in jail, like you need to import them first, so I'm gonna say import button from and then the past. So elements slash Okay, Knife hit. Save. We should have a bun on the page. I get have a good okay on, But this pretty much it now you can get ahead on right, out based structure for yap on in the next video. I'm gonna go over how the routing work in this boilerplate. 4. Part 3: React Routing: So now that we have an act with a bit of content hair Well, so we already have a couple of pages here, so it navigates and you can directly seaso so like hundreds this way. So the way it works is we actually using React rather so wrecked about it. I'm here is a dependency, and that's what allows us to navigate between pages in, you know, react up and in this directory. So I have have a bit of a special set up, which is that the habit pages repo here? Not not every react project is structured like this, but you constructed it however you want. But I like to have a pages directory which contains a list of my big pages module. So however you wanna Colton and then I have an index here which exports Honore, which add some metadata around those pages, for example, have a pass as a component. I have the town description. Imagine, like, what about other pay specific singers? Have we want to add to this? So what? This does this face on the hair family home page on the navigators about you'll notice, said the title of the page changes here. So how does that work that is in our rock rapper here, you There's a little of proposito brought which allows you to every time you change the page. Then we're going to update the page title on, but also gonna see if we need to touch any specific data for this page. So I have a custom function here which says that if you have ah, pre load method on your in your page description here than this function is gonna bran on, it's going to try and fetching data, but we're gonna go into this a bit later. For now, I just want to build a very simple up without any That's inferno slowed it, right this thing. And then the second thing you'll notice is in this Abdel JSX were using ah, reactor brought a switch. What switch does? It's just gonna its rate over each patient. So we map of ah, pages. So it right over each of these patients from this file and for each observes, it's going to generate a route to which we're going to give a pass. I'm gonna say, if it's an exact match or not, if you want to have, like, done any viable say something to you. All we can do is up, and then I'm just gonna wrap each route with my rock rabbits. That it's gonna handle this preloaded function on Otto's are things that we're gonna need on That's pretty much a done It's gonna branded this rounded components. So if you notice here around a component that was our short JSX component that we have here so that, for example, this which is which can be a simple function which returns JSX Oh, you can make it into a more complex, very component which loads data on all this kind of stuff. Andi, that is it falls a broadly 5. Part 4: Adding content and styling: now that we have seen houses react at works and that we can add different pages, let's go ahead and just add a quick patience is so I want to add Paige, I want to call it Let's say put full year. I thought Folio on this is gonna be a new component that we're gonna called portfolio excited. It's fine. Uh, Tyler's gonna pull it for you on, so we're gonna important your portfolio components. So, you know, this has had saved. So if I check out what Wen packets doing, it's going to give an error because it's trying to find a component that doesn't exist yet . I'm just gonna go. I had a copy of this home component so I can duplicate. I'm gonna call it put full year, okay? And I just want to update the name of this company just for clarity. I'm gonna call it pulled four year on. I'm gonna call title portfolio again. Okay, So neiffer hit. Save weapon notices. Changes on my brother is updated on. We have a port for your page up here. All right, So now let's go ahead and add some content to this. So I have a few 1001 shown that portfolio here. Some gonna go ahead and copies owes on. I'm gonna go into my portfolio directory. This is a handy command. By the way, if you're on a Mac command shift, G will open up this past finders weaken directly, right your past instead of having to click to it. And then I'm gonna put my files in image directory must inside static in in my portfolio. So static image on. Here we go. So now I'm just gonna a seven more to add a section was an image on gonna put Ah, a source of the image is going to be the image Project one. PNG. All right. I'm not just gonna add a few of those products, too. Product. 345 six and seven. All right. No, I'm just gonna good his brother on. Here we go. I have my portfolio up and running and I can click through different tabs. Okay, so now we want to add a bit of styling. Is this? But it doesn't look very pretty yet. So how does styling work in this react? Bullet plates. So inside the source directory, you don't know this along with pages and elements. You also have a styles folder. So in the styles you have, SCS has files which are pretty much like CSS. So hopefully your bit family have a CSS already. But for now, the main difference between s CSS and CSS is that s CSS allows you to mess style. So, for example, here, if I want to say, is that an ally instead inside of a navigation class should have a magan of five pixels. And instead of having to bribe down a new class and call it navigation, Allied exists Weaken just nested inside of it s yes, it was gonna handle this job for this. So I just want to move this into your foul. Let's call it based on this USS, I'm gonna pace in. And here I want to add a bays. Okay? And now I want to add some custom style to my AP, so I'm gonna add a newfound gonna call it Don't for your ongoing create and foul gold Port Folio s CSS. You know, I want to sell my portfolio classic from my portfolio component and added a class name for four unit. If I'm pretty handy to have a last name of the same name as a component that just makes it easy to find Where you at when you cut the source code when you start when you stop growing ? Okay, so on this port for young want to style the title that say that I just want to put a color on it, and I want to set a color better way. If you want to use a little color, pick our recommended good to you settings. And it's still a peckish cult. Qala Pekka with a dash. Yeah, so you can just insult this guy here. And then when you have that, you can just press command shift c inside anyone a CSS file, and you'll just be able to pick a color. So that sound to make this purple OK on. Now, that's refresh on this page. Looks like we have the error here. Failed to find the port for you. Okay, let's see if it okay. All right. So have I guess And I would have started stylings this All right, so I don't I don't really like this purple color after all, but let's go ahead and style this navigation a bit more. So maybe we want Teoh business. This navigation should the fixed. So I want to You have it on top of the page. I'm just going to say, spent the forward. So that's your right zero back, cola. Maybe it's gonna be, like light of wire to something. Okay on. Gonna add some planning to this. Um all right. When then that's add some padding to the top, off the pages safe. Open up at you Don't see that the content is right. With a content class s I can just at some patting to this ad. Some putting top put like 100 pixel to give it some space. Okay, so now our, uh, navigation here is gonna stay on the top, and it should. This goes back to the base navigation. I forgot to set top Sierra. Okay, here we go. Okay. Now we have the condition, which is just taking on the top of the page exists on Let's go ahead and start. This little button here doesn't look very pretty so far. So I expect this will see the bun has a button classic. I'm just gonna gives us some style. I'm gonna penny five peak. So wrong color. Pick a nice color for this bun. So the text is gonna be wide on the See how that looks okay on. This is how you can create a quick portfolio in a few minutes. 6. Final: thank you for watching. I hope you enjoy assists, reactive toil and how to build a quick interface. Whether it's a website for your portfolio. It's a landing page for your style up on whatever it is that you're trying to build. And I'm looking forward to see what you're going to share in the project gallery. Um, so, yeah, that's it on for the future videos, I think it will focus on how to deploy this free app to the cloud on. I'll put me make a video about how to do some more stalling disharmony, animation for your website on stuff like that. So keeping person. If you have any feedback on what I should do, then I'm looking forward for that. Thank you.