Scribd
Upload
25 views18 pages

7th Sem Mini Internship

Uploaded by

prakhyat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views18 pages

7th Sem Mini Internship

Uploaded by

prakhyat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Mini Internship Project

React JS
Submitted To : Submitted By:-
Name- Ms. Manisha Rai Name-Prakhyat Bhartia
Department:- Assistant Professor CSE Roll No-2000270120076
Student N0-2012135
Branch- CS - 2
CERTIFICATE
OVERVIEW - REACT JS
• REACT IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES.

• REACT IS USED TO BUILD SINGLE-PAGE APPLICATIONS.

• REACT ALLOWS US TO CREATE REUSABLE UI COMPONENTS.

• IT IS MAINTAINED BY META A COMMUNITY FOR INDIVIDUAL DEVELOPERS


AND COMPANIES.
NEED FOR REACT
• DECREASING COMPLEXITY FROM PLAIN CSS RULE.
• RELOADING OF PAGE ON PAGE NAVIGATION.
• A LOT OF DATA ON A PAGE CHANGING OVER TIME.
• UNPLEASANT UX FROM USING CASACADING UPDATES OF DOM TREE.
• SHIFT FROM MVC MENTALITY.
CREATING YOUR FIRST REACT APP

1. INSTALL NODE JS FROM http://www.nodejs.org

2. CHECK IF NODE, NPX AND NPM ARE PROPERLY INSTALLED.


• TYPE node ON POWERSHELL
• TYPE npx ON POWERSHELL
• TYPE npm ON POWERSHELL

3. NPM IS PERMANENT PACKAGE MANAGER FOR ITS INSTALLATION WHILE NPX IS


TEMPORARY PACKAGE MANAGER FOR ITS EXECUTION AT ONCE OR WHEN RUN.

4. ONCE DONE WITH THESE STEPS YOU’RE UP TO GO ON NEXT STEP.


CREATING YOUR FIRST REACT APP
CREATING YOUR FIRST REACT APP

5. NOW, TO CREATE YOUR APP MAKE A DIRECTORY

6. HERE WE’RE MAKING A TODO LIST, SO WE MAKE A TODO DIRECTORY AND RUN
THE DIRECTORY WITH THE CODE.
• TYPE create-react-app list IN THE TERMINAL PRESS ENTER.

7. NOW THE PROCESS WILL TAKE TIME, THEN YOU’LL GET YOUR APP, WITH ALL
NECESSARY FILES.

8. NOW, YPU CAN ADD YOUR REACT TO THE FILES FOR MAKING YOUR TODO LIST.
CREATING YOUR FIRST REACT APP
CREATING YOUR FIRST REACT APP
REACT in the Wild
Server-side rendering

Server-side rendering with JavaScript


libraries like React is where the server
returns a ready to render HTML page and
the JS scripts required to make the page
interactive.

• React.renderToString() returns pure


HTML
Why should I use React?

• Easy to read and understand views

• Concept of components is the future of web development

• If your page uses a lot of fast updating data or real time data - React is the way to
go

• Once you and your team is over the React's learning curve, developing your app
will become a lot faster
Is switching to React easy?

Understanding how it works will take time and will slow you down at
first (but once you and your team get it, things will start happening much
faster).
Fundamental
Most important terms in React
Components In React
• Components are self-contained reusable
building blocks of web application.

• React components are basically just


idempotent functions (same input
produces same output).

• They describe your UI at any point in


time, just like a server-rendered app.
Functional Components
Functional components are simply JavaScript functions. We can create a
functional component in React by writing a JavaScript function. These
functions may or may not receive data as parameters. Below example
shows a valid functional component in React:

const Democomponent=()=>
{
return <h1>Welcome Message!</h1>
;}
Class Components
The class components are a little more complex than the functional components.
The functional components are not aware of the other components in your
program whereas the class components can work with each other. We can pass
data from one class component to other class components. We can use JavaScript
ES6 classes to create class-based components in React. Below example shows a
valid class-based component in React:
class Democomponent extends React.Component
{
render(){ return <h1>Welcome Message!</h1>
; } }
Thankyou

You might also like