Lær Reager med dette massive 48-delede kursus oprettet af en topteknologisk skole

Lige siden vi begyndte at oprette kurser på Scrimba, har vores brugere bedt os om et ordentligt introkursus om React. Så da vi endelig kom til det, besluttede vi at gøre det til vores mest omfattende kursus nogensinde.

Det hedder Lær reagerer og indeholder i alt 48 kapitler - en blanding af forelæsninger og interaktive opgaver.

Kursusstart?

Vi har gået sammen med @bobziroll på @VSCHOOLHQ og oprettet en? kursus om Reager på @scrimba_com. Det er enormt med i alt 48 kapitler, og det er også fyldt med interaktive udfordringer.

Venligst RT, hvis du tror, ​​at dine tilhængere måske kan lide det! // t.co/7pVHxPGkaz

- Per Harald Borgen (@perborgen) 28. november 2018

Dette er det mest omfattende introkursus, der nogensinde er oprettet på Scrimba. Den indeholder i alt 48 kapitler - en blanding af forelæsninger og interaktive opgaver.

Manden bag kurset er den fremtrædende lærer Bob Ziroll. Bob er uddannelsesdirektør ved V School, en teknologiuddannelsesskole, der underviser i full stack Javascript- og UX-kurser.

V School er en af ​​de bedste kodende skoler i henhold til Course Report, så vi er meget glade for at gå sammen med dem.

Så hvis du kan lide dette kursus, skal du sørge for at tjekke V Skolernes fordybende full-stack-program. Lad os nu se på, hvordan kurset er lagt ud!

Del 1. Intro & filosofi

Bob har undervist i bootcamps siden 2014 og har udviklet sin egen læringsfilosofi. Så i den første screencast bliver vi bekendt med denne filosofi. På billedet nedenfor kan du se kernen i det.

Del 2. Hvad vi skal bygge

I den næste video giver Bob et overblik over kurset, hvor han giver os et hurtigt blik på to projekter, vi skal bygge: en simpel opgaveliste-app, der dækker mange React-kerneemner; og et capstone-projekt, som vil være en app til meme-generator.

Del 3. Hvorfor reagere?

Første ting først, Bob fortæller os, hvorfor vi endda skal overveje at bruge noget som React i stedet for bare at skrive det i almindeligt JavaScript, og hvorfor så mange udviklere allerede valgte at bruge React.

Del 4. ReactDOM & JSX

I denne screencast springer vi direkte ind i kode og skriver vores Hello World ved hjælp af JSX - en React-specifik JavaScript-udvidelse , så vi kan skrive HTML og JavaScript på samme tid!

import React from "react" import ReactDOM from "react-dom" ReactDOM.render(

Hello world!

, document.getElementById("root"))

Bob dækker også hurtigt et par gotchas, som korrekt React-import, og som JSX ikke kan lide, når du prøver at gengive to tilstødende elementer.

// Hm, not sure which element I should render here... ReactDOM.render( 

Hello world!

I'm a paragraph

, document.getElementById("root")) // This is much better! ReactDOM.render(

Hello world!

I'm a paragraph

, document.getElementById("root"))

Del 5. ReactDOM & JSX-øvelse

Dette er vores første øvelse af dette kursus. I praksis screencasts sætter Bob os et mål og giver os et par tip.

Bob opfordrer os til at bruge lidt tid på at tænke over og arbejde os igennem denne og efterfølgende udfordringer, da jo mere indsats vi lægger i, jo mere kan vi huske om React.

I sidste ende viser Bob og leder os gennem løsningen, men denne blog giver ikke nogen spoilere? Så er du velkommen til at tjekke den ud i den aktuelle screencast.

Del 6. Funktionelle komponenter

I denne rollebesætning giver Bob os et hurtigt overblik over funktionelle komponenter.

import React from "react" import ReactDOM from "react-dom" function MyApp() { return ( 
    
  • 1
  • 2
  • 3
)} ReactDOM.render( , document.getElementById("root") )

Vi definerer MyApp()som en simpel JS-funktion, der returnerer et meget simpelt HTML-listeelement, men det er her, React skinner igennem, da vi senere bruger denne funktion som HTML-element!

Del 7. Øvelse af funktionelle komponenter

Tid til lidt mere øvelse.

Så ligesom i den tidligere praksisbesætning, vil der ikke være nogen spoilere her, men du er velkommen til at hoppe lige ind i koden og komme med din egen løsning. I sidste ende går Bob os igennem det som før.

Del 8. Flyt komponenter til separate filer

I dette kapitel giver Bob os et par gode og almindelige React-metoder til at organisere kode, for eksempel at navngive filer med komponenter, der er MyInfo.jsde samme som selve komponenten .

Vi lærer derefter, hvordan man udpakker komponenter i deres egne separate filer, og hvordan man eksporterer dem til senere brug i vores app.

// MyInfo.js import React from "react" function MyInfo() { return ( // component code ) } export default MyInfo 

Vi kan så bare placere vores komponent i componentsmappe og importere tilindex.js

// index.js import React from "react" import ReactDOM from "react-dom" import MyInfo from "./components/MyInfo" ReactDOM.render( , document.getElementById("root") ) 

Del 9. Forældre / barnekomponenter

I denne screencast taler Bob om komponenter fra forældre og børn. Almindelige applikationer er langt mere komplekse end blot en komponent, der gengives til DOM. I stedet har vi normalt et komplekst hierarki af komponenter.

Vi starter med at skrive vores funktionelle komponent, som vil være øverst i komponenthierarkiet

// index.js import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(, document.getElementById("root")) 

Og i sig App.jsselv:

// App.js import React from "react" function App() { return ( 

Hello a third time!

  • Thing 1
  • Thing 2
  • Thing 3

This is where most of my content will go...

) } export default App

Som du kan se, kan vi skrive vores sider ind, men det besejrer formålet med React. Vi kan tage hvert stykke HTML og lægge i en separat komponent.

Sådan ser vi ud:

I React angiver HTML-elementer, der begynder med et stort bogstav, en komponent, vi oprettede

Ved hjælp af dette koncept ville vores komponent se sådan ud:

import React from "react" import MainContent from "./MainContent" import Footer from "./Footer" function App() { return ( ) } export default App 

Dette er meget bedre, og det er en meget pæn måde at organisere kode på.

Del 10. Praksis for forældre / børnekomponenter

Det er øvelsestid. Her er den opgave, vi får fra Bob, så lad os komme i gang.

Som sædvanlig er der ingen spoilere i denne blog, så du er velkommen til at dykke ned i løsningen i Bobs screencast.

Hvis du ikke er meget sikker på, hvor du skal starte, anbefaler Bob at se først på de foregående kapitler og forsøge at finde en løsning, selvom det ikke er perfekt på dette tidspunkt. Dette ville være den bedste måde at lære på.

Del 11. Todo-app - fase 1

I orden! Tillykke, vi har mestret det grundlæggende i React, og dette fundament er nok for os til at begynde at bygge vores første virkelige app.

Først skal vi skabe en struktur til vores app, og det er en perfekt mulighed for at øve det, vi har lært i de foregående screencasts. Her er opgaven, og lad os komme i gang.

Nu skal dette være ret ligetil, og Bob går igennem løsningen med os.

Del 12. Styling Reager med CSS-klasser

I denne rollebesætning introducerer Bob os til styling i React. Der er et par forskellige måder at style komponenter i React på, og vi starter med CSS-klasser, da dette er den, de fleste af os burde være fortrolige med.

Lad os starte med et simpelt eksempel. Strukturen i dette eksempel er den samme som i det foregående kapitel.

I React ligner det meget almindelig HTML, men i stedet for skal classvi bruge className:

function Header() { return ( This is the header ) } 

Mange steder vil fortælle dig, at vi skal skrive, classNamefordi det classer et reserveret ord i JS, men sandheden er, at under emhætten bruger JSX vanille JS DOM API.

document.getElementById("something").className += "new-class-name" 

Nu kan vi bare skrive almindelig CSS:

Del 13. Nogle forbehold

Som en sidebemærkning fortæller Bob os bare om bestemte stylingsvalg, han personligt foretrækker, så vi er opmærksomme på, at der er en anden måde at gøre ting på. Hvis du ønsker at skrive kode lidt anderledes, er du mere end velkommen til at gøre det.

// Bob likes to avoid semicolons, where possible import React from 'react' // but there is no way to avoid them here for (let i = 0; i < 10; i++) {} // Bob prefers regular functions function App() { return ( 

Hello world!

) } // Although you can write ES6 arrow functions if you wish const App = () =>

Hello world!

Del 14. JSX til JavaScript og tilbage

Før vi går videre, skal vi virkelig undersøge, hvordan JSX og JS spiller sammen. Vi ser, hvordan vi i vores JS-funktioner returnerer noget, der ligner HTML, men som er JSX.

Hvad nu, hvis vi ville bruge en variabel? Vi kan gøre det ved hjælp af {}:

function App() { const firstName = "Bob" const lastName = "Ziroll" return ( 

Hello {\`${firstName} ${lastName}\`}!

) }

{}er en måde at bruge almindelig JS i JSX på. På almindeligt sprog ville det se ud

This is JSX {now we're writing JS} and we're back to JSX

Del 15. Indbyggede stilarter med stilegenskaben

Et meget hurtigt trick til at anvende stilarter i React er at bruge indbyggede stilarter.

Hello World!

Læg mærke til, hvordan vi bruger sæt krøllede seler {{}}. Dette skyldes, at React forventer, at stilarter sendes som et objekt, men så er vi også nødt til at fortælle JSX, at vi bruger JS-objekter.

Der er dog en gotcha.

// This is going to error 

Hello World!

// This is what we need to do, because JS doesn't like dashes in the // middle of our property names

Hello World!

Del 16. Todo-app - fase 2.

I denne screencast vil vi fortsætte, hvor vi slap med Todo-listen. Til at begynde med beder Bob os om at oprette komponent ved at udtrække følgende kode i den.

Placeholder text here

Og nu kan vi tilføje lidt styling og have en pæn todo-liste. Snart skal vi lære at tilpasse teksten inde i

Part 17. Props Part 1 — Understanding the Concept

Let’s look at some plain HTML and think what is actually wrong with the elements.

This is a link 

None of them actually do anything important. We really need to add these attributes to our elements.

This is a link 

A lot of times these attributes are called properties and if this HTML concept makes sense to you, then you understand props in React. Since we’re creating our own components we can allow props to modify the way our own components act.

Part 18. Props Part 2 — Reusable Components

In this cast, Bob takes us to YouTube to illustrate the concept of reusable components on a simple video tile. If it were created in React, we wouldn’t just copy-paste one tile across the whole page, but instead, we might create a single tile and make sure that it can change depending on the different properties such as the image URL or the title.

Part 19. Props in React

In this screencast, Bob will show us how to combine the props concepts from Part 17 and 18 of this course and he created a basic contact card list app for us to practice on.

To start, it would be really nice, to create a component for a contact-card and learn how to make it dynamic so we can reuse a single component for all of the cards.

A very React way to use the contact card would be:

// App.js ...  ... // instead of 

Mr. Whiskerson

Phone: (212) 555-1234

Email: [email protected]

Let’s create ContactCard and use props to dynamically show data.

import React from "react" function ContactCard(props) { return ( 

{props.name}

Phone: {props.phone}

Email: {props.email}

) } export default ContactCard

Part 20. Props and Styling Practice

Right, let’s practice! Just like in the previous practice casts, here’s your task:

And as it’s now our tradition, to avoid any spoilers and to really learn React, dive into Bob’s walkthrough.

As always, try to crack this task on your own, and feel free to refer to previous chapters as they contain everything you need.

Part 21. Mapping Components

So from the practice session, you might have noticed that we repeat a few components and might have wondered if there is a way to write it only once. Of course! We can use JavaScript .map to help us achieve this.

function App() { const jokeComponents = jokesData.map(joke => ) return ( {jokeComponents} ) } 

Let’s just quickly break apart a few things here.

Very often our data would come from an API, so to imitate it we’re using jokesData to pretend that it has all the data we need.

const jokesData = [ { id: 1, punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally." }, { id: 2, question: "What's the best thing about Switzerland?", punchLine: "I don't know, but the flag is a big plus!" }, ... ] 

You might have also noticed in the key prop. This is really a React requirement, that whenever you’re creating a component over and over you need to pass a key prop with some unique parameter. Most of the time it’s an id which you get from your API.

Part 22. Mapping Components Practice

Time for another practice cast. Here’s your task, and Bob was also kind enough to create some boilerplate code for us, so we don’t need to create that much from scratch.

As always, feel free to walk through the solution with Bob, but do try to do it yourself first.

Part 23. Todo App — Phase 3

Let’s now apply what we’ve learned about mapping and props and make our todo list more dynamic. We can now map item data and render for every item of data we have.

And also use the data as props to and place it where we’d like within the component itself.

If at this point you notice the following error, Warning: Failed prop type: You provided a `checked` prop to a form field..., don’t be alarmed — we’ve done everything right. Bob will show us what it means and how to solve it in part 31 of this course.

Part 24. Class-based Components

In this chapter, Bob introduces us to class components in React. Sometimes functional components we’ve been using so far are not enough and their functionality needs to be extended.

We will learn more about the underlying differences later, but for now look at how they differ syntactically and try to convert our from a function to class component.

class App extends React.Component { render() { return ( 

Code goes here

) } }

Part 25. Class-based Components Practice

Some more practice. This time we get some code written for us and we should practice converting functional components to class components. In this practice we also have a little bug hidden in the code, so let’s find it.

As always try to finish this practice by yourself first and then follow Bob’s walkthrough. See you in the next chapter!

Part 26. State

State is one of the most important parts of React. It’s the data that the component itself maintains. props cannot be changed by a component receiving the props, but state can! So we might want to use state when a component itself needs to change some data. For example, when we click a button, some text in our component changes colour.

A component needs to be a class component to have state and we need to have a constructor method.

constructor() { super() this.state = { answer: "Yes" } } 

And then we can use that data in our return and display our data inside JSX.

Part 27. State Practice

In this practice session we have some debugging to do.

Quite often we need to be fixing some issues in our code, so it’s a very useful skill to practice. If you’re stuck, feel free to look over some of the previous chapters before following Bob’s solution.

Part 28. State Practice 2

State, as we mentioned before, is a super important concept, so Bob included two practice lessons for us.

This one might be quite tricky, but do give it your best shot and then have a look how Bob does it.

Part 29 Todo App — Phase 4

In this short cast, Bob shows us how to use state in our Todo App.

Part 30. Handling Events in React

Event handling is essentially allowing a user to interact with your web page and do something specific when something like a button click or a hover happens.

Let’s look at a simple example of executing this simple function.

function handleClick() { console.log("I was clicked") } 

You might already be familiar with how it’s done in regular HTML:

Click me 

React is very similar.

Click me 

The difference would be that event name onClick is in camelCase and handleClick is JS passed inside our JSX as we mentioned in lesson 14 about inline styles.

Part 31. Todo App — Phase 5

In this cast, Bob gives us a challenge. Remember the warning we get in the console about ‘checked’ prop? In order to solve it we need to provide onChange handler. At this point, just let it console.log anything you fancy.

Just like with all the usual challenges — jump to the cast to see the solution.

Part 32. Changing State

We can update state in a component using React’s setState() method.

Let’s look into how we might use it on a very popular example — a counter.

At the moment when you click the “Change!” button, nothing would happen. Let’s implement our handleClick() method. We first begin with us just trying to display a different number:

handleClick() { this.setState({ count: 1 }) } 

and pass it to our .

Change! 

If we run this, we will get Uncaught TypeError: Cannot read property ‘setState’ of undefined. This is a very common error, and one of the ways to make our handler work is to bind it.

constructor() { super() this.state = { count: 0 } this.handleClick = this.handleClick.bind(this) } 

Now we want our handleClick() method to be dynamic and actually add 1 to whatever our current state is. Luckily, React provides us with prevState so we can compare states.

handleClick() { this.setState(prevState => { return { count: prevState.count + 1 } }) } 

Part 33. Todo App — Phase 6

In this part we are going to make it so when we click the checkbox, it’s going to change our state and tick/untick the checkbox when required. Bob warns us that it’s a tricky part of the app and sounds deceptively simple. As a challenge let’s try to implement it ourselves first, but no need to worry if something doesn’t quite work — Bob’s got our back with a walkthrough.

Part 34. Lifecycle Methods Part 1

One of the nice things about React is how we essentially write vanilla JS and React takes care of a lot of thing behind the scenes. There are a number of these “behind the scenes” events that happen to a component. It’s more like a set of milestones in a life of a component, so they are called lifecycle methods. Bob is going to cover the most popular and important ones in this and the following chapters.

The first one you already know is render(). Its job is to determine what gets rendered to the screen and React calls render() when something changes like state or props.

The next one is componentDidMount() which is essentially like ‘component is born’. This method is called when the component lands on a screen. This is a good time to make API calls.

A third very interesting method is shouldComponentUpdate(). Sometimes React would update a component even if nothing seemed to change. This might become very expensive in some cases and this method gives us, the developers, a chance to optimise our application.

And last method in this chapter is componentWillUnmount() and is a place to clean up right before your component disappears from the user’s screen. You can remove event listeners or cancel API calls.

Part 35. Lifecycle Methods Part 2

In this chapter Bob very quickly covers some of the deprecated lifecycle methods, which you might see in some legacy React applications and he also covers some really rare methods, like getDerivedStateFromProps() and getSnapshotBeforeUpdate(). But we won’t be covering them in great depth as they are not essential to this course.

Part 36. Conditional Rendering

Sometimes you want to display some data or render some JSX only at a certain condition. That’s when we use conditional rendering.

One of the strengths of React is that by using vanilla JS we can preserve its flexibility to write our own code. The downside to this is when you’re learning React, there might be too many different ways of doing the same thing. Conditional rendering is one of them. Bob will show us a few ways to do it, but rest assured, there are as many ways as React developers.

Let’s create a component that renders “Loading…” when a page is loading. We can use it in our app in render method.

render() { return ( ) } 

We can achieve our goal by using simple if-else from JS:

Or we can improve it with the latest ES6 ternary operator.

Part 37. Conditional Rendering — Practice

Let’s now practice. Conditional rendering is one of the essential tools in any React developer’s toolkit.

Try to give it your best shot before walking through the solution with Bob.

Part 39. Todo App — Phase 7

So we’ve reached the final part of our Todo App and we just need to finish off the final styling part and we’re done! The challenge for this part would be to make a completed look different. For example, with greyed out text and/or background, turning text to italics. As one of the solutions, Bob will show us how to do it, but ultimately it is really up to us.

Part 40. Fetching data from an API

In this cast, Bob provided us with a bare component to learn more about fetching.

In chapter 24, we learned that one of the most common use cases for componentDidMount() lifecycle method is to get data from somewhere so our component can do whichever task it’s supposed to do.

In this example we will use a free Star Wars API to fetch some names of characters. Let’s write our componentDidMount() method, where we’re going to fetch some data and just console.log it.

componentDidMount() { fetch("//swapi.co/api/people/1") .then(response => response.json()) .then(data => console.log(data)) } 
Data we got from the API call

Data we got from the API call

Alright! So we just need to grab name from that data and store it in our state to then just display in the component. In the end our should be:

There are a few interesting tricks we can learn from Bob.

It’s good to create a loading boolean on state. In case our request takes a long time, we can just inform a user that the request is processing and their data will be with them shortly.

We create a separate variable text in render() where we do all of our logic and we just have a very clean return(), so it’s easier to understand for the next developer who maintains our code.

Part 41. Forms Part 1

In this cast we’re going to explore how forms are created in React. Forms are actually a really tricky part of React. First thing, if you haven’t completed the challenges from parts about state in React, this would be the best time to catch up. And as a primer to forms, Bob recommends to read the official React docs about them.

In vanilla JS DOM API, you create an HTML form. Once the user decides to submit, you gather all the data from your forms, pretty much at the last second, and validate it before you send.

React advocates for you keeping a track of your form data as you go along, by saving it in state. On every keystroke you have the most updated version of the form saved in the state of your form component.

There are 3 key parts to forms in React:

  • Input — when the user updates input we fire event handler (line 20)
  • Event handler — updates state with data from the user (lines 11–15)
  • State — storage for your data (lines 6–8)

For a more complex example, where Bob shows a few neat tricks on making forms very reusable and the code very readable, jump into the screencast.

Part 42. Forms Part 2

In this part, Bob further expands our knowledge about forms. Forms can handle more than just ! But things might get tricky. We learn how to deal with , and for dropdown menus and expand further on to learn more about checkboxes and radio buttons.

Part 43. Forms Practice

Great, now it’s time for some practice.

Bob sets out a new challenge for us and as usual it’s best if we try to solve it on our own first.

If there is something not quite working out, Bob always has our back with a great walkthrough.

Part 44. Container/Component Architecture

In this cast Bob introduces a very popular React architecture pattern.

Very often when we write complex components, we eventually end up with a lot of lines of code in one file. We then start scrolling up and down to add extra functionality and display logic. That’s when Container/Component split becomes useful. We separate our UI and business concerns into different components in React. There are a lot of different terms around: smart/dumb, container/presentational, all of these refer to the same idea of separating rendered elements from data flow functionality.

In our specific example, we can implement container/component pattern if we extract our HTML from render() method into a separate functional component and our Form.tsx becomes FormContainer.tsx.

As you can see, we still pass our handlers and data as props into our functional and inside the component we now call handlers and data via props.

Part 45. Meme Generator Capstone Project

You made it! Congratulations on reaching the capstone project. In this cast Bob sets out the ultimate challenge. We can now create our own app, from scratch.

If completing the whole project in one go feels intimidating, Bob sets mini walkthrough challenges in the screencast to guide us through the completion.

Good luck and happy coding!

Part 46. Writing Modern React Apps

Well done! Your project is now ready and you can show it to your friends and family! It is truly something to be proud of. Great job!

In this cast, Bob gives us some advice on how to keep up with all the changes in the React ecosystem and gives us a few tips on how things we’ve learned so fa could be done slightly differently, like using ES6 arrow functions or extracting code into new components to improve readability.

Part 47. Project Ideas for Practicing

In this cast, Bob discusses where to go from here, where the course ends. There are some ideas, and good articles to read about how to practice what we’ve learned.

Part 48. Conclusion

Congratulations, we’ve made it! In this cast we quickly sum up what we’ve done in this course and outline what we can learn in the future.

Thank you so much for the course, Bob!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.