Scribd
Upload
176 views16 pages

React Js

This document discusses React JS and how to create a basic React app. It explains how to install create-react-app and use it to generate a new React project folder. It describes the basic file structure of a React app including the index.js and App.js files. It also discusses how to create simple React components, import libraries like Tachyons for styling, and use properties and arrow functions to pass data between components.

Uploaded by

shashikant punia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
176 views16 pages

React Js

This document discusses React JS and how to create a basic React app. It explains how to install create-react-app and use it to generate a new React project folder. It describes the basic file structure of a React app including the index.js and App.js files. It also discusses how to create simple React components, import libraries like Tachyons for styling, and use properties and arrow functions to pass data between components.

Uploaded by

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

REACT JS

DATAFLOW
Dont Bother about the code just move on and u able to catch it perfectly
REACT-CREATE-APP:-this is a tool used to create react
apps/folder from the global packages of npm
INSTALLATION:-
TYPE IN THE TERMINAL-:
npm install -g create-react-app
CREATION OF REACT-APP:-
TYPE IN THE TERMINAL:-
create-react-app _______(app-name).
NOW TO OPEN LIVE SERVER FOR REACT APP:-
1)GO TO THE APP USING TERMINAL BY
cd desktop\robofriends(appName)
2)TYPE THIS FOR LIVE SERVER
npm start

THEN FINALLY THIS OPENS


NOW AS THE TECHNOLOGY UPGRADES ALWAYS
WE NEED TO UPGRADE OUR PROJECT AS WELL
SUPPOSE HAVING A PROJECT ON SOME OUTDATED
VERSION ,TO UPGRADE IT JUST NEED TO OPEN THE
PACKAGE.JSON FILE AND CHANGE THE REACT-SCRIPT TO
LATEST ONE AS..

TO MAKE OUR FIRST COMPONENT IN REACT JS


MAIN FILE TO WORK-: INDEX.JS(It contains DOM)
EX:-Component we make is Hello.js so it look like
as:-

INDEX.JS look likes:-

The Component can be influenced from APP.JS:-


INSTALLING 'TACHYONS'(SIMILAR TO BOOTSTRAP
LIBRARY WHICH PROVIDES PREDEFINED CLASS NAME)
INSTALL BY:- npm install tachyons
AND IN THE INDEX.JS FILE:
WRITE:- import 'tachyons';
THEN WE CAN USE THE PRDEFINED CLASS IN TACHYONS
AS:-

The above code like HTML is actually known as JSX which


represent the virtual DOM and the actual keep checking
the changes and after that it apply it to the actual DOM.
NOTE-: React is concerned only about the components
and each component has its own universe.
NOW WE CAN CREATE OUR OWN PROPERTIES LIKE:-
WE CAN ALSO USE THE ARROW FUNCTION:-

PROJECT BEGINNING:- PROJECT-NAME :-


ROBOFREINDS
FIRST HALF LOOK LIKE AS-:
CODE FOR ABOVE :-
WE HAVE CREATED ONE OTHER FILE AS:
CARD.JS AS:

INDEX.JS AS:

You might also like