React js Programming
Santosh K L
9538036236
Table of Contents
• Requirements
• Chapter 1: Introduction
– Computer Setup
– Your First React Application
– Explaining the Source Code
• Chapter 2: How to Create React Components
– How to Return Multiple Elements With Fragments
– How to Render to the Screen
– How to Write Comments in React
– How to Compose Multiple Components as One
Table of Contents
• Chapter 3: Making Sense of JSX
– How to Render a List Using JSX
– How to Add the Class Attribute
• Chapter 4: Props and States
– How to Pass Down Multiple Props
– Props are Immutable
– State in React
– How to Pass State to a Child Component
– How to Use React DevTools to Inspect States and Props
Table of Contents
• Chapter 5: React Conditional Rendering
– Partial Rendering with a Regular Variable
– Inline Rendering with the && Operator
– Inline Rendering with the Conditional (Ternary)
Operator
• Chapter 6: How to Handle User Events
– How to Change the UI by Handling Events
Table of Contents
• Chapter 7: CSS in React
– React Inline Styling
– CSS Files
– CSS Modules
– Tailwind CSS
– Which One Should You Use?
• Chapter 8: How to Build Forms in React
– How to Handle Form Input
– How to Handle Form Submission
– How to Handle Form Validation
Table of Contents
• Chapter 9: Network Requests in React
– The useEffect Hook
• Wrapping Up
Requirements
• To get the full benefit of this presentation, you
should have basic knowledge of HTML, CSS,
and JavaScript. No previous knowledge about
React is needed, as we will start from the very
basics.
Computer Setup
• To start programming with React, you'll need to have
three things:
– A web browser
– A code editor
– Node.js
• We're going to use the Chrome browser to run our
JavaScript code, so if you don't have it, you can
download it from https://www.google.com/chrome/.
• The browser is available for all major operating systems.
Once the download is complete, install the browser on
your computer.
Code Editor
• Next, you'll need to install a code editor if you
don't already have one. There are several free
code editors available on the Internet, such as
Sublime Text, Visual Studio Code, and
Notepad++.
• Out of these editors, my favorite is Visual
Studio Code, because it's fast and easy to use.
How to install Visual Studio Code
• Visual Studio Code, or VSCode for short, is an
application created for the purpose of writing
code. Aside from being free, VSCode is fast
and available on all major operating systems.
• You can download Visual Studio Code from
https://code.visualstudio.com/
• When you open the link above, there should
be a button showing the version compatible
with your operating system as shown below:
Downloading Visual Studio Code
How to install Node.js
• Node.js is a JavaScript runtime application that enables you to run
JavaScript outside of the browser. You need to install this
application on your computer to install packages required in React
development.
• You can download and install Node.js from https://nodejs.org.
Pick the recommended LTS version because it has long-term
support. The installation process is pretty straightforward.
• To check if Node has been properly installed, type the command
below on your command line (Command Prompt on Windows or
Terminal on Mac):
• node -v
Your First React Application
• It's time to run your first React application. First, create a folder on
your computer that will be used to store all files related to this
book. You can name the folder 'beginning_react'.
• The next step is to open your terminal and run the npm command
to create a new React application using Vite.
• Vite (pronounced 'veet') is a build tool that you can use to
bootstrap a new React project. Inside the 'beginning_react' folder,
you need to run the following command to create a new React
project with Vite:
-- --template react
• You should see npm asking to install a new
package (create-vite) as shown below.
Proceed by typing 'y' and pressing Enter:
• Need to install the following packages:
[email protected] Ok to proceed? (y) y
• When you're done, follow the next steps you
see in the output above. Use the cd command
to change the working directory to the
application you've just created, and then
run npm install to install the packages
required by the application.
• Then, you need to run the npm run
dev command to start your application:
Vite-React Home Page
Explaining the Source Code
• Now that you've successfully run a React
application, let's take a look at the source
code generated by Vite to understand how
things work.
• Run the Visual Studio Code you've installed in
the previous section, and open the 'my-react-
app' folder inside VSCode.
• Here, you should see several folders and files
that make up the React application as follows:
Vite-React Application Structure
vite.config.js
The vite.config.js is a configuration file that
instructs Vite on how to run the application.
Because we have a React application, you'll see
the React plugin imported inside:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
• When you run the npm run dev command,
Vite will look into this file to know how to run
the program.
• The package.json file stores the information
about the project, including the packages
required to run the project without any issues.
The package-lock.json file keeps track of the
installed package versions.
• The .eslintrc.cjs file contains ESLint rules.
ESLint is a code analysis tool that can identify
problematic code in your project without
needing to run the project. It will report any
errors and warnings in VSCode.
• The index.html file is a static HTML document
that's going to be used when running the
React application, and the README.md file
contains an introduction to the project.
• You don't need to modify any of these files.
Instead, let's go to the src/ folder where the
React application code is written.
• First, the App.css file contains the CSS rules applied
to the App.jsx file, which is the main React
application code.
• The assets/ folder contains the assets required for
this project. In this case, it's the React icon, which
you had seen in the browser.
• The index.css file is the root CSS file applied globally
to the application, and the main.jsx file is the root
file that access the index.html file to render the
React application. Here's the content of main.jsx file:
Here, you can see that the ReactDOM library creates a root
at the <div> element that contains the root ID, then renders
the whole React application to that element.
• In this file, a single component named App is
defined. The Vite and React logos are rendered
with a link to the respective library, and there's
a counter button that will increment the
counter by 1 when you click on it.
• This file is where we will be exploring the
fundamentals of React. Let's delete everything
in this file, and write a simple App component
that renders a <h1> element:
Next, delete the index.css, app.css, and assets/ folder. You also need to delete the
import './index.css' statement in your main.jsx file.
If you open the browser again, you should see a single heading rendered as follows:
React Output From Code Changes
Alright! Now you're ready to learn the fundamentals of React. We'll start your first
lesson in the next chapter.
Chapter 2: How to Create React
Components
• In React, a component is a single independent
unit of a user interface (UI). What you write
inside a component will determine what
should appear on the browser screen at a
given time.
• In the previous chapter, we created
an App component that returns a heading
element:
• A component is made up of a function that
returns a single UI element.
• When you want a component to render
nothing, you can return a null or false instead
of an element.
• All React components are saved under
the .jsx file extension. As you can see in this
project, you have main.jsx and App.jsx.
• What is JSX? It's an extension of JavaScript
that produces JavaScript-powered HTML
elements. We're going to learn about it later.
How to Return Multiple Elements With
Fragments
• A component must always return a single
element. When you need to return multiple
elements, you need to wrap all of them in a
single element like a <div>:
• But this will make your application render one
extra <div> element in the browser. To avoid
cluttering your application, you can render an
empty tag <> like this:
• The empty tag above is a React feature called
a Fragment. By using a Fragment, your
component won't render an extra element to
the screen.
• You can also import the Fragment module
from React to make it explicit as follows:
But you don't need to explicitly state the Fragment tag. Using an empty tag <> is
enough.
How to Render to the Screen
• To render a React component into the browser,
you need to create a root React component
using the ReactDOM library, which you've seen
previously when viewing the main.jsx file.
• You need to have an HTML file as the source
from which your React component is rendered.
• Usually, a very basic HTML document with
a <div> is enough, as you can see in
the index.html file:
• Next, you render the component into
the <div> element.
• Notice how ReactDOM is imported from react-
dom package, and
the document.getElementById('root') is used
to select the <div> element below:
• Here, you can see that the App component is placed in the same file as the
ReactDOM library. You can do this if you want to remove the App.jsx file, so
you have only a single main.jsx file as the source for your React application.
• But it's confusing to have multiple components in one file, so let's not do
this.
How to Compose Multiple Components as
One
• Up until this point, you've only rendered a
single App component to the browser. But
applications built using React can be
composed of tens or hundreds of components.
• Composing components is the process of
forming the user interface by using loosely
coupled components. It's kind of like making a
house out of Lego blocks, as I will show you in
the following example:
• From the example above, you can see how
the <ParentComponent> renders three children
components:
– <UserComponent>
– <ProfileComponent>
– <FeedComponent>
• The composition of many components will form a single
tree of React components in a top-down approach.
• The tree will then be rendered into the DOM through
the ReactDOM.render() method:
React Component Tree Illustrated
Chapter 3: Making Sense of JSX
• In the previous chapter, you learned that a
component must always have
a return statement that contains elements to
render on the screen:
• The tag <h1> looks like a regular HTML tag,
but it's actually a special template language
included in React called JSX.
• JSX is a syntax extension that produces
JavaScript powered HTML elements. It can be
assigned to JavaScript variables and can be
returned from function calls. For example:
• Because of JSX, you can also embed JavaScript
expressions inside an element by using curly
brackets {}:
• This is what makes React elements different
from HTML elements. You can't embed
JavaScript directly by using curly braces in
HTML.
• Instead of creating a whole new templating
language, you just need to use JavaScript
functions to control what is being displayed on
the screen.
How to Render a List Using JSX
• For example, let's say you have an array of
users that you'd like to show:
You can use the map() function to loop over the array:
• Inside React, you don't need to store the return
value of the map() function in a variable. The
example above will return a <li> element for
each array value into the component.
• While the above code is already complete,
React will trigger an error in the console, saying
that you need to put a "key" prop in each child
of a list (the element that you return
from map() function):
React 'key' Warning on Browser Console
A prop (short for property) is an input that you can pass to a
component when rendering that component. The key prop is a
special prop that React will use to determine which child
element has been changed, added, or removed from the list.
• You won't use it actively in any part of your
array rendering code, but React will ask for
one when you render a list.
• It is recommended that you put the unique
identifier of your data as the key value. In the
example above, you can use the user.id data.
Here's how you pass a key prop for
each <li> element:
How to Add the Class Attribute
