This document introduces ReactJS, including that it is a JavaScript library created by Facebook in 2011 for building fast and interactive user interfaces with isolated components. It discusses that ReactJS allows building sizable and complex UIs with small isolated code, and that it is technically a library, not a framework. It then provides steps for setting up a React environment both using create-react-app and for manual setup.
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
React js t1 - introduction
1. ReactJs : Tutorial-01-Introduction
React / React.js / ReactJS
JavaScript Library
Fast & Interactive UI Building
In 2011 by FaceBook - Software Engineer, Jordan Walke
Sizable and Complex UIs with Small – Isolated code
Sometimes React called Framework but technically it’s a
Library.
React Native is a framework (like Vue.js and Angular)
React.JS version V16.13.1 (July 2020). (reactjs.org)
Create-react-app version 2.0 supports Babel 7, webpack 4, and
Jest23.
Thinking in React Component
React Component is a bunch of independent, isolated and reusable
bunch of code.
Like a simple function, it can call, pass some input and they render
some output.
Reuse components, Merge them, Complex UI.
Setting up a React Environment
Step: 1 : Install node.js (nodejs.org)
Step: 2 : check version of nodejs and npm
Step: 3 : Install ReactJs
$ npm install –g create-react-app
Step: 4 : Create first application
$ create-react-app myapp (must be small letters)
Step: 5 : It will create myapp folder, change folder using ‘cd’
2. ReactJs : Tutorial-01-Introduction
$ cd myapp
Step: 6: To run the project
User/Jainul/myapp$ npm start
Manual Setup of a React Environment
Step: 1 : Install node.js (nodejs.org)
Step: 2 : check version of nodejs and npm
Step: 3 : Create a project folder i.e. myapp and go to the folder myapp
Step: 4 : Create package.json
$ npm init.
Step: 5 : Now we will install the packages that we need.
Open the terminal or command prompt and run the commands inside the folder myapp/.
npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev
Step: 6 : Create a folder src/ where all the js code will come in that folder.
All the code for reactjs project will be available in the src/ folder.
Create a file index.js and add import react and react-dom, as shown below.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, from RTDL Tutorials!</h1>,
document.getElementById('root')
);
Step: 7 : Create a folder public/ and add index.html in that as shown below
<!DOCTYPE html>
<html>
3. ReactJs : Tutorial-01-Introduction
<head>
<meta charset="UTF-8" />
<title>ReactJS Demo</title>
</head>
<body>
<div id = "root"></div>
</body>
</html>
We will have the directory structure as shown below…
reatproj/
src/
index.js
node_modules/
public/
index.html
package.json
Step: 8 : We have added the commands to compile the final file in
package.json as follows:
"scripts": {
"start": "react-scripts start"
},
Step: 9 : To compile the final file run following command:
npm start
Step: 10 : The URL http://localhost:3000 will open in the browser once the code is
compiled as shown below: