Ever wondered what React.js or its more common term ‘React’ is and why there is such a buzz about it in the software development community? Well, React is an open-source JavaScript framework and library developed by Facebook and it’s used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript. But we are sure, this won’t be enough for you and to know more about React and learn about its amazing features, GDSC NIT Silchar brings its next session “KICKSTART TO REACT” where we will explore React and how it can be used to build modern and interactive UI websites.
4. In today’s Session
• React Setup
• Components and Its types
• What’s JSX..?
• Using JS in HTML
• Importing CSS and CSS Modules
• Props
• Hooks!!
• UseState
7. What are React Components..??
Components are independent and reusable chunk of code. They serve the
same purpose as JavaScript functions, but work in isolation and return
HTML.
Stateful Class
Components
Stateless Functional
Components
React
Components
9. HTML in JS..??
JSX!!
● JSX stands for JavaScript XML.
● Syntax extension of JavaScript. It allows us to directly write HTML in React.
● Compiled using Babel.
● De-reference variables using {}.
10. ● CSS Modules let you use the same CSS class name in different files without
worrying about naming clashes.
● Locally Scoped
CSS Modules
11. React Hooks
Hooks allow us to "hook" into React features such as state and lifecycle
methods.
There are 3 rules for hooks:
● Hooks can only be called inside React function components.
● Hooks can only be called at the top level of a component.
● Hooks cannot be conditional
12. The All Round Updater!!
The React useState Hook allows us to track state in a function component.
State generally refers to data or properties that need to be tracking in an
application.
useState()
14. SPA v/s Non-SPA
ReactJS for SPA
● Non-Single Page Application
○ When you go to a new page a request is sent to
the server, the page is retrieved and rendered.
● Single Page Application
○ Loads only single HTML Document file and then
loads different pages via Javascript API and
Logics.
15. v6
• Pages are created from Components in React
• React Router intercepts any request for any particular page and renders
the needful component accordingly
• Programmatic rendering of Pages
React Router
16. React Router continued . . .
still v6
• index.html - The single HTML file where all of our components are
rendered programmatically
• When you go to /movies then index.html will be rewritten with
component’s logic
19. Let’s code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
20. Data Fetching from API
GET: /api/v1/movies
● Front-end applications need to fetch data from
APIs
● Handle different states of the app before, during
and after fetching.
23. Creating States
states
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
24. Can use external libraries like, axios too.
Fetching
fetch(url, {
method: "GET" // default, so we can ignore
})
We will use a free online mock API, called JSONPlaceholder to fetch data
https://jsonplaceholder.typicode.com/
25. Where to write your fetch()?
useEffect() hook?
● fetch() causes side-effects
○ Side-effect, are actions performed with the outside world
○ Unpredictable. For eg. in fetch() result in
■ success
■ Error
● For side-effects: useEffect()
useEffect(() => {
// data fetching here
}, []);
27. Context API
Application-wide state management
● Effectively produce global variables that can be
passed around
● Much better alternative to prop drilling or
passing via props
28. • Global State (store): The state which needs to be managed application-
wide.
• Producer: Component that provides the state to its children.
• Consumer: Component that consumes and uses the state.
Context API continued . . .
Terminologies
30. Using Context API
Each of the Component those who want to Consume
the value (subscriber) can access the username value
without requiring to pass it via props.