React - Start learning today

ReactA JavaScript library for building user interfaces
NITIN TYAGI
Consulting Software Engineer
https://www.linkedin.com/in/nitin-tyagi-37832798/

React
Agenda
Session Introduction & Learning Philosophy
Why use React?
React Setup
JSX & Rendering Elements
React Parent/Child Components
React Functional Components and Class components
React Prop and State
React Lifecycle
Handling Events
React Native : Introduction

React
Session Introduction & Learning
Philosophy
What is React?
Trick is 3P….. Practice, Practice, Practice
Learn by doing examples. Scenario based problems.
Setup React environment and install new packages and play around.
Download react community projects and check out Architecture and
application.
https://reactjs.org/community/examples.html
Design your own project and Architecture.

Why use React?
• Virtual DOM.
HTML is easy to Manipulate. Unfortunately, easily doesn’t mean quickly here.
• Reusable Web Components.
• Maintained by Facebook

React Setup
• Download and install Visual studio code IDE. Free, Cross platform and Opensource
 https://code.visualstudio.com/download
• Download and install Node Js for JavaScript runtime.
 https://nodejs.org/en/
• Check npm latest is installed from above installation.
 https://www.npmjs.com/get-npm
• Create first React project by using below commands
 npm install -g create-react-app
 create-react-app my-app
 cd my-app
 npm start
 http://localhost:3000

React
JSX & Rendering Elements
• It is a syntax extension of JavaScript.
• JSX allows us to write HTML in React.
• For example consider below snippet.
• Let go back to visual studio code to see JSX in action.
const myelement = <h1>I Love
JSX!</h1>;
ReactDOM.render(myelement,
document.getElementById('root'));
const myelement =
React.createElement('h1', {}, 'I
do not use JSX!');
ReactDOM.render(myelement,
document.getElementById('root'));
Code Snippet : With JSX Code Snippet : Without JSX

React Parent/Child Components
ReactDOM.render( ,document.getElementById('root'));
<App/>
<WebPagebody /> <WebPagefooter /><WebPageheader />
<div>…..</div><header>..</header> <footer>...</footer>

React
React Functional Components and Class
components
• Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but
work in isolation and returns HTML via a render function.
• The simplest way to define a component is to write a JavaScript function:
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
You can also use an ES6 class to define a component:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}
• The above two components are equivalent from Reacts point of view.
• Lets go back to visual studio code and explore more.

React
React Prop and State
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name=“Nitin" />; ReactDOM.render( element, document.getElementById('root') );
• Props are arguments passed into React components.
• Props are passed to components via HTML attributes.
• Props are also how you pass data from one component to another, as parameters.
Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be
changed. State is used for mutable data, or data that will change. This is particularly useful for user input.
• React components has a built-in state object.
• The state object is where you store property values that belongs to the component.
• When the state object changes, the component re-renders.
class Car extends React.Component {
constructor(props) { super(props); this.state = {Name: “Nitin"}; }
render() {
return ( <div> <h1>My Name</h1> </div> ); } }

React Lifecycle
• 3 major phases of React Lifecyle mounting, updating & unmounting
• Lets see some examples in action.
Mounting Updating Unmounting
 constructor()
 getDerivedStateFromPr
ops()
 render()
 componentDidMount()
 getDerivedStateFromPr
ops()
 shouldComponentUpd
ate()
 render()
 getSnapshotBeforeUpd
ate()
 componentDidUpdate(
)
 componentWillUnmou
nt()

Handling Events
Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic
differences:
• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.
button onClick={activateLasers}> Activate Lasers </button>
<
function ActionLink() { function handleClick(e)
{ e.preventDefault();
console.log('The link was clicked.’);
} return ( <a href="#" onClick={handleClick}> Click me </a> ); }

React
React Native : A framework for building Native Apps
Written in JavaScript—rendered with native code
React primitives render to native platform UI, meaning your
app uses the same native platform APIs other apps do.
Many platforms, one React. Create platform-specific versions
of components so a single codebase can share code across
platforms. With React Native, one team can maintain two
platforms and share a common technology—React.
For more React Native advantages. Visit below link.
https://www.oreilly.com/library/view/learning-react-
native/9781491929049/ch01.html

React - Start learning today

More Related Content

What's hot

Similar to React - Start learning today

Recently uploaded

React - Start learning today