Lecture Notes On Class 1
Introduction to React
Objective:
- Understand
the basics of React.
- Grasp
its purpose and role in web development.
- Learn
how to set up a basic React application using Create React App.
Learning
Outcomes:
- Gain
an understanding of what React is and why it's widely used in web
development.
- Understand
how React fits into the ecosystem of modern web development.
- Learn
how to set up and run a basic React application using Create React App.
1. What
is React?
React is
a popular JavaScript library used for building user interfaces (UIs).
It is maintained by Facebook and is widely used for developing single-page
applications (SPAs) and complex web applications.
Key
Concepts:
- Library
vs. Framework: React is a library, not a full-fledged
framework. It mainly focuses on the view layer (UI) of the
application, leaving other concerns like routing, state management, and
data fetching to be handled by other libraries or tools.
- Declarative:
React allows you to describe how your UI should look at any given time,
and it automatically updates the UI when the state of your application
changes.
- Component-Based:
React applications are made up of components. Each component is a
self-contained unit that controls its own rendering and behavior, making
React applications highly modular and reusable.
- Virtual
DOM: React uses a concept called the Virtual
DOM, which is an in-memory representation of the actual DOM. React
updates the Virtual DOM and then compares it with the real DOM to update
only the necessary parts of the UI, improving performance.
2. Why
Use React?
React has
become one of the most popular front-end libraries for web development, and
here are some reasons why developers prefer it:
- Reusability
of Components: In React, components are reusable, meaning
once you create a component, you can use it multiple times in different
parts of your application.
- Fast
Rendering with Virtual DOM: The Virtual DOM makes
rendering faster and more efficient by minimizing direct manipulation of
the real DOM.
- Declarative
Syntax: React uses a declarative approach to building
UIs, which makes it easier to understand and predict how the UI will look
based on the current state.
- Strong
Ecosystem and Community Support: React has a large community
of developers and a rich ecosystem of third-party libraries, tools, and
extensions.
- SEO-Friendly:
With tools like React Helmet and server-side rendering (SSR), React can be
made SEO-friendly, which is often a challenge for single-page applications.
- Cross-Platform
Development: React can be used to build not only web
applications (React) but also mobile applications (React Native).
3.
React's Role in Web Development
React
fits into the broader JavaScript ecosystem and can be used with various
other tools to build full-stack applications. Here's how it works in a typical
modern web development setup:
1.
Front-End (Client-Side): React is
primarily used on the client-side (the browser) to build dynamic and
interactive user interfaces.
2.
Back-End (Server-Side): For
full-stack applications, React can work with back-end technologies like Node.js,
Express.js, PHP, Ruby on Rails, or even Django. In
these cases, React communicates with the server via APIs (like REST or
GraphQL).
3.
State Management: React uses built-in hooks like useState and useEffect for
local state management. For large-scale applications, state management
libraries like Redux or Context API can be used.
4.
Setting Up a Basic React Application
To start
using React, we need to set up a development environment. The easiest way to
set up a React application is by using Create React App, which is an
official tool provided by Facebook for bootstrapping a React project.
Steps to
Set Up a React Project with Create React App:
1.
Install Node.js: React requires Node.js to
run. If you don’t have Node.js installed, download it from https://nodejs.org.
To check
if Node.js is installed, open your terminal or command prompt and run:
node -v
If
Node.js is installed, you will see the version number. Otherwise, you need to
install it.
2.
Install npm (Node Package Manager): npm
comes with Node.js and is used to install packages and dependencies. To check
if npm is installed, run:
npm -v
3.
Create a New React App:
o
Open your terminal or command prompt.
o
Run the following command to create a new React
project:
npx create-react-app my-app
1. npx is a tool that comes with npm to run packages without installing them globally.
2. create-react-app is the command to generate a new React application.
3. my-app is the name of the project. You can replace it with your preferred name.
4.
Navigate into the Project Folder: Once the
project is created, navigate into the folder:
cd my-app
5.
Run the React Application: Inside
the project folder, run:
npm start
This will
start the development server, and your application will open in the browser at
http://localhost:3000. You'll see the default React welcome page.
5. Understanding
the Project Structure
When you
create a React app using create-react-app, you'll see the following folder structure:
my-app/
node_modules/ # All the installed packages
public/ # Contains static files like index.html
src/ # Contains all the source code
files
App.js # The main React component
index.js # The entry point for the React app
package.json # Contains project metadata and
dependencies
- public/index.html:
This is the single HTML page that will load the React app.
- src/index.js:
This is the entry point for the React application, where React is rendered
to the DOM.
- src/App.js:
This is the default React component that gets displayed when you start the
application.
6. Basic
React Concepts in the App
Here’s a
breakdown of the essential React concepts used in the basic template generated
by create-react-app:
- JSX
(JavaScript XML): JSX is a syntax extension to JavaScript that
looks similar to HTML but allows you to embed JavaScript expressions
directly within the HTML-like structure.
- React
Component: A function or class that returns JSX,
describing how the UI should look.
- ReactDOM.render():
This function is responsible for rendering a React component to the DOM.
7.
Conclusion
In this
first session, you’ve learned:
- What
React is and why it’s popular in web development.
- The
benefits of using React for building modern web applications.
- How
to set up and run a basic React app using Create React App.
For the
next class, we will dive deeper into JSX, the rendering process,
and creating components. Understanding these foundational concepts will
help you build more complex React applications in the future.
Homework
/ Practice (Optional):
- Go
through the official React documentation to familiarize yourself with
basic concepts: React Docs.
- Experiment
with creating a new React project using create-react-app and
modify the content of App.js.