React JS | JavaScript and its Framework
B.Tech (Computer Science & Engineering)
BCSE-534 (Javas. & its Framework)
 |
| React JS | JavaScript | IndianTechnoEra |
Course Objectives:
1. Introduction to what is React and its basic concepts.
2. Learn what is
JSX and how it works behind the scenes.
3. OL what are the stateful and
stateless components and when to use them
4. Working with function-based
and class-based components
5. Working with React Modules, importing and
exporting the modules
6. Learn in detail about how the render method
works
7. React component lifecycle and different lifecycle methods
8.
Creating dynamic websites with help of reusable components
9. Creating a
proper working structure for a project from scratch which will help maintain
the project for the long term.
javascript
Goto JavaScript Tutorial: Click Here
Goto React | JavaScript Tutorial: Click Here
Unit -1 | Introduction to JavaScript and Emerging JavaScript
- Introduction to JavaScript: Variables, Control Statements, Functions, Arrays, Objects, Strings & Manipulations — Handling Events.
- Emerging JavaScript: Declaring Variables in ES6 - Const, Let. Template Strings, Default Parameters. Arrow Functions, Transpiling ES6, ES6 Objects and Arrays - Destructuring Assignment, Object Literal Enhancement, and Spread Operator. ES6 Modules, Promises, Classes.
Unit -2 | Introduction to Node.js and React Lifecycle Methods
- Introduction to Node.js: Setting up Node.js and NPM, Introduction to React: Virtual DOM, React element, ReactDOM, React Components — createClass, ES6 Class, Stateless functional Components, DOM Rendering, React element as JSX, Props — Default props, component states.
- React Lifecycle Methods: Mounting, Updating, and Unmounting, Forms, Handling Events, Refs, Lists, and Keys.
Unit -3 | Hooks, React Strap, React Route, React Flux, and React Redux
- Hooks: State Hook, Effect Hook, Rules of Hooks, and Building your own Hooks.
- React Strap: Link, Nav, and Card
- React Route: BrowserRouter, Routes, Route and Link,
- React Flux: Basic concepts, Flux architecture.
- React Redux: Redux Concepts and Data Flow, State, Actions, and Reducers, Redux with a UI.
Unit -4 | JSON Server with Reactjs
- JSON Server with Reactjs: Networking concepts - Client and Server, Setting up REST API using JSON Server, JavaScript library
Reference Books:
- 1.David Flanagan, “JavaScript: The Definitive Guide, Sixth Edition”, O'Reilly Media, 2011.
- 2.Lionel Lopez, “React: Quickstart Step-By-Step Guide To Learning React JavaScript Library (React.js, Reactjs, Learning React JS, React Javascript, React Programming)”, Kindle Edition
- 3.Krishna Rungta, “Learn NodeJS in 1 Day: Complete Node JS Guide with Examples”, Kindle Edition
Download ReactJS Notes
React JS Lab | JavaScript and its Framework Lab
B.Tech (Computer Science & Engineering)
BCSE-534L (Javas. & its Framework Lab)
Course Objectives:
1. Use a JavaScript package manager (npm)
2. Understand the new JavaScript language features, including functions.
3. Articulate what React is and why it is useful
4. Explore the basic architecture of a React application
5. Gain a deep understanding of JSX and the Virtual DOM
LIST OF PRACTICALS:
- 1. Create a web page with JS to validate age (onblur event) greater than 18 and count the no of words in the description field (onclick event).
- 2. Build simple React components that implement a render () method, which takes input data and returns data to display. Use an XML-like syntax called JSX. Input data, passed into the component can be accessed by render () via this.props.
- 3. Create a simple counter app in React with stateful Component.
- 4. Create a Todo List app with React components that allows users to add, edit, view and delete tasks.
- 5. Create a JSON file, which has students details such as register number, name, department and display the same in react Component using the map function.
- 6. Create an Event Registration form with React Strap components,
- 7. Create a online shopping page with React components that will consist in a Navigation Bar at the top of the page, a Main section in the middle that will contain all the shopping item’s information, and a Footer at the bottom of the page with a little information about the page, like social network icons and the copyright information.
- 8. Create a simple web page, with navigation links for AboutUs page and Contents page. In same using React Route concepts.
- 9. Create a react application, using which the details of “Restaurant: - Dish ID, In of the dish and Description” are fetched from the JSON server and displayed