Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 27, 2022 03:57 am

Learn React 18: The Complete React Developer Course


React is the most popular framework for building user interfaces. In this course you will learn the fundamental concepts you need to start building applications with React.






This course is 3 hours 40 minutes long, and it’s split into 27 lessons in total. You’ll find it’s a great resource that you will come back to often so make sure you bookmark the parts that interest you. 



Who is This FREE Course For?



  • Designers who want to branch out

  • Programmers who want to expand their expertise

  • Anyone who wants to learn something new and exciting




Follow Along, Learn by Doing


I encourage you to follow along and to do exactly what I do on screen. This way you learn by doing.


To help, the React course GitHub repository contains the source code for each lesson and the completed sample project that was built throughout the course. 




1. What You Will Learn in This Free React Course


You'll start of with the basics of React—coding your first components:



  • using React with vanilla JavaScript

  • the basics of the React Toolchain 

  • the rules of JSX and how to use it to build components 


Then, you'll learn the most up-to-date methods to coding components with hooks, state, props, and events.



  • using props to pass parameters to components

  • how to validate props and provide default values for them

  • using state in components

  • how to handle DOM events and create your own custom events for components

  • using hooks within your components 


In the final part of the course, you'll learn some key skills for building real-world applications with React



  • using React with forms

  • styling your components with CSS modules 

  • connecting to an external REST API

  • building a single page application with React Router


By the end of this course your will have the confidence and know how to build your own React-powered apps!



2. React With No Toolchain


Building Your First React App


Watch video lesson [0:02:19] ↗


It's possible to build applications with React without using any toolchains—just the React library and pure JavaScript.


To follow along, all you need is a source code editor like Visual Studio Code and the React CDN links.



Introducing Components


Watch video lesson [0:12:20] ↗


React applications are built with components. You'll learn what components are and how to create them with the React library.



To keep with tradition, let's create a Hello World component:




3. React With Tool-Chain


Setting Up Your Environment


Watch video lesson [0:18:46] ↗


To use React with a tool-chain, you'll need to install Node.js on your computer. This will give us access to NPM, which will make it easy to install all the React dependencies.


Once you've installed Node, you can install and run the create-react-app tool with the following command:



This will give you the source code scaffolding for a React application named react-fundamentals, ready to go with an up-to-date toolchain. Once you have created your app, just run npm start to compile and run your app in the browser with live reloading.




Introducing JSX


Watch video lesson [0:23:09] ↗


You can build a React app with pure JavaScript, but with JSX it's much easier. JSX is a special syntax that allows you to combine JavaScript and XML to quickly code components.


There are some rules you need to follow if you use JSX, and you'll learn what they are in this lesson.



Starting From Scratch


Watch video lesson [0:32:40] ↗


I always find it beneficial to start completely from scratch. So in this lesson, we'll do just that.


Using Fragments


Watch video lesson [0:40:28] ↗


Since components have to return just a single React element, sometimes it's useful to use a React Fragment. You'll learn the different ways to express a fragment in this lesson.


Separating JavaScript and JSX


Watch video lesson [0:51:28] ↗


Using JavaScript with JSX lets you write cleaner components with more complex data processing and logic.


Even though we're in this new paradigm, we still want to separate our JavaScript code from our JSX. JSX should be expressive, and you'll learn how you can do that in this lesson.



React does not aim to separate markup and logic by placing them in separate files. Instead, it relies on components to split your UI into multiple entities which can function independently. It is our job to keep our logic separate from the markup within the component. The best way to do so is to set everything up in JavaScript beforehand and use JSX to then create our UI based on the final data.




4. Working With Data


Passing Data With Props


Watch video lesson [0:59:30] ↗


In React, we primarily use props (short for properties) to pass data to our components. 



The easiest way to understand props is to think of them like the attributes that you can pass to HTML elements in web development. However, props are much more advanced.


Validating Props


Watch video lesson [1:06:57] ↗


Props are not validated by default—you have to opt in to validate your props. It's more of a development and debugging tool than anything else.


Providing Default Prop Values


Watch video lesson [1:15:37] ↗


Defining default values for your props can be beneficial. You'll learn how to in this lesson.


Getting Started With State


Watch video lesson [1:20:14] ↗


State is used to manage information or data within React components. Unlike props, the state data can be changed throughout the lifetime of the component.


State is how React knows to re-render components. I'll introduce you to state in this lesson.



Handling DOM Events


Watch video lesson [1:29:23] ↗


Events are vital to any graphical user interface. I'll show you how to handle native DOM events in this lesson.


Writing Components as Classes


Watch video lesson [1:35:08] ↗


Traditionally, components have been written as classes. We'll convert one of our function components to a class in this lesson.


Using Controlled Inputs


Watch video lesson [1:45:33] ↗


There are two ways to work with forms in React. In this lesson, I'll show you how to use "controlled inputs".


Controlled inputs are those form elements whose value is controlled by the React component state. They are the preferred way of handling form input with React.


Lifting State and Custom Events


Watch video lesson [1:57:21] ↗


A lot of the time, we want to lift the state from a child to parent component. We'll go through that process, and I'll show you how to create your own custom events.


Using Uncontrolled Inputs


Watch video lesson [2:04:33] ↗


A less tedious way to work with forms is with "uncontrolled inputs". I'll show you how to use them in this lesson.


With uncontrolled inputs, we don't have to worry about setting or updating input values so there is no need to create onChange event listeners or use a value attribute. 



5. Styling Components


Styling With Inline Styles


Watch video lesson [2:15:56] ↗


Using inline styles in React isn't a bad thing like it is in regular HTML. In this lesson I'll show you how to use the style attribute for React classes.


Using CSS Modules


Watch video lesson [2:23:15] ↗


CSS module support is provided out of the box with create-react-app. You'll learn what CSS modules are and some of the reasons why you may want to use them. 


Using the style attribute as the primary means of styling elements is generally not recommended. In most cases, className should be used to reference classes defined in an external CSS stylesheet. — React docs



6. Working With External Data


Preparing the Weather Widget


Watch video lesson [2:31:34] ↗


We'll build a real weather widget by using a free weather API. But first, we need to lay the framework for it.



Handling Side Effects in Class Components


Watch video lesson [2:38:46] ↗


Handling Side Effects in Class Components Processes that have side effects, like an HTTP request, should be handled properly. In this lesson, you'll learn about life-cycle events within a class component, and how to use them to fetch external data.


Using the Effects Hook in Function Components


Watch video lesson [2:47:35] ↗


Using the Effects Hook in Function Components Function components don't have life-cycle events; instead, we must use hooks to "hook into" that functionality.


Making Requests in Our Components


Watch video lesson [2:54:41] ↗


Making Requests in Our Components It's time to finally issues HTTP requests to the weather API! We'll use the Weatherstack API.



7. Building Single-Page Applications


Introducing React Routing


Watch video lesson [3:04:10] ↗


We use a package called react-router-dom to provide routing in our apps. You'll learn how to install it and set up routes in this lesson.


Using Layouts and Defining Nested Routes


Watch video lesson [3:14:02] ↗


Layout routes are vital to any web application; they allow us to define the look and feel of our applications within a single component.



Using Route Parameters


Watch video lesson [3:21:38] ↗


Route parameters are the essential way we pass information to route-handling components. You'll learn how to use them in this lesson.


Using Side Effects in Router Pages


Watch video lesson [3:29:40] ↗


It can be a little tricky to use side effects in a route. I'll show you how in this lesson. We'll fetch data from Newsapi.org.



8. Conclusion


React unquestionably changed the way we build web applications, and it's my hope that as I leave you, that you have the fundamental understanding of how to effectively use React to build applications.







FREE
1.6 Hours


Practical React Fundamentals | FREE COURSE





In this course, you'll learn the fundamental concepts of React while building a practical application. You'll practice writeing components, working with events, handling user input, and working with state.












    Original Link: https://code.tutsplus.com/tutorials/learn-react-18-the-complete-react-developer--cms-93008

    Share this article:    Share on Facebook
    View Full Article

    TutsPlus - Code

    Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

    More About this Source Visit TutsPlus - Code