<h2>Introduction to the course</h2><p>React offers a wide range of solutions to every front-end engineer&#x27;s needs. It has a constantly developing and growing community that aims at striving in web development. All that, combined with an efficient and scalable JavaScript library, any complex User Interface is generated in the most straightforward and easy steps. This course will expand on all the ins and outs of React&#x27;s concepts and techniques.</p><h2>Who is this course for?</h2><p>If you’ve interacted with Facebook then you’ve already interacted with its baby –React. Think of everything Facebook offers, feed updates, alerts and notification, and real-time messages from your friends, all thank to React. If you want the huge range of opportunities React brings to the table as a cutting-edge, open-source, and easy-to-learn front-end library, then this course is meant for you.</p>

React

<h2>What does this section cover?</h2><p>React highly supports the logic behind JSX. This in essence entails an unbreakable bond between rendering and User Interface. </p><p>The lesson brings forward the importance and significance of that bond, how it&#x27;s incorporated into React logic and works for the benefit of the developer.</p><p></p>

JSX / DOM

<h2>What does this lesson cover?</h2><p>React components, types of components and their end-to-end coverage induces a fulfilling and efficient application. </p><p>These JavaScript-powered functions return chunks of UI on webpages. Here’s everything you need to know to use them for what they’re meant for as an exceptional user interface provider.</p>

Introduction / First React Component

<h2>What does this lesson cover?</h2><p>React components, each and every single one of them, have a lifecycle. Developers, on the other hand, are given the opportunity to monitor components during their lifecycle.</p><p>This section will uncover those phases and give developers a better perspective on how to work with (change, monitor) components.</p>

Lifecycle Methods

<h2>What does this lesson cover?</h2><p>We&#x27;ll be expanding on the most used approaches of Styling React applications. They are CSS Style Sheets, Inline CSS, SASS/SCSS,  CSS Modules, and CSS in JS. These approaches paired with the right projects help developers achieve the most out of the style of their website.</p>

Styling Components

<h2>What does this lesson cover?</h2><p>Here’s the right way to set up your development environment. In this lesson, you’ll find yourself learning all the intricacies that a once simple one-click installation entails.</p><p>Though, not necessarily complex, evaluating your options and reading the fine lining when installing could save you a lot of time in the future. </p><p>Note, that if developers choose to limit themselves to the one-click installation, they can still work with React. However, a dynamic coding experience requires a little extra.</p>

Installing React

<h2>What does this lesson cover?</h2><p>Every DOM object you encounter in React has its corresponding virtual DOM object. </p><p>This lesson will cover the concept of Virtual DOM and why exactly its use is crucial when working in React, alongside its prominent feature of &quot;virtually&quot; representing User Interface (UI) and how it&#x27;s kept in sync with the DOM. </p>

Virtual DOM

<h2>What does this lesson cover?</h2><p>The way components actually work is an important nuance that developers should not leave uncharted. We&#x27;ll refer to handling and communicating methods with props, in short –passing data with props.</p><p>This specific aspect deems important as it touches on the one-way data flow structure of the component hierarchy. This entails differentiating between child components and parent components.</p>

Components Advanced

<h2>What does this lesson cover?</h2><p>Hooks are one of the most innovative features that React has to offer. React Hooks are a newer concept in React that entails the simplification of using states and more features without using classes.</p><p>In the lesson, we expand on the three W&#x27;s: When Why and Where use Hooks.</p>

Hooks

<h2>What does this lesson cover?</h2><p>Working with new build tools that incorporate tons of dependencies could seem overwhelming to the naked, inexperienced eye. This lesson aims at breaking down the complicated exterior that newbies face when associating with their first-ever React application. After all, React thrives in securing a simple, efficient experience and developers have no choice but to work it to their advantage.</p>

Creating a React Application

Lesson Challenge

<h2>What does this lesson cover?</h2><p>React has the special ability that “forces” you to think about your application as you develop its every feature. </p><p>This lesson tries to explain that power a little bit better by taking you on a step-by-step journey that discovers the logic behind your standard building process.</p>

Thinking in React

<h2>What does this lesson cover?</h2><p>The beauty of React is that a single application can contain hundreds of components and their combination forms.</p><p>This lesson introduces the different ways components interact. Even though components make up a React application, what makes React so exceptional is the way components interact with each other.</p>

Components Render Other Components

<h2>What does this lesson cover?</h2><p>Side effects are a constant bump in the road for developers who work with class-based components in React. Most of the time these side effects can hinder the entire application execution process. </p><p>This lesson uncovers how to act to avoid side effects and where to be cautious about them.</p>

Handling Side Effects

<h2>What does this lesson cover?</h2><p>In React, developers can create isolated components that contain the behavior you need. </p><p>React&#x27;s Conditional Rendering is utilized to create elements that represent the current state, and to insure efficiency, React immediately updates them to match the UI. Conditional Rendering is widely used among developers and we expand on it quite thoroughly in this lesson. </p>

Conditional Rendering

<h2>What does this lesson cover?</h2><p>Most websites nowadays come equipt with some sort of list, whether it be a navigation menu or a timeline list, they&#x27;ve become an inseparable part of the UI (User Interface), hence the importance of Rendering Lists.</p><p>Rendering Lists in React incorporates knowledge of the map method and keys, therefore, we&#x27;ll be summarizing those concepts as well to aid developers with a step-by-step guide on everything you need to know about Rendering Lists.</p>

Rendering Lists

<h2>What does the lesson cover?</h2><p>We’ll talk about the backbone of React flexibility and brilliance in executing UIs. The approach tackles all complexities that could’ve gotten in the way of developer experience but instead work towards its max simplification. The bits of code that bring components to life, React attributes, and the list goes on.</p>

Introduction

<h2>What does this lesson cover?</h2><p>We’ll expand on everything you’d find if you were to analyze React to its core. Components- its lifeline, the DOM, The Virtual DOM, Diffing, and Keys. What you pick up here are the fundamentals of your web development journey with React. Complicated terminology aside, what you see is what you get with React concepts and approaches.</p>

Core Concepts

The Development Environment

<p>In order to use React, you should set up the development environment which consists of the following list of prerequisites:</p>

<p><strong>1st‣ Install NodeJS + npm</strong></p><p><strong>2nd‣ Install React and React DOM</strong></p><p><strong>3rd‣ Install Webpack</strong></p><p><strong>4th‣ Install Babel</strong></p>

<p>We’ll be getting into covering each step in the upcoming lessons for a successful environment set up.</p>

<p>It’s important to note that the long, 4-step installation process does not reflect poorly on the complexity level of React, in fact, these steps make working with React easier in the future.</p>

<p>Webpack, Babel and Node.js/npm are not a requirement, yet they are a recommendation for a better, multilayered developing experience.</p>

Select Correct Answer

<p>What was the list of prerequisites for?</p>

Installing Node.js and npm

<p><strong>Why Install Node.js if I’m working with React? </strong>When installing Node.js developers can use it for hosting/running a web server for React applications. Additionally, the React DOM (which we will talk about later) has elements designed to work with Node.js.</p>

<p>However, the main reason is <strong>Package Management</strong>. Node.js offers an npm (Node Package Manager), meaning you can upgrade packages with ease later on, specifically, since all JS frameworks/libraries just like <strong>React</strong> use npm.</p>

<p>For a slightly more in-depth representation of Node installation, you can check out our Node.js course, but here’s the overview:</p>

<p>The first step would be visiting the official download website, searching something along the lines of node.js in the search bar will lead you to it. Either install the latest version of Node.js or the one in accordance with your Hardware and Software, found under “Other Downloads”.</p>

<p>After a successful installation, set up a react environment that should contain npm. Run the following command:</p>

<p>This command works for the latest versions of Node, which is recommended for a better overall development experience.</p>

<p>Which command should developers run for setting up a react environment with Node?</p>

Install React and React DOM

<p>The main focus is directed at <strong>installing React</strong> and <strong>the React DOM.</strong></p>

<p>Firstly, we’ll create a folder (the root folder named “app”) where we’ll make our react app by installing files.</p>

<p>We’ll utilize the <strong><samp>mkdir </samp></strong>command for this action.</p>

<p>After successfully creating the folder, create a package.json file for developing modules, use the npm <strong><samp>init </samp></strong>command.</p>

<p>Moving on to the essential part, use <strong><samp>install react</samp></strong> and <strong><samp>react-dom</samp></strong> to install React.js. Additional steps include adding those packages to the <strong><samp>package.json</samp></strong> file we’ve created above by using the <strong><samp>--save</samp></strong> command.</p>

<p>In a previous lesson we installed react with the create-react-app command, this quiz introduces an <strong>alternative</strong> method (npm-install-react). Using wither method works fine.</p>

<p>Why do we create a folder before installing React?</p>

Overview of Babel and Webpack

<p><strong>Why install Babel? </strong>The latest ECMAScript is simply incompatible with our browser, <strong>Babel </strong>acts as a toolchain that will convert ECMAScript into a backwards compatible JS version. That entails, syntax and source code transformations, present polyfill attributes, etc.</p>

<p><strong>Why install webpack?</strong> Whenever developers create different elements they stored them in different files. Say, 20 app elements need 20 script files (extreme example, but nonetheless). Developers will have to keep track of all these components, which is efficiently done with webpack.</p>

<p>Webpack will bundle all your files and dependencies and keep track of them.</p>

<p>Webpack trans-compiles ECMAScript to ES5.</p>

Installing Babel and Webpack

<p>Install Babel along with its plugins that are elaborated upon below the syntax like so:</p>

<p><strong>‣babel-core</strong> is the primary engine package.</p><p><strong>‣babel-loader</strong> transpiles the react JSX code in backward compatible js code.</p><p><strong>‣babel-preset-env </strong>supports ES5/ES6 JavaScript.</p><p><strong>‣babel-preset-react</strong> supports React JSX code.</p>

<p>The plugins for webpack are as follows:</p>

<p><strong>‣webpack </strong>is the primary engine for webpack plugins.</p><p><strong>‣webpack-cli </strong>offers a command line tool for arranging webpack plugins.</p><p><strong>‣webpack-dev-server </strong>aids in the development of a live application server.</p><p><strong>‣html-webpack-plugin </strong>creates an HTML template for your application.</p>

<p>What do the babel-core and the webpack plugins have in common?</p>

<h2>What does this section cover?</h2><p>This section scratches the surface of React. With a thorough introduction of its purpose and an overview of all the core concepts, you’ll be taking a peak at the famous User Interface builder and getting to know all its angles. First impressions matter and these lessons warm developers up to the world of React.</p>

Get Started

<h2>What does this section cover?</h2><p>It’s time to get your hands dirty with React, following the introduction, this section serves as a guideline for your first steps. </p><p>We’ll be kicking it off by installing React and finishing off with your first-ever application. A strong start brings forward a productive journey.</p><p> Even though installing an application seems like a no-brainer, this section will prove you wrong. React offers a world of perks, accessing them however takes a little work.</p>

Setup

<h2>What does this section cover?</h2><p>DOM and JSX are the focus of this section. After the overview of DOM and JSX, we&#x27;ll be exploring and defining terms such as Virtual DOM, 2its features, and its contrast to the DOM. </p><p>We&#x27;ll finish off the section with a tutorial on how to think in React, by covering all the steps developers will go over to implement structure in their React applications.</p>

ReactDom & JSX

<h2>What does this section cover?</h2><p>We’ll be expanding on React fundamentals, specifically, the concept of components.  </p><p>By introducing your first-ever components that are used in every standard component to important concepts like nesting, conditional rendering, lists, and so on.</p><p>The rather compact section gives developers not only hands-on skills they’ll encounter throughout their frontend journey but a look under the hood.</p>

Components

<h2>What does this section cover?</h2><p>React specializes in developing the User Interface of applications, meaning the development of UI should be efficient by default.</p><p>We&#x27;ll be expanding on all the different ways to style React, as there is no specific one-way approach when it comes to styling. React Styling includes multiple methods for every situation to provide the utmost efficient approach to both users and developers.</p>

Styling

<h2>What does this section cover?</h2><p>Component states go through many changes in every application. This section works towards better understanding those changes and defining them. </p><p>State changes can be found in their lifecycle, which developers are bound to monitor in order to make modifications themselves. </p><p>States are also widely used, hence the creation of Hooks, to make that process more accessible to developers. </p><p>Lastly, states can get tricky to work with and may introduce side effects, but React has a solution for that too!  </p>